MOTHIVERSE

/* General */ body { margin: 0; padding: 0; background: #000; color: #eee; font-family: Arial, sans-serif; overflow-x: hidden; } /* Header */ header { text-align: center; padding: 30px 0 10px; } header h1 { font-family: 'Cinzel Decorative', cursive; font-size: 48px; color: #d9c9ff; text-shadow: 0 0 10px #6a00ff; } /* Navigation */ nav { position: fixed; top: 100px; left: 0; } nav ul { list-style: none; margin: 0; padding: 0; } nav li { margin: 10px 0; } nav a { display: block; width: 160px; padding: 10px; background: #222; color: #eee; text-decoration: none; border-radius: 0 8px 8px 0; transform: translateX(-120px); transition: transform 0.3s, background 0.3s; } nav a:hover { transform: translateX(0); background: #444; color: #fff; box-shadow: 0 0 10px #b966ff; } /* Fireflies */ .firefly { position: absolute; width: 4px; height: 4px; background: #ffff99; border-radius: 50%; animation: flicker 3s infinite ease-in-out; } .firefly:nth-child(1) { top: 20%; left: 30%; } .firefly:nth-child(2) { top: 60%; left: 70%; } .firefly:nth-child(3) { top: 80%; left: 40%; } @keyframes flicker { 0%, 100% { opacity: 0.2; transform: scale(1); } 50% { opacity: 1; transform: scale(1.5); } } /* Moths */ .moth { position: absolute; width: 20px; height: 12px; background: url('https://i.imgur.com/3c1m1D2.png') no-repeat center/contain; animation: flutter 6s infinite ease-in-out; } .moth:nth-child(4) { top: 40%; left: 20%; } .moth:nth-child(5) { top: 70%; left: 80%; } @keyframes flutter { 0% { transform: translateX(0) rotate(0deg); } 25% { transform: translateX(20px) rotate(10deg); } 50% { transform: translateX(0) rotate(0deg); } 75% { transform: translateX(-20px) rotate(-10deg); } 100% { transform: translateX(0) rotate(0deg); } }