:root {
    --cyan: #00f2ff;
    --dark-bg: #0a0b10;
}

body {
    background: var(--dark-bg);
    font-family: 'Roboto', sans-serif;
    overflow: hidden;
    margin: 0;
}

h1, .time-box span {
    font-family: 'Orbitron', sans-serif;
}

.text-cyan { color: var(--cyan); }
.border-cyan { border-color: var(--cyan) !important; }
.btn-cyan { 
    background-color: var(--cyan); 
    color: var(--dark-bg); 
    font-weight: bold; 
}

/* Background Animation */
body::before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 48%, var(--cyan) 50%, transparent 52%);
    background-size: 60px 60px;
    opacity: 0.05;
    animation: move-bg 10s linear infinite;
    z-index: -1;
}

@keyframes move-bg {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-45%, -45%) rotate(5deg); }
}

/* Countdown Styling */
.time-box {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(0, 242, 255, 0.2);
    min-width: 80px;
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.1);
}

.time-box span {
    font-size: 2.5rem;
    display: block;
    color: var(--cyan);
    text-shadow: 0 0 10px var(--cyan);
}

/* Animations */
.animate-fade-in { animation: fadeIn 2s ease-in; }
.animate-slide-up { animation: slideUp 1.5s ease-out; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { 
    from { opacity: 0; transform: translateY(30px); } 
    to { opacity: 1; transform: translateY(0); } 
}