/* Stile generale */

* {

  padding: 0;

  margin: 0;

  font-family: 'Poppins', monospace;

}



/* Stile del titolo */

.coloreLink {

  color: chocolate;

  font-family: Impact;

  text-align: center;

}



/* Stile del menu */

ul {

  list-style: none;

  background: chocolate; /* Colore di sfondo del menu */

}



ul li {

  display: inline-block;

  position: relative;

}



ul li a {

  display: block;

  padding: 20px 25px;

  color: #FFF;

  text-decoration: none;

  text-align: center;

  font-size: 20px;

}



ul li ul.dropdown li {

  display: block;

}



ul li ul.dropdown {

  width: 100%; /* Larghezza del menu a tendina */

  background: chocolate; /* Sfondo iniziale uguale al menu */

  position: absolute;

  z-index: 999;

  display: none;

  transition: background-color 0.3s ease-in-out; /* Effetto graduale sullo sfondo */

}



ul li a:hover {

  background: #6d30e9; /* Colore viola al passaggio del mouse sui link principali */

}



ul li:hover ul.dropdown {

  display: block; /* Mostra il drop-down al passaggio del mouse */

}



ul li ul.dropdown li a {

  padding: 15px 20px; /* Riduce il padding del drop-down */

  color: #FFF; /* Colore del testo bianco */

  font-size: 18px; /* Dimensione del testo leggermente ridotta */

  text-align: left; /* Allinea il testo a sinistra */

  background: chocolate; /* Sfondo del menu iniziale */

  transition: background-color 0.3s ease-in-out; /* Aggiunge la transizione */

}



ul li ul.dropdown li a:hover {

  background: #6d30e9; /* Cambia sfondo a viola al passaggio del mouse */

}



/* Stile del contenitore della foto */

.container {

  position: relative;

  width: 500px;

  height: 400px;

  overflow: hidden;

  margin: 20px auto; /* Centra solo il contenitore */

}



.image {

  width: 100%;

  height: 100%;

  border-radius: 10px;

}



.text {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  color: white;

  font-size: 1.5em;

  background-color: rgba(0, 0, 0, 0.5);

  padding: 10px;

  border-radius: 10px;

  border: 2px solid white; 

  opacity: 0;

  transition: opacity 0.5s ease-in-out;

}



.container:hover .text {

  opacity: 1;

}



/* Stile del footer */

footer {

  background-color: chocolate;

  color: white;

  text-align: center;

  padding: 10px 0;

  position: fixed;

  bottom: 0;

  width: 100%;

  font-family: 'Poppins', monospace;

}