body{
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 5rem;
  width: 100%;
  color: var(--ghiaccio);
  padding: 0 8%;
  background: linear-gradient(225deg, #565656 0%, #181818 100%);
  margin-bottom: 2rem;
  overflow: hidden;
}

header > div > h3:first-of-type{
  /* font-family: var(--anton); */
  font-size: 1.1rem;
  margin-bottom: .3rem;
  /* font-weight: normal; */
}

header > div > h3:last-of-type{
  font-size: .9rem;
}

header > img{
  height: 100%;
  max-width: 50%;
}

/* ================= */
/* ===== Main. ===== */
/* ================= */

main{
  margin-bottom: 3rem;
}

.container{
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: calc(60% - 2rem) calc(40% - 2rem);
  grid-template-rows: repeat(2, auto);
  grid-template-areas: "Immagine Dati" "Testo Dati";
  /* gap: 2rem; */
  column-gap: 4rem;
  row-gap: 2rem;
}

.immagine{
  grid-area: Immagine;
  width: 100%;
}

.immagine > img{
  width: 100%;
}

.testo{
  grid-area: Testo;
  line-height: 1.3rem;
}

.testo > p:not(p:last-child){
  margin-bottom: .9rem;
}

/* ========================== */

.containerDati{
  grid-area: Dati;
}

.datiPrenotazioni{
  position: sticky;
  top: 2rem;
}

.dati{
  margin-bottom: 2rem;
}

/* Dati. */

h2{
  /* font-size: 1.1rem; */
  font-size: 1.05rem;
  margin-bottom: .6rem;
}
    
h1{
  font-family: var(--anton);
  color: var(--bordeaux);
  font-size: 2rem;
  font-weight: normal;
  line-height: 1;
  /* text-shadow: .3rem .3rem .3rem #80003240; */
  text-shadow: .1rem .1rem .1rem #777;
  padding-right: 1rem;
  margin-bottom: .4rem;
}

.autoreRegista{
  font-style: italic;
  margin-bottom: .5rem;
}

.produzione{
  font-weight: bold;
}

/* Prenotazioni. */

#prenotazioni{
  display: flex;
  /* justify-content: center; */
  align-items: center;
}

#prenotazioni > a{
  position: relative;
  padding: 1rem 1.25rem 1rem 3.75rem;
  text-decoration: none;
  font-weight: bold;
}

#prenotazioni a::before{
  position: absolute;
  content: url("../../Immagini/Icone/PrenotazioniWhite.png");
  top: .69rem;
  left: 1.12rem;
  z-index: 1;
}

.prenotazione > a{
  background-color: var(--bordeaux);
  color: var(--ghiaccio);
  transition-duration: .8s;
  transition-property: box-shadow, color;
  transition-timing-function: ease;
}

.prenotazione > a:hover{
  color: var(--background);
  box-shadow: 0 0 1.25rem var(--bordeaux);
}

.noPrenotazione > a{
  background-color: #777;
  color: #333;
  cursor: default;
}

/* ========================== */

.notePdP{
  position: relative;
  margin-top: 2.2rem;
}

.notePdP::before{
  position: absolute;
  content: "";
  top: -.6rem;
  left: 0;
  height: .05rem;
  width: 8rem;
  background-color: #555;
}

.notePdP > div > a, .testo > span > a{
  text-decoration: none;
  color: #000;
}

.notePdP > div > a:hover, .testo > span:hover > a{
  color: #00f;
  font-weight: bold;
}

/* ======================================================== */

.apriMenu{
  height: 3.12em;
  width: 3.12em;
  border: none;
  border-radius: 50%;
  background-color: var(--bordeaux);
  box-shadow: -.2em -.2em 1em rgba(255, 255, 255, .1), .2em .2em .2em rgba(0, 0, 0, .6);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  /* top: 7.5em;
  right: 1.2em; */
  top: -.8em;
  right: -3em;
  transform: translateX(0);
  cursor: pointer;
  /* transition: all 1s ease; */ /* Animazione */
  transition-property: transform, box-shadow; /* Animazione. */
  transition-duration: 1s; /* Animazione. */
  transition-timing-function: ease; /* Animazione. */
  z-index: 1;
}

.menuOpen{
  transform: translateX(-17.6rem);
  box-shadow: none;
}

.apriMenu span{
  display: inline-block;
  position: absolute;
  width: 1.25rem;
  height: .25rem;
  background-color: var(--ghiaccio);
  border-radius: 1.3rem;
  /* transition: .5s; */
  transition-duration: .5s;
  transition-property: transform;
  transition-timing-function: ease-out;
  transition-delay: .2s;
}

.apriMenu span:nth-child(1){
  transform: translateY(-.37rem) rotate(-45deg);
}

.apriMenu.chiudi span:nth-child(1){
  transform: translateY(-.37rem) rotate(45deg);
}

.apriMenu span:nth-child(2){
  transform: translateY(.37rem) rotate(45deg);
}

.apriMenu.chiudi span:nth-child(2){
  transform: translateY(.37rem) rotate(-45deg);
}

.links{
  font-size: .9rem;
  position: absolute;
  padding: 1.25rem 1.9rem;
  width: 18.7rem;
  /* top: 5.2rem;
  right: 1.2rem; */
  top: -1.3rem;
  right: -2.2rem;
  transform: translateX(20rem);
  background-color: var(--bordeaux);
  opacity: 0;
  /* transition: all 1s ease; */ /* Animazione. */
  transition-duration: 1s; /* Animazione. */
  transition-property: transform, opacity; /* Animazione. */
  transition-timing-function: ease; /* Animazione. */
  box-shadow: -.2rem -.2rem 1rem rgba(255, 255, 255, .1), .2rem .2rem .2rem rgba(0, 0, 0, .6);
}

.linksOpen{
  transform: translateX(0);
  opacity: 1;
}

.links ul{
  list-style: none;
}

.links li{
  line-height: 1.1;
  margin-left: 1.3rem;
  text-indent: -.3rem;
  margin-bottom: .6rem;
}

.links a{
  text-decoration: none;
  color: var(--ghiaccio);
  /* margin-left: 1.25rem; */
  /* text-indent: -1.25rem; */
  padding: .13rem 0;
}

.links a:hover{
  font-weight: bold;
}

/* ================= Media queries. ================= */

@media only screen and (max-width: 1300px){
  .container{
    grid-template-columns: 60% calc(40% - 2rem);
    column-gap: 2rem;
  }
}

@media only screen and (max-width: 900px){
  .dati{
    margin-bottom: 1.5rem;
  }

  #prenotazioni a{
    padding: .7rem 1.25rem;
  }

  #prenotazioni a::before{
    content: none;
  }
}

@media only screen and (max-width: 800px){
  body{
    padding-top: 2rem;
  }

  header{
    display: none;
  }

  .container{
    display: block;
    margin-left: 5%;
  }

  .containerDati{
    margin-bottom: 2.5rem;
  }

  #prenotazioni a{
    margin-left: auto;
  }

  .immagine{
    margin-bottom: 2rem;
  }

  .apriMenu{
    top: -.5rem;
    right: -1rem;
  }

  .links{
    top: -1.5rem;
    right: -.8rem;
  }
}

@media only screen and (max-width: 400px){
  html{
    font-size: 14px;
  }

  h1{
    padding-right: 0;
  }

  .apriMenu, .links{
    display: none;
  }
}