:root {
    --primary-color: #3B28CC;
    --secondary-color: #2D2D2A;
}

body {
    margin: 0;
    height: 100dvh;
    width: 100dvw;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 20% 60% 20%;
    align-items: center;
    background-image: radial-gradient(circle, rgb(0, 0, 0), rgb(8, 2, 44));
    overflow: hidden;
}

.startTheGame {
    justify-self: center;
    width: 35%;
    height: 35%;
    border-radius: 50%;
    background-color: var(--primary-color);
    box-shadow: 0 0 5px var(--primary-color), 0 0 15px var(--primary-color), 0 0 25px var(--primary-color), 0 0 100px var(--primary-color);
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 5em;
    text-decoration: none;
    font-family: 'Press Start 2P';
    transition: background-color 1s ease, box-shadow 1s ease, color 1s ease;
    position: fixed;
}

.startTheGame:hover {
    background-color: var(--secondary-color);
    box-shadow: 0 0 5px var(--secondary-color), 0 0 5px var(--secondary-color), 0 0 10px var(--secondary-color), 0 0 25px var(--secondary-color);
    color: var(--primary-color); 
}

.marquee {
    width: 100vw; 
    position: relative;
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}

h1 {
    white-space: nowrap;
    position: absolute;
    animation: scroll 10s linear infinite;
    color: white;
    font-size: 5em;
    text-shadow: 0px 0px 10px var(--primary-color),
                 0px 0px 20px var(--primary-color),
                 0px 0px 30px var(--primary-color),
                 0px 0px 50px var(--primary-color);
}

@keyframes scroll {
    0% {
        transform: translateX(170%);
    }
    100% {
        transform: translateX(-170%);
    }
}

/* 
@keyframes: Questo comando definisce un'animazione CSS e i suoi stadi o "fotogrammi chiave" (da cui il nome "keyframes").

scroll: Questo è il nome dell'animazione, che può essere assegnato a un elemento con animation: scroll 10s linear infinite;. Il nome collega l'animazione all'elemento tramite la proprietà animation.

0% e 100%: Indicano i punti iniziali e finali dell'animazione.

0% rappresenta l'inizio dell'animazione (il primo fotogramma).
100% rappresenta la fine dell'animazione (l'ultimo fotogramma).
Dettaglio delle proprietà:
transform: translateX(100%):

All'inizio (0%), l'elemento è posizionato fuori dalla finestra del browser (a destra), traslando di un valore pari al 100% della sua larghezza rispetto al suo contenitore.
translateX(100%) sposta l'elemento verso destra fuori dal suo contenitore. Il valore 100% si riferisce alla larghezza del contenitore dell'elemento.
transform: translateX(-100%):

Alla fine dell'animazione (100%), l'elemento si è spostato tutto verso sinistra, uscendo dalla vista, e traslando di -100% (cioè fuori a sinistra).
translateX(-100%) sposta l'elemento oltre il limite sinistro del contenitore. 
*/