@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: 1.8rem; font-family: 'Original Surfer', cursive, sans-serif; font-weight: bold; display: flex; align-items: center; letter-spacing: 0.5px; cursor: pointer; transition: all 0.3s ease; background: var(--g-branding); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } .logo:hover { font-size: 0.8rem; transform:rotate(11deg); } .logo-text { font-weight:bold; -webkit-background-clip: text; font-size:1.3rem; background-clip: text; } .logo-btc { font-weight:bold; -webkit-background-clip: text; font-size:1.8rem; background-clip: text; } .logo-x { font-size: 2rem; } .logo-t { font-size: 10px; font-weight:400px; margin-right:15px; } .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(1px); } 75% { transform: translateX(-1px); } } .auth-btn { padding: 0.3rem 0.7rem; border-radius: 20px; font-weight: bold; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; animation: shake-that-ass 1.1s 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: #000000; } 42% { color: #000000; } 56% { color: #88ff00; } 70% { color: #0000000; } 84% { color: #b3ff00; } 100% { color: #000000; } }