/* Shared styles for all pages */ :root { --bg-primary: #ffffff; --text-primary: #000000; --text-secondary: #666666; --border: #e0e0e0; --shadow: rgba(0, 0, 0, 0.1); } [data-theme="dark"] { --bg-primary: #000000; --text-primary: #ffffff; --text-secondary: #cccccc; --border: #333333; --shadow: rgba(255, 255, 255, 0.1); } * { margin: 0; padding: 0; box-sizing: border-box; } html { overflow-x: hidden; width: 100%; overscroll-behavior-x: none; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: var(--text-primary); background-color: var(--bg-primary); transition: all 0.3s ease; width: 100vw; max-width: 100vw; overflow-y: auto; overflow-x: hidden; overscroll-behavior-x: none; } /* Unified Glass Button Styles */ .theme-toggle, .gender-toggle, .lang-toggle { position: fixed; top: 20px; z-index: 9998; width: 48px; height: 48px; border-radius: 50%; padding: 0; /* Liquid Glass Effect */ background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.4); color: var(--text-primary); cursor: pointer; font-size: 1rem; font-weight: bold; font-family: 'Arial', 'Helvetica', sans-serif; display: flex; align-items: center; justify-content: center; line-height: 1; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Dark Mode Glass Adjustments */ [data-theme="dark"] .theme-toggle, [data-theme="dark"] .gender-toggle, [data-theme="dark"] .lang-toggle { background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); } /* Hover State */ .theme-toggle:hover, .gender-toggle:hover, .lang-toggle:hover { transform: translateY(-2px) scale(1.05); background: rgba(255, 255, 255, 0.25); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.2); } [data-theme="dark"] .theme-toggle:hover, [data-theme="dark"] .gender-toggle:hover, [data-theme="dark"] .lang-toggle:hover { background: rgba(255, 255, 255, 0.1); } /* Positioning */ .theme-toggle { right: 20px; } .gender-toggle { right: 80px; /* 20 + 48 + 12 gap */ } .lang-toggle { right: 140px; /* 80 + 48 + 12 gap */ } .theme-toggle.dragging { cursor: grabbing; z-index: 10000; } /* Acid Mode */ @keyframes acidTrip { 0% { background: radial-gradient(circle at 30% 40%, #ff0066 0%, #ff00ff 25%, #6600ff 50%, transparent 70%), radial-gradient(circle at 70% 60%, #00ffff 0%, #0099ff 25%, transparent 60%), radial-gradient(circle at 50% 80%, #ffff00 0%, #ff6600 30%, transparent 65%), #ff0066; } 20% { background: radial-gradient(circle at 60% 50%, #00ff00 0%, #88ff00 25%, #ffff00 50%, transparent 70%), radial-gradient(circle at 20% 70%, #ff00ff 0%, #ff0088 25%, transparent 60%), radial-gradient(circle at 80% 30%, #00ffff 0%, #0066ff 30%, transparent 65%), #00ff88; } 40% { background: radial-gradient(circle at 40% 60%, #ffff00 0%, #ffaa00 25%, #ff6600 50%, transparent 70%), radial-gradient(circle at 80% 40%, #ff00ff 0%, #ff0066 25%, transparent 60%), radial-gradient(circle at 30% 20%, #00ff99 0%, #00ffff 30%, transparent 65%), #ff8800; } 60% { background: radial-gradient(circle at 70% 30%, #0099ff 0%, #00ffff 25%, #00ff88 50%, transparent 70%), radial-gradient(circle at 30% 70%, #ffff00 0%, #aaff00 25%, transparent 60%), radial-gradient(circle at 50% 50%, #ff00ff 0%, #ff0099 30%, transparent 65%), #00ccff; } 80% { background: radial-gradient(circle at 50% 40%, #ff00ff 0%, #aa00ff 25%, #6600ff 50%, transparent 70%), radial-gradient(circle at 80% 80%, #00ff00 0%, #66ff00 25%, transparent 60%), radial-gradient(circle at 20% 30%, #ff6600 0%, #ffaa00 30%, transparent 65%), #cc00ff; } 100% { background: radial-gradient(circle at 30% 40%, #ff0066 0%, #ff00ff 25%, #6600ff 50%, transparent 70%), radial-gradient(circle at 70% 60%, #00ffff 0%, #0099ff 25%, transparent 60%), radial-gradient(circle at 50% 80%, #ffff00 0%, #ff6600 30%, transparent 65%), #ff0066; } } @keyframes blink { 0%, 85% { opacity: 1; } 86%, 88% { opacity: 0; } 89%, 90% { opacity: 1; } 91%, 92% { opacity: 0; } 93%, 100% { opacity: 1; } } @keyframes faceGrow { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 41% { transform: scale(1.4); } 100% { transform: scale(1.4); } } @keyframes explodeLeft { 0% { transform: scale(1.4) translate(0, 0) rotate(0deg); opacity: 1; } 100% { transform: scale(0.5) translate(-200vw, -150vh) rotate(-720deg); opacity: 0; } } @keyframes explodeRight { 0% { transform: scale(1.4) translate(0, 0) rotate(0deg); opacity: 1; } 100% { transform: scale(0.5) translate(200vw, -150vh) rotate(720deg); opacity: 0; } } @keyframes explodeDown { 0% { transform: scale(1.4) translate(0, 0) rotate(0deg); opacity: 1; } 100% { transform: scale(0.5) translate(0, 200vh) rotate(360deg); opacity: 0; } } body.acid-mode { animation: acidTrip 3s linear infinite !important; --bg-primary: transparent !important; } body.acid-mode .special-oo, body.acid-mode .special-u, body.acid-mode .special-middle { animation: faceGrow 10s ease-in-out forwards !important; z-index: 100; } body.acid-mode .special-oo.exploded:nth-of-type(2), body.acid-mode .special-u.exploded, body.acid-mode .special-middle.exploded { animation: explodeLeft 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards !important; } body.acid-mode .special-oo.exploded:nth-of-type(3) { animation: explodeRight 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards !important; } body.acid-mode .special-oo.exploded:first-of-type { animation: explodeDown 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards !important; } .interactive-letter.special-oo.dragging, .interactive-letter.special-u.dragging, .interactive-letter.special-middle.dragging { animation: none !important; transform: none !important; will-change: transform; } .logo { font-family: 'Courier New', monospace; font-weight: bold; font-size: 2.5rem; margin-bottom: 0.5rem; } .subtitle { color: var(--text-secondary); font-size: 1rem; }