:root {
    --h242-black: #090909;
    --h242-aqua: #25f4e8;
    --h242-gold: #f6c453;
    --h242-beige: #f6f0e6;
    --h242-card: #ffffff;
    --h242-text: #111111;
}

body {
    margin: 0;
    background: var(--h242-beige);
    color: var(--h242-text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.h242-header,
.h242-footer {
    background: var(--h242-black);
    color: white;
}

.h242-logo,
.small-logo {
    font-weight: 900;
    letter-spacing: 0.08em;
    color: var(--h242-aqua);
    text-shadow:
        0 0 5px var(--h242-aqua),
        0 0 15px rgba(37, 244, 232, 0.7),
        0 0 30px rgba(37, 244, 232, 0.35);
}

.h242-logo {
    font-size: clamp(2rem, 5vw, 4rem);
}

.small-logo {
    font-size: 1.1rem;
}

.flicker {
    animation: flickerOn 1.8s ease-in-out both;
}

@keyframes flickerOn {
    0%, 8%, 14%, 20% {
        opacity: 0.2;
        text-shadow: none;
    }
    10%, 16%, 24%, 100% {
        opacity: 1;
    }
}

.h242-logo:hover {
    animation: hoverFlicker 0.55s linear;
}

@keyframes hoverFlicker {
    0%, 100% { opacity: 1; }
    35% { opacity: 0.65; }
    55% { opacity: 1; }
    75% { opacity: 0.8; }
}

.h242-page {
    min-height: calc(100vh - 170px);
}

.h242-badge {
    background: var(--h242-black);
    color: var(--h242-gold);
    border: 1px solid rgba(246, 196, 83, 0.5);
    padding: 0.6rem 0.9rem;
    border-radius: 999px;
}

.h242-countdown {
    background: var(--h242-black);
    color: white;
    border-left: 5px solid var(--h242-aqua);
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    font-size: 1.25rem;
}

.h242-countdown strong {
    color: var(--h242-gold);
}

.counter-card,
.submission-card {
    background: var(--h242-card);
    border-radius: 1.25rem;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

.counter-card {
    padding: 1rem;
    text-align: center;
}

.counter-card strong {
    display: block;
    font-size: 1.8rem;
    color: var(--h242-black);
}

.counter-card span {
    font-size: 0.85rem;
    color: #555;
}

.submission-card {
    padding: 1.5rem;
}

.h242-btn {
    background: var(--h242-black);
    color: var(--h242-aqua);
    border: 1px solid var(--h242-aqua);
    font-weight: 800;
    letter-spacing: 0.03em;
}

.h242-btn:hover {
    background: var(--h242-aqua);
    color: var(--h242-black);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-links a {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    font-size: 0.9rem;
}

.footer-links a:hover {
    color: var(--h242-aqua);
}