body {
    background: black;
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    font-family: Arial, sans-serif;
}

/* TOP NAVIGATION BAR */
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;

    /* HEIGHT SET TO 75px */
    height: 75px;

    background: rgba(0,0,0,0.85);
    z-index: 1000;
    border-bottom: none;
}

nav a {
    flex: 1;
    text-align: center;

    /* KEEP TEXT WHITE EVEN WHEN PRESSED */
    color: white;

    text-decoration: none;
    font-size: 26vw;
    position: relative;

    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    transition: transform 0.08s ease-out;
}

/* NORMAL BOX (gradient bottom dark → top fade) */
nav a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: linear-gradient(
        to top,
        rgba(255,255,255,0.20) 0%,
        rgba(255,255,255,0.05) 100%
    );

    border: 2px solid rgba(255,255,255,0.25);
    border-radius: 10px;
    z-index: -1;

    transition: background 0.08s ease-out, border-color 0.08s ease-out, box-shadow 0.08s ease-out;
}

/* PRESSED / ACTIVE STATE — FULL WHITE, NO BLACK */
nav a:active {
    transform: scale(0.97);

    /* FORCE TEXT TO STAY WHITE */
    color: white;
}

nav a:active::before {
    background: rgba(255,255,255,0.98);
    border-color: rgba(255,255,255,1.0);
    box-shadow: inset 0 0 18px rgba(0,0,0,0.45);
}

/* DESKTOP NAV SIZE */
@media (min-width: 800px) {
    nav a {
        font-size: 2.4rem;
    }
}

/* MAIN TEXT CONTAINER */
.container {
    position: relative;
    text-align: center;

    margin-top: 75px;

    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* SOFT DRIFTING GLOW BEHIND TEXT */
.container::before {
    content: "";
    position: absolute;
    width: 900px;
    height: 900px;
    background: radial-gradient(circle, rgba(255,255,255,0.25), transparent 70%);
    filter: blur(50px);
    z-index: -1;
    animation: driftGlow 12s ease-in-out infinite alternate;
}

@keyframes driftGlow {
    0%   { transform: translateX(-150px); }
    100% { transform: translateX(150px); }
}

/* MAIN HEADING */
h1 {
    font-size: 32vw;
    line-height: 1.1;
}

@media (min-width: 800px) {
    h1 {
        font-size: 8rem;
    }
}