/* Best Practices:
   1. Reset di base per rimuovere gli stili di default del browser.
   2. Utilizzo di variabili CSS per i colori, per una facile manutenzione.
   3. Utilizzo di Flexbox per il layout, per una centratura robusta.
   4. Stili organizzati per componente (generale, tipografia, link).
*/

/* Variabili CSS per i colori */
:root {
    --background-color: #000000;
    --text-color: #FFFFFF;
    --accent-color: #FEE715; /* Un giallo vibrante */
}

/* Reset di base e stili globali */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: 'Press Start 2P', cursive;
    background-color: var(--background-color);
    color: var(--text-color);
}

/* Layout principale */
.container {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centratura verticale */
    align-items: center;     /* Centratura orizzontale */
    min-height: 100vh;       /* Altezza minima pari a tutta la finestra */
    text-align: center;
    padding: 20px;
}

/* Stile del titolo principale */
.main-title {
    font-size: 3rem; /* Dimensione del font per schermi grandi */
    margin-bottom: 40px;
    letter-spacing: 2px;
}

/* Classe per colorare il testo in giallo */
.text-yellow {
    color: var(--accent-color);
}

/* Stile della navigazione social */
.social-links ul {
    list-style: none; /* Rimuove i pallini della lista */
    display: flex;
    gap: 30px; /* Spazio tra le icone */
}

.social-links a {
    color: var(--text-color);
    font-size: 2rem; /* Dimensione delle icone */
    text-decoration: none;
    transition: color 0.3s ease-in-out; /* Transizione fluida del colore */
}

/* Effetto al passaggio del mouse */
.social-links a:hover,
.social-links a:focus {
    color: var(--accent-color);
    outline: none; /* Rimuove il bordo al focus per un look più pulito, l'hover è sufficiente */
}

/* Media Query per la responsività su schermi piccoli (es. smartphone) */
@media (max-width: 600px) {
    .main-title {
        font-size: 1.8rem; /* Riduci la dimensione del testo su mobile */
    }

    .social-links a {
        font-size: 1.5rem; /* Riduci la dimensione delle icone */
    }

    .social-links ul {
        gap: 20px; /* Riduci lo spazio tra le icone */
    }
}