* {

    box-sizing: border-box;

  }

  

  body {

    font-family: 'Cormorant SC', serif;

    background-color: #001f3f;

    color: #333;

}



header {

  display: flex;

  justify-content: flex-end;

  align-items: center;

  padding: 15px 20px;

  background-color: #001f3f; /* Sfondo per visibilità */

}



header .logo {

  margin-right: auto;

  font-size: 1.5rem; /* Usa unità relative */

  font-weight: bold;

  color: #ff9900;

}



/* Stile per le voci del menu */

header nav a {

  color: #ff9900;

  text-decoration: none;

  font-size: 1rem; /* Usa unità relative */

  font-weight: bold;

  padding: 10px 15px; /* Aggiungi padding per creare il rettangolo attorno al testo */

  border: 1px solid #ff9900; /* Bordi rettangolari attorno al testo */

  border-radius: 3px; /* Angoli arrotondati */

  transition: color 0.3s ease, border-color 0.3s ease;

  margin-top: 5px; /* Distanza dal margine superiore dell'intestazione */

  text-shadow: 0 0 2px #001f3f, 0 0 4px #001f3f;

}



/* Stile quando si passa sopra con il mouse */

header nav a:hover {

  color: #ffffff; /* Cambia colore al passaggio del mouse */

  border-color: #ffffff; /* Cambia colore del bordo al passaggio del mouse */

}

@media (max-width: 768px) {

  header {

    flex-wrap: wrap;

    padding: 10px 15px;

  }



  header .logo {

    font-size: 1.2rem;

    margin-bottom: 10px;

  }



  header nav {

    gap: 10px;

  }



  header nav a {

    font-size: 0.9rem;

  }

}



@media (max-width: 480px) {

  header {

    padding: 8px 10px;

  }



  header .logo {

    font-size: 1rem;

  }



  header nav a {

    font-size: 0.8rem;

  }

}

    

img, video {



  max-width: 100%;



  height: auto;



}



  

 

  

@media (max-width: 768px) {



  body {



    font-size: 14px;

    padding: 10px;



  }

}



/* Stili specifici per dispositivi piccoli (max-width: 480px) */



@media (max-width: 480px) {

  body {

    font-size: 12px;

    padding: 5px;

  }



 



  img, video {

    max-width: 100%;

    height: auto;

  }



  * {

    box-sizing: border-box;

  }

}

* {

  box-sizing: border-box;

}



body {

  margin: 5px;

  position: relative;

}



#gallery {

  display: grid;

  height: calc(100vh - 10px);

  grid-template: repeat(6, 1fr)/repeat(6, 1fr);

  grid-gap: 0.5em;

}

@media (max-width: 800px) {

  #gallery {

    display: flex;

    align-items: flex-start;

    flex-wrap: wrap;

    justify-content: center;

  }

  #gallery > div {

    width: 48%;

    margin: 1%;

  }

}

@media (max-width: 800px) and (max-width: 350px) {

  #gallery > div {

    width: 98%;

  }

}

#gallery > div:nth-child(6n+1) {

  grid-column: span 2;

  grid-row: span 2;

}

#gallery > div:nth-child(2) {

  grid-column: span 3;

  grid-row: span 3;

}

#gallery > div:nth-child(4) {

  grid-column: span 1;

  grid-row: span 2;

}

#gallery > div > a {

  opacity: 0;

  position: absolute;

  color: #000;

  background-color: #000;

  font: bold 4em "Helvetica";

  text-shadow: 0 -1px 5px #fff, -1px 0px 5px #fff, 0 1px 5px #fff, 1px 0px 5px #fff;

  padding: 2rem;

  mix-blend-mode: difference;

  width: 100%;

  height: 100%;

  transition: all ease 1s;

}

#gallery > div > img {

  width: 100%;

  min-height: 100%;

  transition: all ease 1s;

}

#gallery > div:hover img {

  filter: blur(4px);

}

#gallery > div:hover a {

  opacity: 1;

}

#gallery > div {

  overflow: hidden;

  position: relative;

  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 20px 0 rgba(0, 0, 0, 0.19);

}

#gallery div,

#gallery a {

  display: flex;

  justify-content: center;

  align-items: center;

  text-decoration: none;

}



[id^=lightbox-] {

  position: fixed;

  top: 0;

  left: 0;

  width: 100vw;

  height: 100vh;

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

  display: flex;

  opacity: 0;

  transition: opacity 450ms ease-in-out;

  align-items: center;

  justify-content: center;

  pointer-events: none;

}

[id^=lightbox-]:target {

  opacity: 1;

  pointer-events: inherit;

}

[id^=lightbox-]:target img {

  filter: blur(0);

}

[id^=lightbox-] .content {

  max-width: 90%;

  position: relative;

  color: #fff;

}

[id^=lightbox-] .content:hover > a.close {

  opacity: 1;

  transform: scale(1, 1);

}

[id^=lightbox-] .content:hover > .title {

  opacity: 1;

  transform: translateY(-3px);

}

[id^=lightbox-] .content:hover > .title::after {

  opacity: 1;

}

[id^=lightbox-] .content > * {

  transition: all 450ms ease-in-out;

}

[id^=lightbox-] .title {

  display: block;

  margin: 0;

  padding: 1em;

  position: absolute;

  bottom: 0;

  width: 100%;

  transform: translateY(50%);

  font-size: 1.5em;

  opacity: 0;

}

[id^=lightbox-] .title::after {

  content: " ";

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

  bottom: 0;

  left: 0;

  height: 100%;

  width: 100%;

  position: absolute;

  transition: all 350ms ease-in-out 250ms;

  opacity: 0;

  transform-origin: bottom;

  mix-blend-mode: soft-light;

}

[id^=lightbox-] img {

  max-height: 90vh;

  max-width: 100%;

  margin: 0;

  padding: 0;

  filter: blur(50px);

}

[id^=lightbox-] a.close {

  width: 2em;

  height: 2em;

  position: absolute;

  right: 0;

  top: 0;

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

  display: flex;

  align-items: center;

  justify-content: center;

  transform: scale(0, 0);

  opacity: 0;

  transform-origin: right top;

  text-decoration: none;

  color: #fff;

}

[id^=lightbox-] a.close::after {

  content: "X";

}