#static-overlay {
            position: fixed;
            inset: 0;
            z-index: 1;
            background-image: url('/assets/static.gif');
            background-size: 90px 90px;
            background-repeat: repeat;
            opacity: 0.12;
            pointer-events: none;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url('/assets/greeksunglasses.png');
            background-size: 84vh;
            background-repeat: no-repeat;
            background-position: center;
            background-position-y: 15%;
            opacity: 0.6;
            z-index: -1;
        }

        .fade-transition {
            transition: opacity 0.5s ease-in-out;
        }

        .fade-out {
            opacity: 0;
        }

        .fade-in {
            opacity: 1;
        }

        @keyframes signature-draw {
            to {
                stroke-dashoffset: 493;
            }
        }

        .max-w-screen-3xl {
            transition: all 0.4s ease;
            padding: 16px 24px 8px 24px;
            position: relative;
        }

        .max-w-screen-3xl::before {
            content: '';
            position: absolute;
            top: 50%;
            left: calc(-50vw + 50%);
            width: 100vw;
            height: 0px;
            background: rgba(255, 255, 255, 0.02);
            backdrop-filter: blur(5px);
            transition: all 0.8s ease;
            z-index: -1;
            transform: translateY(-50%);
        }

        nav:has(.nav-link:hover) .max-w-screen-3xl::before {
            height: 100%;
            /* Expand to full height */
            box-shadow: 0 4px 25px rgba(0, 0, 0, 0.04);
        }

        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: left;
        }

        .nav-number {
            font-size: 0.75rem;
            color: #a8afbb;
            line-height: 1;
            margin-bottom: 0px;
            transition: all 0.4s ease;
        }

        .nav-link:hover .nav-number {
            opacity: 0.6;
            transform: scale(0.9) translateY(-2px);
        }

        .nav-text-container {
            display: inline-block;
            overflow: hidden;
            position: relative;
            font-size: 0.875rem;
        }

        .nav-text {
            display: inline-block;
            position: relative;
        }

        .nav-text .letter {
            display: inline-block;
            transition: transform 0.3s ease-out;
            position: relative;
        }

        .nav-text .letter::after {
            content: attr(data-letter);
            position: absolute;
            top: 100%;
            left: 0;
        }

        .nav-link:hover .nav-text .letter {
            transform: translateY(-100%);
        }

        @keyframes glitch {
            0% {
                transform: none;
                text-shadow: none;
            }
            20% {
                transform: translateX(-1px) rotate(-0.3deg);
                text-shadow: 1px 0 red;
            }
            40% {
                transform: translateX(1.5px) skewX(5deg);
                text-shadow: -1px 0 cyan;
            }
            60% {
                transform: translateX(-0.5px) skewX(-2deg);
                text-shadow: 1px 0 magenta;
            }
            80% {
                transform: translateX(0.8px);
                text-shadow: -1px 0 lime;
            }
            100% {
                transform: none;
                text-shadow: none;
            }
        }

        #clock.glitching {
            animation: glitch 0.5s linear;
        }

        .branch-canvas {
            mask-image: radial-gradient(circle, transparent, black);
            -webkit-mask-image: radial-gradient(circle, transparent, black);
            z-index: -1;
        }

        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

         :root {
            --primary: rgb(243, 243, 243);
            --secondary: rgb(225, 225, 225);
            --tertiary: rgb(180, 180, 180);
        }

        *::-webkit-scrollbar {
            /* width of scoll background */
            width: 16px;
        }

        *::-webkit-scrollbar-track {
            /* scroll background */
            background: var(--primary)
        }

        *::-webkit-scrollbar-thumb {
            /* scroller */
            background: var(--secondary);
            border-radius: 8px;
            border-top: 4px solid var(--primary);
            border-bottom: 4px solid var(--primary);
            border-left: 4px solid var(--primary);
            border-right: 4px solid var(--primary);
        }

        *::-webkit-scrollbar-thumb:hover {
            background: var(--tertiary);
        }

        * {
            scroll-behavior: smooth
        }

        .specialtext {
            -webkit-text-fill-color: transparent;
            -webkit-text-stroke-width: 1px;
            -webkit-text-stroke-color: rgba(0, 0, 0, 0.5)
        }

        .dictionary-card {
            transform: rotate(6deg);
            transition: transform 0.1s ease-out;
            will-change: transform;
        }

        body {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }