html, body {
    height: 100%;/* Permette alla pagina di utlizzare tutto lo spazio di cui dispone */
}

body {
    display: flex; /* Rende la pagina un conteniore flessibile, permette di gestire più facilemnte gli elementi figli */
    flex-direction: column; /* Dispone gli elementi figli in colonna, dall'alto verso il basso */
    font-family: Arial, sans-serif;
    background-image: url('../img/imgBG.png'); /* I due punitni indicano la cartella webapp(tornano indietro di una cartella) */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #333;
    text-align: center;
}

main {
    flex: 1; /* Il main prende tutto lo spazio tra header e footer, in modo da rendere il layout equilibrato(Il footer non sarebbe sempre in basso) */
}

header {
    padding: 20px; /* 20px da tutti i bordi del contenitore */
    background: rgba(120, 140, 60, 0.85);
    color: #FFD700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);}

.galleria {
    display: flex;
    justify-content: center;
    gap: 20px; /* Distanza tra le div della pagina */
    padding: 40px;
}

.quadro img {
    width: 450px;
    height: 300px;
    object-fit: cover; /* Mantiene le proporzioni dell'immagine */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}

.quadro img:hover {
    transform: scale(1.05);
}

footer {
    background: rgba(100, 120, 50, 0.85);
    color: #FFD700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    padding: 20px;
    font-size: 0.9rem;
}