/* Base Styles */ body { background-color: #121212; /* Dark background */ color: #00ff00; /* Green text */ font-family: 'Comics-Sans', Courier, monospace; /* Monospace font */ margin: 0; padding: 0; line-height: 1.6; text-shadow: 0 0 2px; } /* Trampoline effect for the body when it has the specified classes */ body.show-menu.theme-dark.tab-system.disable-error { animation: trampoline 1s ease-out; /* Apply trampoline effect */ } /* Trampoline animation */ @keyframes trampoline { 0% { transform: scale(1); } 25% { transform: scale(1.1); /* Slightly scale up */ } 50% { transform: scale(0.9); /* Slightly scale down */ } 75% { transform: scale(1.05); /* Slight bounce back */ } 100% { transform: scale(1); /* Return to original size */ } } /* Header */ header { background-color: #0a0a0a; /* Dark background */ color: #00ff00; /* Green text */ text-align: center; padding: 10px 20px; font-size: 20px; text-transform: uppercase; letter-spacing: 2px; border-bottom: 1px solid #00ff00; /* Green border */ animation: fadeIn 2s ease-out; } /* Navigation */ nav a { color: #00ff00; /* Green */ text-decoration: none; margin: 0 20px; font-size: 18px; font-weight: bold; letter-spacing: 1px; transition: color 0.3s ease, transform 0.3s ease; } nav a:hover { color: #ff007f; /* Pink hover effect */ text-decoration: underline; transform: scale(1.1); } /* Buttons with animations */ button { background-color: #00ff00; /* Green */ color: #000000; /* Black text */ border: 2px solid #00ff00; padding: 10px 20px; border-radius: 5px; font-size: 16px; cursor: pointer; box-shadow: 0 0 10px rgba(0, 255, 0, 0.8); /* Green glow */ transition: transform 0.3s ease, background-color 0.3s ease; } button:hover { background-color: #ff007f; /* Pink on hover */ color: #000000; border: 2px solid #ff007f; box-shadow: 0 0 15px rgba(255, 0, 127, 0.8); /* Pink glow */ transform: scale(1.1); }