/* --- WEBSITE THEMES --- To set a theme for the website, add the corresponding class to the tag in both index.html and media.html. Example: Available themes: - theme-dark (default, solarized dark) - theme-christmas - theme-ufo */ /* Default Theme (theme-dark) */ :root { --bg-color: #073642; --text-color: #eee8d5; --link-hover-color: #ffffff; --border-color: #586e75; --lightbox-bg-color: rgba(0, 0, 0, 0.8); --snowflake-color: #fff; --snowflake-shadow: #000; } html.theme-christmas { --bg-color: #1a4f1a; /* Forest Green */ --text-color: #f5f5f5; --link-hover-color: #ffd700; /* Gold */ --border-color: #c41e3a; /* Christmas Red */ --lightbox-bg-color: rgba(69, 19, 29, 0.8); --snowflake-color: #fff; --snowflake-shadow: #c41e3a; } html.theme-ufo { --bg-color: #0c0c14; /* Deep Space */ --text-color: #00ff00; /* Green Alien Text */ --link-hover-color: #ff00ff; /* Magenta Warp */ --border-color: #00ffff; /* Cyan Grid */ --lightbox-bg-color: rgba(0, 255, 0, 0.8); } body { background-color: var(--bg-color); color: var(--text-color); font-family: Arial, sans-serif; position: relative; overflow-x: hidden; transition: background-color 0.3s, color 0.3s; } header { background-color: var(--bg-color); color: var(--text-color); padding: 10px; text-align: center; width: 100%; } nav ul { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; align-items: center; } nav ul li { margin: 0 10px; } nav ul a { color: var(--text-color); text-decoration: none; } nav ul a:hover { color: var(--link-hover-color); text-decoration: underline; } .content { max-width: 800px; margin: 0 auto; padding: 0 20px; } .media-section { text-align: center; margin: 20px 0; } .feature-list { margin: 15px 0; } a { color: var(--text-color); text-decoration: none; } a:hover { color: var(--link-hover-color); text-decoration: underline; } .gallery img { max-width: 200px; height: auto; margin: 5px; cursor: pointer; border: 1px solid var(--border-color); } #lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--lightbox-bg-color); justify-content: center; align-items: center; z-index: 1000; } #lightbox-img { max-width: 90%; max-height: 90%; } #close-lightbox { color: var(--text-color); position: absolute; top: 20px; right: 20px; cursor: pointer; font-size: 24px; } #prev, #next { color: var(--text-color); position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; font-size: 30px; } #prev { left: 20px; } #next { right: 20px; } /* --- THEME ANIMATIONS --- */ .star, .snowflake, .ufo { position: fixed; pointer-events: none; z-index: 9999; will-change: transform, opacity; } /* Christmas/Dark Theme Animations */ .star { top: 0; left: 0; width: 2px; height: 2px; background-color: white; border-radius: 50%; box-shadow: 0 0 6px #fff, 0 0 10px #fff, 0 0 15px #0ff; animation: twinkle 2s infinite ease-in-out alternate; } @keyframes twinkle { from { opacity: 0.1; } to { opacity: 0.9; } } .snowflake { top: -20px; left: 0; color: var(--snowflake-color); text-shadow: 0 0 5px var(--snowflake-shadow); font-size: 20px; animation: fall linear infinite; } @keyframes fall { 100% { transform: translateY(105vh) rotate(360deg); opacity: 0; } } /* UFO Theme Animations */ .ufo { left: 0; animation: fly-across linear; /* duration set by JS */ } .ufo > div { /* The child element for wobbling */ animation: ufo-wobble 0.7s infinite ease-in-out alternate; } .ufo-emoji { font-size: 25px; text-shadow: 0 0 15px var(--text-color); } .ufo-ship { width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 30px solid var(--text-color); filter: drop-shadow(0 0 8px var(--link-hover-color)); } @keyframes fly-across { from { transform: translateX(-150px); } to { transform: translateX(110vw); } } @keyframes ufo-wobble { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }