body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra gli elementi orizzontalmente nel body */
}

.menu-container {
    background-color: #f0f0f0;
    padding: 10px;
    text-align: right;
    width: 100%; /* Il menu occupa tutta la larghezza */
}

.menu {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #ccc;
    margin-right: 10px; /* Un po' di spazio dal bordo destro */
}

.header-container {
    background-color: #e0e0e0;
    padding: 20px;
    text-align: center;
    width: 100%; /* L'header occupa tutta la larghezza */
}

.header h1 {
    margin: 0;
}

.titolo-centrato {
    text-align: center;
  }
h1 {
    text-align: center;
  }


.main-container {
    flex-grow: 1;
    padding: 20px;
    max-width: 960px; /* Imposta una larghezza massima per il contenuto centrale */
    width: 90%; /* Permette al contenuto di ridursi su schermi più piccoli */
    margin: 20px auto; /* Centra orizzontalmente il contenitore principale */
    background-color: #ffffff; /* Mantiene il colore di sfondo */
}

.main-content {
    padding: 20px; /* Spazio interno al contenuto della scatola */
}

.gallery-container {
    background-color: #ffffff;
    padding: 15px;
    text-align: center;
    width: 100%; /* La galleria occupa tutta la larghezza */
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 1200px; /* Larghezza massima per la galleria */
    margin: 0 auto; /* Centra la galleria orizzontalmente */
}

.image-box {
    background-color: #ffffff;
    color: white;
    width: 100px; /* Imposta la larghezza a 100px */
    height: 100px; /* Imposta l'altezza a 100px */
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-container {
    background-color: #b0b0b0;
    padding: 10px;
    text-align: center;
    width: 100%; /* Il footer occupa tutta la larghezza */
}