/* Using html here ensures the gradient covers the full viewport height */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(oklch(38.091% 0.15632 29.223) 10%, oklch(16.346% 0.06708 29.223));
    color: white;
    font-family: 'Cantata One', serif;
    overflow: hidden; /* Prevents scrollbars during zoom animation */
}

div#root {
    /* the swirl of the root */
    opacity: 0;
    transform: scale(0.85);
    animation: fadeInPage 2.5s ease-out 0.1s forwards;
    

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-align: center;
}

div#main {
    display: none; 
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.6));
    padding: 10px;
}

/* Beautiful Drop Shadows for text */
h1, h2, #counter {
    text-shadow: 2px 4px 10px rgba(0, 0, 0, 0.5), 
                 0px 0px 20px oklch(38.091% 0.15632 29.223 / 0.5);
    margin: 10px 0; /* Tightens up the vertical spacing */
}

#counter b {
    color: #ffd7d7; /* Slightly lighter red/pink flavor for numbers */
    margin: 0 2px;
}

@keyframes fadeInPage {
    from {
        opacity: 0;
        transform: scale(0.90);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

#jsnag {
    margin: 0;
}

/* Animation for the shifting glow */
@keyframes glowPink {
    0% {
        text-shadow: 2px 4px 10px rgba(0, 0, 0, 0.5), 0px 0px 10px rgba(255, 255, 255, 0.5);
        color: white;
    }
    50% {
        /* Vibrant Pink Glow */
        text-shadow: 0px 0px 25px oklch(70% 0.25 340), 0px 0px 40px oklch(60% 0.2 340);
        color: oklch(90% 0.1 340); /* Very light pinkish-white */
    }
    100% {
        text-shadow: 2px 4px 10px rgba(0, 0, 0, 0.5), 0px 0px 10px rgba(255, 255, 255, 0.5);
        color: white;
    }
}


.released-glow {
    animation: glowPink 3s ease-in-out infinite;
}

a {
    color: inherit;
    text-decoration: none;
    transition: text-shadow 0.3s ease-in-out, color 0.3s ease-in-out;
}

a:hover {
    color: #fff;
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px oklch(70% 0.25 340), 2px 2px 2px rgba(255, 255, 255, 0.7);
    cursor: pointer;
}

a:visited {
    color: inherit;
}