@import url('https://fonts.googleapis.com/css2?family=Moirai+One&display=swap');
#homepage  {
            padding: 7px 5px;
            background-color: var(--background);
            color: var(--branding);
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            overflow:hidden;
            top: 0;
            max-height:50px;
            min-height:50px;
            z-index: 1100;
            backdrop-filter: blur(8px);
        }
        
          .logo {
            font-size: 0.8rem;
            font-family: 'Moirai One', serif;
            font-weight: bold;
            display: flex;
            align-items: center;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .logo:hover {
            transform: scale(1.02);
             font-size: 0.8rem;
             transform:rotate(11deg);
        }
        
        .logo-text {
            font-weight:bold;
            -webkit-background-clip: text;
            font-size:1.3rem;
            background-clip: text;
        }
        
        .logo-x {
            font-size: 1.6rem;
            animation: color-change 8s infinite;
            transform-origin: center;
             transform:rotate(-7deg);
        }
        
        .nav-controls {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .nav-controls a {
            text-decoration:underline;
            color:var(--branding);
            font-size:0.65rem;
        }
        
        .nav-controls a:hover {
            text-decoration:none;
            color:var(--branding);
        }
        
        .nav-arrow {
            cursor: pointer;
            transition: all 0.3s ease;
            padding: 1px;
            border-radius: 50%;
        }
        
        .nav-arrow:hover {
            background: rgba(13, 210, 250, 0.3);
            transform: scale(1.1);
        }
        
        .auth-section {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
         .menu-icon {
        cursor: pointer;
        font-size: 1.8rem;
        color: var(--light-text);
        transform:rotate(-14deg)
    }
        
       
        
        @keyframes shake-that-ass {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-1px); }
    50% { transform: translateX(2px); }
    75% { transform: translateX(-3px); }
}
        
         /* Auth Buttons */
    .auth-btn {
        padding: 0.3rem 0.6rem;
        border-radius: 5px;
        font-weight: bold;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.9rem;
        animation: shake-that-ass 0.9s infinite;
        transform:rotate(-7deg)
    }
    
    .logout-btn {
        background:transparent;
        border:1px solid var(--simple-color);
        color: var(--light-text);
    }
    
    .signup-btn {
        background: var(--branding);
        color: var(--background);
        border: none;
    }
    
     .signup-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 255, 224, 0.4);
        }
        
        .logout-btn:hover {
            color: #ff5555;
            background:transparent;
            border:1px dashed #ff5555;
        }
        
       @keyframes color-change {
            0% { color: #E0FFFF; }
            14% { color: #aeff00; }
            28% { color: #00ffdd; }
            42% { color: #ffd500; }
            56% { color: #88ff00; }
            70% { color: #0000000; }
            84% { color: #b3ff00; }
            100% { color: #00ffae; }
        }