img {
  width: 800px; /* L'immagine occuperà tutta la larghezza del suo contenitore */
  height: auto; /* Mantiene le proporzioni originali */
  border-radius: 5px; /* Bordo arrotondato */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0); /* Ombra leggera */
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%,-50%);
}


/* Imposta il corpo della pagina */
body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0; /* Sfondo chiaro */
}

/* Stile della barra di navigazione */
.navbar {
    background-color: rgba(12,54,110,0.8); /* Blu con trasparenza */
    border-radius: 5px;
    padding: 10px 20px;
    width: 50%; /* Larghezza della barra di navigazione */
    position: absolute; /* Posizionamento centrale */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centra la barra */
   }

/* Stile dei link nella barra di navigazione */
.navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
}

.navbar li{
margin:0 20px;
}

.navbar a{
    text-decoration: none;
    color: white;
    font-size: 16px;
    font-weight: bold;
    padding: 10px;
    transition: background-color 0.3s;
}

.navbar a:hover{
background-color:rgba(255,255,255,0.3);
}

.tooltip{
position:relative;
display:inline-block;
}

.tooltip .tooltiptext{
visibility:hidden;
width:250px;
background-color:#ccddff;
color:rgb(0,13,77);
text-align:center;
border-radius:5px;
padding:5px;
position:absolute;
z-index:1;
top:140%;
left:120%;
transform:translateX(-50%);
margin-left:-60px;
opacity:0;
transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext{
visibility:visible;
opacity:1;
}

 .tooltip2 {
      visibility: hidden;
      position: absolute;
      top: 40px;   /* posizione sotto il link */
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
      transition: opacity 0.3s;
      z-index: 10;
    }

    .tooltip2 img {
      width: 150px;   /* grandezza immagine tooltip */
      border-radius: 8px;
      box-shadow: 0px 4px 8px rgba(0,0,0,0.3);
    }
.navbar li:hover .tooltip2 {
      visibility: visible;
      opacity: 1;
    }