@import url('https://fonts.googleapis.com/css2?family=Besley:ital,wght@0,400..900;1,400..900&display=swap');
            :root {
                --font-primary: "Newsreader", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
                --font-secondary: "Besley", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
                --font-serif: "Noto Serif", serif;
                --font-sans: 'Noto Sans', sans-serif;

                --color-primary: #f5f5f5;
                --color-secondary: #e8e8e8;
                --color-text: #e0e0e0;
                --color-muted: #d0d0d0;
                --color-subtle: #c0c0c0;
                --color-border: #1d2021;
                --color-bg: #080808;
            }

              .status-display {
                  position: absolute;
                  top: 10px;
                  left: 50%;
                  transform: translateX(-50%);
                  font-size: 0.8em;
                  z-index: 1000;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  gap: 8px;
                  font-family: var(--font-secondary);
              }

            .discord-link {
                position: relative;
            }

            .discord-status-dot {
                position: absolute;
                top: -2px;
                right: -2px;
                display: inline-block;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                border: 1px solid var(--color-bg);
            }

            .spotify-link {
                position: relative;
            }

            .spotify-play-indicator {
                position: absolute;
                top: -3px;
                right: -3px;
                display: inline-block;
                width: 12px;
                height: 12px;
                background-color: #43b581;
                border-radius: 50%;
                border: 1px solid var(--color-bg);
                animation: spotify-play-pulse 2s ease-in-out infinite;
            }

            .spotify-play-indicator i {
                color: white;
                font-size: 6px;
                position: absolute;
                top: 50%;
                left: 55%;
                transform: translate(-50%, -50%);
            }

            .discord-status-dot.online {
                background-color: #43b581;
                animation: pulse-green-small 2s infinite;
            }

            .discord-status-dot.idle {
                background-color: #faa61a;
                animation: pulse-yellow-small 2s infinite;
            }

            .discord-status-dot.dnd {
                background-color: #f04747;
                animation: pulse-red-small 2s infinite;
            }

            .discord-status-dot.offline {
                background-color: #747f8d;
            }

            .spotify-now-playing {
                display: flex;
                align-items: center;
                gap: 6px;
                color: var(--color-text);
                font-size: 0.8em;
                opacity: 0.6;
            }

            .spotify-text {
                white-space: nowrap;
                color: #707070;
                animation: spotify-subtle-pulse 3s ease-in-out infinite;
            }

            .spotify-now-playing i {
                font-family "Inter" !important;
                color: #707070;
                animation: spotify-subtle-pulse 3s ease-in-out infinite;
            }

            @keyframes spotify-subtle-pulse {
                0% {
                    opacity: 0.7;
                }
                50% {
                    opacity: 2.5;
                }
                100% {
                    opacity: 0.7;
                }
            }

            @keyframes pulse-green-small {
                0% {
                    box-shadow: 0 0 0 0 rgba(67, 181, 129, 0.7);
                }
                70% {
                    box-shadow: 0 0 0 4px rgba(67, 181, 129, 0);
                }
                100% {
                    box-shadow: 0 0 0 0 rgba(67, 181, 129, 0);
                }
            }

            @keyframes pulse-yellow-small {
                0% {
                    box-shadow: 0 0 0 0 rgba(250, 166, 26, 0.7);
                }
                70% {
                    box-shadow: 0 0 0 4px rgba(250, 166, 26, 0);
                }
                100% {
                    box-shadow: 0 0 0 0 rgba(250, 166, 26, 0);
                }
            }

            @keyframes pulse-red-small {
                0% {
                    box-shadow: 0 0 0 0 rgba(240, 71, 71, 0.7);
                }
                70% {
                    box-shadow: 0 0 0 4px rgba(240, 71, 71, 0);
                }
                100% {
                    box-shadow: 0 0 0 0 rgba(240, 71, 71, 0);
                }
            }

            @keyframes spotify-play-pulse {
                0% {
                    box-shadow: 0 0 0 0 rgba(29, 185, 84, 0.7);
                }
                70% {
                    box-shadow: 0 0 0 6px rgba(29, 185, 84, 0);
                }
                100% {
                    box-shadow: 0 0 0 0 rgba(29, 185, 84, 0);
                }
            }

            @keyframes aussie-lemonade {
                0% {
                    color: #ffffff;
                    text-decoration: underline;
                    text-decoration-color: #ffd9008a;
                    text-decoration-thickness: 1.4px;
                    text-underline-offset: 3px;
                }
                50% {
                    color: #ffffff;
                    text-decoration: underline;
                    text-decoration-color: #00bfff8a;
                    text-decoration-thickness: 1.4px;
                    text-underline-offset: 3px;
                }
                100% {
                    color: #ffffff;
                    text-decoration: underline;
                    text-decoration-color: #ffff008a;
                    text-decoration-thickness: 1.4px;
                    text-underline-offset: 3px;
                }
            }

            .aussie-lemonade-animation {
                animation: aussie-lemonade 3s ease-in-out infinite;
                font-weight: 600;
            }

            .underlined-interest {
                text-decoration: underline;
                text-decoration-thickness: 1.4px;
                text-underline-offset: 3px;
            }

            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            html {
                height: 100%;
            }

            html::before {
                content: '';
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: var(--color-bg);
                background-image:
                    radial-gradient(circle at 25% 25%, rgba(255,255,255,0.01) 1px, transparent 2px),
                    radial-gradient(circle at 75% 75%, rgba(255,255,255,0.01) 1px, transparent 2px);
                background-size: 25px 25px, 25px 25px;
                background-position: 0 0, 12.5px 12.5px;
                z-index: -1;
            }

            body {
                font-family: var(--font-secondary);
                background: transparent;
                color: var(--color-secondary);
                line-height: 1.6;
                min-height: 100vh;
                padding: 60px 40px;
                overflow-x: hidden;
                position: relative;
            }

            .container {
                max-width: 1000px;
                margin: 0 auto;
            }

            .header {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 1rem;
                justify-content: center;
                margin-bottom: 50px;
                margin-top: 50px;
                animation: fadeIn 0s ease-in forwards;
            }

            .header-main {
                align-items: center;
                display: flex;
                gap: 1rem;
                justify-content: center;
            }

            .center-logo {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                position: relative;
            }

            .logo-container {
                position: relative;
                display: inline-block;
            }

            .blog-link-overlay {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 10;
                text-align: center;
            }

            .blog-link-mobile {
                display: none;
            }

            .blog-link {
                display: inline-block;
                color: var(--color-primary);
                text-decoration: none;
                font-family: var(--font-primary);
                font-size: 1.2em;
                font-weight: 600;
                position: relative;
            }

            .blog-link::after {
                content: '';
                position: absolute;
                width: 0;
                height: 2px;
                bottom: -2px;
                left: 50%;
                background-color: var(--color-primary);
                transform: translateX(-50%);
            }

            .blog-link:hover::after {
                width: 100%;
            }

            .logo-svg {
                width: 300px;
                height: 300px;
                object-fit: contain;
                filter: brightness(9.0) opacity(0.7);
                animation: slowRotate 120s linear infinite;
                user-select: none;
            }

            @keyframes slowRotate {
                from {
                    transform: rotate(360deg);
                }
                to {
                    transform: rotate(0deg);
                }
            }

            @keyframes fadeIn {
                from {
                    opacity: 0;
                    transform: translateY(20px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

                .intro {
                    text-align: left;
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                }

                @media (max-width: 768px) {
                    .intro {
                        text-align: center;
                        flex: 1;
                    }
                }

            .links {
                font-family: var(--font-primary);
                display: flex;
                flex-direction: column;
                gap: 25px;
                margin-left: 90px;
                align-items: center;
                justify-content: center;
                border: 1px solid var(--color-border);
                padding: 10px;
                height: auto;
            }

            .link {
                display: flex;
                align-items: center;
                color: var(--color-subtle);
                text-decoration: none;
                font-size: 1.35em;
                font-weight: 400;
            }

            .link:hover {
                color: var(--color-primary);
            }

            .item-title,
            .item-techstack {
                display: inline-block;
                vertical-align: middle;
            }

            .item-techstack {
                color: var(--color-muted);
                font: 400 1em var(--font-primary);
                padding-top: 4px;
                font-style: italic;
            }

            .name {
                font-family: var(--font-primary);
                font-size: 2.5em;
                font-weight: 600;
                color: var(--color-primary);
                margin-bottom: 20px;
                letter-spacing: -0.5px;
            }


            .descriptors {
                font-family: var(--font-primary);
                font-size: 1.0em;
                color: var(--color-muted);
                font-style: italic;
                margin-top: -12px;
                margin-bottom: 20px;
                font-weight: 400;
            }

            .about {
                font-size: 1em;
                color: var(--color-text);
                line-height: 1.7;
                font-weight: 400;
                margin-bottom: 20px;
            }

            .pronounce {
                font-size: 0.9em;
                color: var(--color-subtle);
                font-family: var(--font-serif);
                font-weight: 500;
                font-style: italic;
                margin-top: -30px;
                padding-bottom: 10px;
            }

            .github-contributions {
                text-align: center;
                width: 100%;
                max-width: 800px;
                margin: 10px auto 40px auto;
                padding-bottom: 190px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .contributions-graph {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 100%;
                opacity: 0.70;
                overflow: hidden;
                position: relative;
            }

            .contribution-chart {
                width: 100%;
                height: 100%;
                object-fit: contain;
                border-radius: 0;
                opacity: 0;
                filter: invert(1) blur(0.1px);
            }

            .content {
                display: flex;
                flex-direction: column;
                gap: 30px;
                max-width: 1200px;
                margin-left: auto;
                margin-right: auto;
            }

            .section {
                display: flex;
                flex-direction: column;
                gap: 20px;
            }

            /* Grid layout for items within sections */
            .section:not(.education-skills-section) {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
                gap: 20px;
            }

            .education-skills-section {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 20px;
            }

            .education-skills-section .item:nth-child(2),
            .education-skills-section .item:nth-child(3) {
                grid-column: 1;
            }

            .education-skills-section .item:nth-child(4) {
                grid-column: 2;
                grid-row: 1;
            }

            .education-skills-section .item:nth-child(5) {
                grid-column: 2;
                grid-row: 2;
            }

            .education-skills-section .item:nth-child(6) {
                grid-column: 2;
                grid-row: 3;
            }

            .section-title {
                font-family: var(--font-primary);
                font-size: 1.5em;
                font-weight: 500;
                color: var(--color-primary);
                margin-top: 10px;
                border-bottom: 1px solid var(--color-border);
                padding-bottom: 8px;
                text-align: center;
                align-self: center;
            }

            .item {
                background: rgba(255, 255, 255, 0.0);
                border: 1px solid var(--color-border);
                border-radius: 0;
                padding: 25px;
                backdrop-filter: blur(10px);
            }

            .item:hover {
                border: 1px solid #fff;
            }



            .item {
                font-size: 1.0em;
            }

            .item-title {
                font-weight: 700;
                font-size: 1.3em;
                color: var(--color-primary);
                margin-bottom: 5px;
            }

            .item-header {
                display: flex;
                align-items: center;
                gap: 6px;
                margin-bottom: 5px;
            }

            .item-header .item-title,
            .item-header .item-techstack {
                margin-bottom: 0;
            }

            .item-details {
                color: var(--color-muted);
                margin-bottom: 5px;
            }

            .item-date {
                font-family: var(--font-primary);
                color: var(--color-subtle);
                font-style: italic;
                margin-bottom: 5px;
            }

            .item-description {
                color: var(--color-text);
                line-height: 1.6;
                font-size: 1em;
            }

            .skills-list {
                color: var(--color-text);
                font-size: 1em;
                line-height: 1.7;
            }

            .contact-section {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 20px;
                margin-top: 3rem;
                margin-bottom: 2rem;
            }

            .contact-header {
                margin-bottom: 10px;
            }

            .contact-title {
                font-family: var(--font-primary);
                font-size: 1.2em;
                font-weight: 600;
                color: var(--color-primary);
                text-align: center;
                text-decoration: underline;
                text-decoration-color: var(--color-primary);
                text-decoration-thickness: 3px;
                text-underline-offset: 4px;
            }

            .contact-items {
                display: flex;
                justify-content: center;
                gap: 40px;
            }

            .contact-item {
                display: flex;
                align-items: center;
                gap: 8px;
                font-family: var(--font-primary);
                color: var(--color-text);
            }

            .contact-label {
                font-weight: 600;
                color: var(--color-primary);
            }

            .contact-value {
                color: var(--color-text);
            }

            .contact-link {
                text-decoration: none;
                color: var(--color-text);
            }

            .contact-value:hover  {
                color: var(--color-primary);
            }

            .contact-status-text {
                font-family: var(--font-secondary);
                font-size: 0.85em;
                color: #43b581;
                font-weight: 600;
                margin: 0px;
                padding: 2px 8px 5px 8px;
                background: rgba(53, 53, 53, 0.1);
                border: 1px solid rgba(134, 134, 134, 0.3);
            }

            .contact-note {
                font-size: 0.9em;
                color: var(--color-muted);
                font-style: italic;
            }

            .footer {
                font-family: var(--font-primary);
                text-align: center;
                font-size: 0.8rem;
                color: var(--color-subtle);
                margin-top: 5rem;
            }

            .footer .hindi {
                font-family: var(--font-sans);
                font-weight: 400;
                font-size: 0.94em;
            }

            .item-row {
                display: flex;
                gap: 0.40rem;
            }

            .item-amount {
                font-weight: 700;
                color: var(--color-primary);
            }

            .project-link {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 24px;
                height: 32px;
                text-decoration: none;
                color: var(--color-subtle);
                font-size: 1.2em;
            }

            .github-link {
                color: var(--color-subtle);
            }

            .github-link:hover {
                color: var(--color-primary);
            }

            .banned-link {
                color: var(--color-subtle);
                cursor: not-allowed;
            }

            .banned-link:hover {
                color: var(--color-muted);
            }

            .cryptonite-link {
                position: relative;
                animation: glow 2s ease-in-out infinite;
                font-family: 'Fragment Mono', monospace;
                text-decoration: none;
            }

            .cryptonite-link:hover {
                animation: glitch 2s infinite;
            }

            @keyframes glow {
                0%, 100% {
                    color: #00ff33;
                    text-shadow: 0 0 0px #00ff33;
                }
                50% {
                    color: #00ff33;
                    text-shadow: 0 0 2px #00ff33;
                }
            }

            @keyframes glitch {
                0% {
                    transform: translate(0);
                    color: #00ff33;
                    text-shadow: 0 0 1px #00ff33;
                }
                20% {
                    transform: translate(-2px, 2px);
                    color: #ff0033;
                    text-shadow: 2px 0 0 #ff0033, -2px 0 0 #0033ff;
                }
                40% {
                    transform: translate(2px, -2px);
                    color: #0033ff;
                    text-shadow: -2px 0 0 #ff0033, 2px 0 0 #0033ff;
                }
                60% {
                    transform: translate(-2px, -2px);
                    color: #00ff33;
                    text-shadow: 2px 0 0 #ff0033, -2px 0 0 #0033ff;
                }
                80% {
                    transform: translate(2px, 2px);
                    color: #ff0033;
                    text-shadow: -2px 0 0 #ff0033, 2px 0 0 #0033ff;
                }
                100% {
                    transform: translate(0);
                    color: #00ff33;
                    text-shadow: 0 0 1px #00ff33;
                }
            }

            .c4gt-link {
                color: #fff;
                text-decoration: none;
                background-color: #284395;
                font-weight: 600;
                border: 1px solid transparent;
            }

            .c4gt-link:hover {
                color: #fff;
                border: 1px dashed #fff;
                background-color: #fe6800;
            }

            .dhwani-link {
                color: #ff6600;
                text-decoration: none;
                font-weight: 600;
            }

            .dhwani-link:hover {
                color: #ff8533;
            }

            .ctf-rank-link {
                color: #f0f0f0;
                text-decoration: none;
                font-weight: 600;
            }

            .ctf-rank-link:hover {
                color: #ffffff;
            }

            .c4gt-repo-link {
                color: var(--color-muted);
                text-decoration: none;
                font-weight: 500;
            }

            .c4gt-repo-link:hover {
                color: var(--color-primary);
            }

            .item-repo {
                margin-top: 8px;
            }

            .repo-link {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                color: var(--color-muted);
                text-decoration: none;
                font-size: 0.9em;
                font-weight: 500;
            }

            .repo-link:hover {
                color: var(--color-primary);
            }

            .repo-link i {
                font-size: 1em;
            }

            .item-link {
                margin-top: 6px;
            }

            .achievement-link {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                color: var(--color-muted);
                text-decoration: none;
                font-size: 0.85em;
                font-weight: 500;
            }

            .achievement-link i {
                font-size: 1em;
            }

            /* Achievement links in titles should look like regular titles */
            .item-title .achievement-link {
                color: var(--color-primary);
                font-weight: 700;
                font-size: inherit;
                text-decoration: none;
            }

            @media (max-width: 768px) {
                body {
                    padding: 40px 20px;
                }

                .center-logo {
                    display: none;
                }

                .header {
                    gap: 30px;
                    text-align: center;
                    min-height: auto;
                    margin-top: 0;
                }

                .header-main {
                    flex-direction: column;
                    gap: 30px;
                    align-items: center;
                }

                .blog-link-mobile {
                    display: block;
                    margin-bottom: 20px;
                }

                .blog-link-mobile .blog-link {
                    display: inline-block;
                    padding: 12px 24px;
                    background: rgba(255, 255, 255, 0.05);
                    border: 1px solid var(--color-border);
                    border-radius: 8px;
                    color: var(--color-primary);
                    text-decoration: none;
                    font-family: var(--font-primary);
                    font-size: 1.1em;
                    font-weight: 600;
                }

                .blog-link-mobile .blog-link:hover {
                    background: rgba(255, 255, 255, 0.1);
                    border-color: var(--color-primary);
                }

                .blog-link-mobile .blog-link::after {
                    display: none;
                }

                .links {
                    align-items: center;
                    margin-left: 0;
                    flex-shrink: 0;
                    flex-direction: row !important;
                    gap: 20px;
                    border: none;
                    padding: 5px;
                }

                .github-contributions {
                    display: none;
                }

                .content {
                    gap: 20px;
                    max-width: 100%;
                }

                .section {
                    gap: 15px;
                }

                .section:not(.education-skills-section) {
                    grid-template-columns: 1fr;
                }

                .item {
                    padding: 20px;
                    border-radius: 0;
                }



                .name {
                    font-size: 2em;
                }

                .contact-section {
                    margin-top: 2rem;
                    margin-bottom: 1rem;
                }

                .contact-items {
                    flex-direction: column;
                    gap: 15px;
                }

                .contact-item {
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                    gap: 8px;
                    text-align: center;
                    flex-wrap: wrap;
                }

                .contact-title {
                    font-size: 1.1em;
                    text-decoration-thickness: 2px;
                    text-underline-offset: 3px;
                }

                .contact-status-text {
                    font-size: 0.8em;
                    padding: 1px 6px;
                    margin-left: 0;
                    margin-top: 4px;
                }
            }

            * {
                scrollbar-width: auto;
                scrollbar-color: #262626 #201a1b0a;
            }

            *::-webkit-scrollbar {
                width: 16px;
            }

            *::-webkit-scrollbar-track {
                background: #201a1b0a;
            }

            *::-webkit-scrollbar-thumb {
                background-color: #262626;
                border-radius: 10px;
                border: 3px solid #201a1b0a;
            }

            *::-webkit-scrollbar-thumb:hover {
                background-color: #262626;
            }

            ::selection {
                background-color: #262626 !important;
                color: #f5f5f5 !important;
            }

            .ctf-rank-link .ctftime-logo {
              filter: grayscale(1);
            }
            .ctf-rank-link:hover .ctftime-logo {
              filter: none;
            }