/* Applica box-sizing a tutti gli elementi:
   larghezza e altezza includono anche padding e bordo.
   Ti aiuta a gestire meglio dimensioni e layout in tutto il sito. */
* {
    box-sizing: border-box;
}

/* Stile generale della pagina:
   rimuove il margine standard del browser,
   imposta il font,
   definisce il colore base del testo
   e inserisce l'immagine di sfondo su tutto il sito. */
body {
    margin: 0;
    min-height: 100vh;
    font-family: Arial, sans-serif;
    color: #111;
    background-image: url("immagini/ANtonio.jpeg");
    background-size: contain;
    background-repeat: repeat-x;
    background-position: center;
    background-attachment: fixed;
}

/* Aggiunge un velo scuro sopra l'immagine di sfondo:
   serve a far risaltare meglio testo e contenuti davanti allo sfondo. */
body::before {
    content: "";
    position: fixed;
    inset: 20px;
    background: rgba(0, 0, 0, 0.35);
    z-index: -1;
}

/* Header principale del sito:
   crea la barra alta rossa con il titolo centrato
   e una linea sotto per separarla dal resto della pagina. */
.titolo-sito {
    background-color: rgb(160, 150, 0);
    text-align: center;
    padding: 10px;
    border: 4px solid #5c0000;
}

/* Titolo dentro l'header:
   rimuove il margine automatico,
   colora il testo di giallo
   e aggiunge ombra per leggerlo meglio sul rosso. */
.titolo-sito h1 {
    margin: 0;
    color: rgb(50, 220, 170);
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}

/* Contenitore centrale del contenuto:
   limita la larghezza massima della pagina,
   centra i blocchi
   e lascia spazio laterale sui bordi dello schermo. */
.contenitore {
    max-width: 900px;
    margin: 30px auto;
}

/* Box generico riutilizzabile:
   serve per intro, form o sezioni importanti.
   Crea un riquadro chiaro leggibile sopra lo sfondo,
   con bordo, angoli arrotondati e ombra. */
.box {
    background-color: rgba(255, 255, 255, 0.86);
    padding: 25px;
    border: 2px solid #222222;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    margin-bottom: 25px;
}

/* Testo introduttivo della home:
   centra il testo,
   aumenta l'altezza tra le righe
   e rende il paragrafo più leggibile. */
.intro {
    text-align: center;
    line-height: 1.6;
    font-size: 20px;
}

/* Contenitore di elementi da centrare,
   utile per bottoni o piccole sezioni centrali. */
.centro {
    text-align: center;
}

/* Box specifico del form login:
   restringe il form per non farlo diventare troppo largo
   e lo centra nella pagina. */
.form-box {
    max-width: 700px;
    margin: 0 auto;
}
/* Singolo gruppo del form:
   aggiunge spazio sotto ogni campo
   per separare meglio input e sezioni. */
.campo {
    margin-bottom: 18px;
}

/* Etichette dei campi del form:
   le mette su una riga propria,
   staccate dall'input,
   e le rende più evidenti. */
.campo label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

/* Input del form:
   occupano tutta la larghezza disponibile,
   hanno padding interno,
   bordo visibile,
   angoli arrotondati
   e aspetto più pulito. */
.campo input {
    width: 100%;
    padding: 12px;
    border: 2px solid #444444;
    border-radius: 10px;
    font-size: 16px;
    background-color: white;
}

/* Effetto quando clicchi dentro un input:
   cambia il bordo e aggiunge un alone,
   così si capisce subito quale campo è attivo. */
.campo input:focus {
    outline: none;
    border-color: red;
    box-shadow: 0 0 0 4px rgba(255, 0, 0, 0.15);
}

/* Riquadro per gruppi di scelta:
   usato per radio button e checkbox.
   Li racchiude in una zona visiva separata con bordo e sfondo leggero. */
.scelta-box {
    margin-bottom: 20px;
    padding: 16px;
    border: 2px solid #333333;
    border-radius: 14px;
    background-color: rgba(255, 255, 255, 0.65);
}

/* Titolo del fieldset:
   aggiunge un po' di spazio laterale
   e lo rende più marcato. */
.scelta-box legend {
    padding: 0 8px;
    font-weight: bold;
}

/* Singola opzione del gruppo:
   ogni scelta va su una nuova riga
   e ha spazio sotto per non sembrare compressa. */
.opzione {
    display: block;
    margin-bottom: 10px;
}

/* Bottone/login link principale:
   definisce forma, colori, bordo e dimensioni.
   Può essere usato sia come link stilizzato che come bottone vero. */
.btn-login, .btn-logout {
    display: inline-block;
    padding: 12px 22px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    background-color: yellow;
    color: black;
    border: 2px solid #b38f00;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s ease;
}

/* Effetto hover del bottone:
   cambia colore e lo solleva leggermente
   quando ci passi sopra con il mouse. */
.btn-login:hover {
    background-color: orange;
    transform: translateY(-2px);
}

/* Messaggio di errore del form:
   usa un rosso marcato e mantiene uno spazio minimo
   anche quando il messaggio è vuoto, così il layout non salta. */
.errore {
    color: #a40000;
    font-weight: bold;
    min-height: 24px;
}

/* Box che mostra le informazioni dell'utente:
   utile nell'area riservata per visualizzare nome, risposte o dati salvati. */
.info-utente {
    margin: 20px 0;
    padding: 15px;
    border: 2px solid #444;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.7);
}