/* Corpo della pagina */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

/* Header e menu */
header {
  background: #666666;
  padding: 1rem 0;
  position: relative;
}

.img-chi-sono {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Media query per schermi più piccoli */
@media (max-width: 768px) {
  .img-chi-sono {
    max-width: 90%;
  }
}



/* Stile del menu (di default è visibile su schermi grandi) */
/* Stile del menu di default */
.menu-bar {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-bar li {
  margin: 0 1.5rem;
}

.menu-bar li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.2rem;
}

.menu-bar li a:hover {
  text-decoration: underline;
}

/* Icona hamburger */
.hamburger {
  display: none; /* Nascosto di default */
  cursor: pointer;
  font-size: 2rem;
  color: white;
  position: absolute;
  top: 1rem;
  right: 1rem;
}

/* Responsive menu */
@media (max-width: 768px) {
  /* Nasconde il menu normale */
  .menu-bar {
    display: none;
    flex-direction: column;
    background-color: #333;
    position: absolute;
    top: 60px;
    right: 0;
    width: 100%;
    text-align: center;
    z-index: 1000;
  }

  .menu-bar.active {
    display: flex;
  }

  .menu-bar li {
    margin: 1rem 0;
  }

  .menu-bar li a {
    font-size: 1.5rem;
    color: white;
  }

  /* Mostra l'icona hamburger */
  .hamburger {
    display: block;
  }
}


/* Versione mobile */
@media (max-width: 768px) {
  /* Nasconde il menu di default su schermi piccoli */
  .menu-bar {
    display: none;
    flex-direction: column;
    align-items: center;
    background-color: #666666;
    width: 100%;
    padding: 1rem 0;
  }

  /* Mostra l'icona hamburger su schermi piccoli */
  .hamburger {
    display: block;
  }

  /* Quando il menu è attivo, mostralo */
  .menu-bar.active {
    display: flex;
  }

  /* Aumenta la dimensione dei link nel menu mobile */
  .menu-bar li {
    margin: 1rem 0;
  }

  .menu-bar li a {
    font-size: 1.5rem;
  }
}

/* Altri stili per il resto del sito */
section {
  padding: 2rem;
  margin: 1rem auto;
  max-width: 800px;
}

h1, h2 {
  color: #333;
}

.gallery {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.gallery img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}


/* Modal styles - Pop-up centrato */
.modal {
  display: flex;
  position: fixed; /* Fissiamo il pop-up sulla pagina */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Sfondo semi-trasparente */
  justify-content: center;
  align-items: center;
  z-index: 10000; /* Assicurati che il pop-up sia sopra altri contenuti */
}

.modal-content {
  background: rgb(193, 193, 193);
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  position: relative;
  max-width: 90%;
  width: 600px;
}

.modal .close {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 2rem;
  cursor: pointer;
  color: #333;
}

.modal .close:hover {
  color: #0078D7;
}