html{
  scroll-behavior: smooth;
}

body{
  font-family: "Montserrat", sans-serif;
  background-color: beige;
  user-select: none;
}

/* Disabilita il trascinamento delle immagini in una altra scheda (per togliere la possibilità di copiarle) */
img {
  -webkit-user-drag: none; /* Per browser WebKit come Chrome e Safari */
  user-drag: none; /* Per Firefox */
  max-width: 100%;
  height: auto;
  display: block;
  text-align: center;
  margin: 0 auto; /* Centra l'immagine orizzontalmente */
  max-width: 100%; /* Per evitare che sfori dal contenitore */
}

/* Nasconde il pulsante di download dal menù delle opzioni del video per i browser che lo supportano */
video::-internal-media-controls-download-button {
  display: none;
}

/* Nasconde il pulsante di download dal menù delle opzioni del video per Firefox */
video::-webkit-media-controls-enclosure {
  overflow: hidden;
}

video::-webkit-media-controls-panel {
  width: calc(100% - 30px); /* Regola la larghezza menù delle opzioni del video per adattarsi meglio al layout*/
}

/* Nasconde il pulsante di download su Firefox */
video::-moz-download-button {
  display: none;
}

/* Disabilita l'effetto di feedback della illuminazione in azzurro alla pressione di un pulsante o altro su i dispositi mobile come tablet e telefoni */
*{
  -webkit-tap-highlight-color: transparent; /* Per Safari, iOS e altri browser WebKit */
  -webkit-touch-callout: none; /* Impedisce la visualizzazione del menu di azione a lungo tocco */
  -ms-touch-action: manipulation; /* Imposta il comportamento del tocco */
  touch-action: manipulation; /* Imposta il comportamento del tocco */
}

.credit { /* classe del Watermark dei cookie */
  display: none !important; /* Nasconde il Watermark in quanto non è così bello da vedere */
  visibility: hidden !important;
  height: 0 !important;
}

/* Esempio di palette personalizzata per il banner dei cookie */
.palette-custom {
  --banner-background: #febd59; /* Colore di sfondo del banner */
  --banner-text: black; /* Colore del testo del banner */
  --button-background: #febd59; /* Colore di sfondo del pulsante */
  --button-text: black; /* Colore del testo del pulsante */
}

.banner {
  background-color: var(--banner-background);
  color: var(--banner-text);
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  background: #febd59;
  border-top: 3px solid beige;
  color: beige;
  font-family: "Montserrat", sans-serif;
  transition: background 0.3s ease, color 0.3s ease, border-top-color 0.3s ease; /* Transizione per il colore dello sfondo, del testo e del bordo */
  /* Stile del banner con animazione di fade-in */
  animation: animazionedidissolvenzadelbanner 1s ease-in-out; /* Applica il tipo indicato di animazione con durata di 1 secondo e un'uscita graduale */
}

.banner button {
  background-color: var(--button-background);
  color: var(--button-text);
  border: none;
  cursor: pointer; /* Cambia il cursore per indicare che è cliccabile */
}

/* Quando il banner è in hover */
.banner:hover {
  background: beige;
  border-top: 3px solid #febd59;
  color: #febd59;
}

.banner a {
  color: beige;
}

/* Quando il banner è in hover */
.banner:hover a {
  color: #febd59; /* Cambia il colore del link all'interno del banner */
}

/* Stile del link del collegamento alla Privacy e Policy del banner */
.linkbannerPrivacyePolicy {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  text-decoration: none;
  position: relative; /* Necessario per l'animazione con before */
  transition: all 0.3s ease-in-out; /* Animazione generale */
}

/* Stile del link del collegamento alla Privacy e Policy del banner (quando ci si passa sopra con il cursore) */
.linkbannerPrivacyePolicy::after {
  content: '';
  position: absolute;
  left: 50%; /* Partenza dal centro */
  bottom: -5px; /* Regola la distanza dal testo */
  width: 0;
  height: 4px; /* Regola lo spessore della linea */
  background-color: #febd59;
  transform: translateX(-50%); /* Centro esatto del link */
  transition: width 0.4s ease, background-color 0.4s ease; /* Animazione */
}

.linkbannerPrivacyePolicy:hover::after {
  width: 100%; /* Espandi la linea su tutta la larghezza */
}

/* Stile del messaggio del banner */
.messaggiodelbanner {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
}

/* Stile del testo del pulsante presente nel banner */
.pulsantechiusurabanner {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;  /* Dimensione del font */
  color: #febd59;  /* Colore del testo */
  background-color: beige;  /* Colore di sfondo del pulsante */
  padding: 10px 20px;  /* Spaziatura interna del pulsante */
  border-radius: 7px;  /* Raggio dei bordi */
  text-align: center;  /* Centrare il testo nel pulsante */
  cursor: pointer;  /* Cambia il cursore al passaggio del mouse */
  display: inline-block;  /* Imposta il pulsante come inline-block */
  transition: background 0.3s, color 0.3s;
}

/* Stile del testo del pulsante presente nel banner (quando ci si passa sopra con il cursore) */
.pulsantechiusurabanner:hover {
  color: beige;
  background-color: #febd59;
}

/* Definizione dell'animazione "animazionedidissolvenzadelbanner" indicata sopra */
@keyframes animazionedidissolvenzadelbanner {
  from { 
      opacity: 0; /* Inizia con il banner completamente trasparente */
  }
  to { 
      opacity: 1; /* Termina con il banner completamente visibile */
  }
}

.contatoreprodottipreferiti {
  color: black;
  font-weight: bold;
}

.contatoreprodottipreferiti:hover {
  font-weight: bold; /* Imposta lo stile del testo in grassetto */
  color: #febd59;
}

.contatoreprodottishoppingbag {
  color: black;
  font-weight: bold;
}

.contatoreprodottishoppingbag:hover {
  font-weight: bold; /* Imposta lo stile del testo in grassetto */
  color: #febd59;
}

.popup{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px); /* Aggiunge l'effetto di sfocatura */
  transition: opacity 1s ease; /* Transizione per la comparsa del contenuto */
  font-size: 1rem;
  overflow: auto;
  transition: background 0.3s ease, color 0.3s ease, border-top-color 0.3s ease; /* Transizione per il colore dello sfondo, del testo e del bordo */
  /* Stile del popup con animazione di fade-in */
  animation: animazioneentratadidissolvenzadelpopup 1s ease-in-out; /* Applica il tipo indicato di animazione con durata di 1 secondo e un'uscita graduale */
}

.testopopup{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(255, 0, 0);
  color: #fff5f6;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  font-size: 90%;
}

.pulsantechiudipopup{
  font-family: "Montserrat", sans-serif;
  font-size: 1rem; /* Imposta la dimensione del pulsante */
  color: red; /* Imposta il colore del testo */
  border-radius: 0.7rem; /* Imposta il raggio del bordo del menù, più è alto più è ovale */
  padding: .5rem 1.5rem; /* Imposta il padding dell'elemento.*/
  cursor: pointer; /* Imposta il cursore quando si va sopra il logo */
  border: .1rem solid rgba(0, 0, 0, .3); /* Imposta lo stile del bordo */
  background-color: white;
  font-size: 140%;
  transition: background 0.3s, color 0.3s;
}

.pulsantechiudipopup:hover {
  color: white;
  background-color: red;
  border: .1rem solid white;
}

@keyframes animazioneentratadidissolvenzadelpopup {
  from { 
      opacity: 0; /* Inizia con il popup completamente trasparente */
  }
  to { 
      opacity: 1; /* Termina con il popup completamente visibile */
  }
}

.logo{
  width: 200px;
  height: auto;
}

.barradinavigazione{
  display: flex;
  align-items: center;
}

.barradinavigazione div{
  margin-left: auto;
}

.barradinavigazione a{
  margin-right: 38px;
}

.linknonsottolineati{
  color: inherit; /* Utilizza il colore del testo del padre, quindi il colore che è presente di base */
  text-decoration: none; /* Rimuove la sottolineatura */
  font-weight: normal; /* Imposta lo stile del testo normale */
}

.linknonsottolineati:hover{
  font-weight: bold; /* Imposta lo stile del testo in grassetto */
}

ion-icon{
  font-size: 21px;
  color: black;
}

section{
  padding: 2rem 9%;
}

/* Nasconde il toggler del menu */
header #toggler{
  display: none; /* Nasconde il toggler del menu */
}

/* Stile per l'icona del menù */
header .menùdispositivimobili{
  font-size: 3rem; /* Imposta la dimensione della icona del menù */
  color: black; /* Imposta il colore del testo */
  padding: .5rem 1.5rem; /* Imposta il padding dell'elemento.*/
  /*Il padding è lo spazio tra l'icona del menù e i suoi bordi. 
  Il primo valore (.5rem) rappresenta il padding per il lato superiore e inferiore della icona, mentre il secondo valore (1.5rem) rappresenta il padding per il lato destro e sinistro della icona. */
  cursor: pointer; /* Imposta il cursore quando si va sopra l'icona del menù */
  display: none; /* Nasconde l'icona del menu (perchè adesso non va mostrata ma dopo sì) */
}

.homepage{
  display: flex;
  align-items: center;
  min-height: 100vh;
  background: url("TORTA SACHER.png") no-repeat center center fixed;
  background-size: cover;
  background-position: center;
  transition: background-image 1s ease; /* Aggiunge un'animazione di transizione */
}

.contenutohome{
  max-width: 50rem;
}

.contenutohome h3{
  font-size: 4rem;
  color: black;
  border-radius: 10rem; /* Imposta il raggio del bordo del menù, più è alto più è ovale */
  padding: .5rem 1.5rem; /* Imposta il padding dell'elemento.*/
  background-color: #febd59;
  text-align: center;
}

.contenutohome span{
  font-size: 2.5rem;
  padding: 1rem 0;
  line-height: 1.5;
  color: black;
  border-radius: 10rem; /* Imposta il raggio del bordo del menù, più è alto più è ovale */
  padding: .5rem 1.5rem; /* Imposta il padding dell'elemento.*/
  background-color: #febd59;
  text-align: center;
}

.contenutohome p{
  font-size: 1.5rem;
  padding: 1rem 0;
  line-height: 1.5;
  color: black;
  border-radius: 5rem; /* Imposta il raggio del bordo del menù, più è alto più è ovale */
  padding: .5rem 1.5rem; /* Imposta il padding dell'elemento.*/
  background-color: #febd59;
  text-align: center;
}

.titoloinizialeinformazioni{
  text-align: center;
  font-size: 4rem;
  color: black;
  padding: 1rem;
  margin: 2rem 0;
}

.titoloinizialeinformazioni span{
  color: black; 
}

.informazionipasticceria .contenutoinformazionipasticceria{
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 2rem 0;
  padding-bottom: 3rem;
}

.informazionipasticceria .contenutoinformazionipasticceria .contenitoredelvideo{
  flex: 1 1 40rem;
  position: relative;
}

.informazionipasticceria .contenutoinformazionipasticceria .contenitoredelvideo video{
  width: 100%;
  border: 1.5rem solid #febd59;
  border-radius: .7rem;
  box-shadow: 0 0.5rem 2rem black;
  height: 100%;
  object-fit: cover;
}

.informazionipasticceria .contenutoinformazionipasticceria .contenitoredelvideo .videodelsito:-webkit-full-screen{
  border: none;
  border-radius: 0%;
}

.informazionipasticceria .contenutoinformazionipasticceria .contenitoredelvideo .videodelsito:-moz-full-screen{
  border: none;
  border-radius: 0%;
}

.informazionipasticceria .contenutoinformazionipasticceria .contenitoredelvideo .videodelsito:-ms-fullscreen{
  border: none;
  border-radius: 0%;
}

.informazionipasticceria .contenutoinformazionipasticceria .contenitoredelvideo .videodelsito:fullscreen{
  border: none;
  border-radius: 0%;
}

/* Quando il video è in modalità a schermo intero */
.videodelsito:-webkit-full-screen{
  border: none; /* Nasconde il bordo */
}

.videodelsito:-moz-full-screen{
  border: none; /* Nasconde il bordo */
}

.videodelsito:-ms-fullscreen{
  border: none; /* Nasconde il bordo */
}

.videodelsito:fullscreen{
  border: none; /* Nasconde il bordo */
}

.informazionipasticceria .contenutoinformazionipasticceria .contenutoinformazionipasticceria2 h3{
  font-size: 3rem;
  color: black
}

.informazionipasticceria .contenutoinformazionipasticceria .contenutoinformazionipasticceria2 p{
  font-size: 1.5rem;
  color: black;
  line-height: 1.5;
}

.contenitoreicone{
  background: #febd59;
  display: flex;
  flex-wrap: wrap;
  gap:1.5rem;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.contenitoreicone .icone{
  background: beige;
  border: 0.1rem solid rgba(0,0,0,.5);
  border-radius: .7rem;
  padding: 2rem;
  display: flex;
  align-items: center;
  flex: 1 1 25rem;
}

.contenitoreicone .icone ion-icon{
  height: 5rem;
  margin-right: 2rem;
  font-size: 3rem; /* Modifica la dimensione dell'icona */
}

.contenitoreicone .icone h3{
  color: black;
  padding-bottom: 0.5rem;
  font-size: 1.5rem;
  top: -5%;
  margin-top: 0; /* Rimuove lo spazio superiore */
}

.contenitoreicone .icone span{
  color: black;
  font-size: 1.5rem;
  margin-top: 0; /* Rimuove lo spazio superiore */
}

.pulsanteprenotailtuodolce{
  display: inline-block;
  margin-top: 1rem;
  border-radius: 5rem;
  background-color: #febd59;
  color: black;
  padding:.9rem 3.5rem;
  cursor: pointer;
  font-size: 2rem;
  text-decoration: none; /* Rimuove la sottolineatura */
  font-weight: 1000;
  text-align: justify;
  outline: .1rem solid;
  transition: background 0.3s, color 0.3s;
}

.pulsanteprenotailtuodolce:hover{
  background-color: beige;
  color: #febd59;
  outline: .1rem solid black;
}

.pulsantescopridipiù{
  display: inline-block;
  margin-top: 1rem;
  border-radius: 5rem;
  background-color: #febd59;
  color: black;
  padding:.9rem 3.5rem;
  cursor: pointer;
  font-size: 2rem;
  text-decoration: none; /* Rimuove la sottolineatura */
  font-weight: 1000;
  text-align: justify;
  outline: .1rem solid;
  transition: background 0.3s, color 0.3s;
}

.pulsantescopridipiù:hover{
  background-color: #febd59;
  color: beige;
  outline: .1rem solid black;
}

.lenostretorte{
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 2rem;
}

.lenostretorte .introduzionecontenitorelenostretorte h3{
  font-size: 3.5rem;
  color: black;
  margin-bottom: 3rem;
  text-align: center;
  margin-top: 1rem;
}

.lenostretorte .introduzionecontenitorelenostretorte p{
  font-size: 1.5rem;
  color: black;
  margin-bottom: 2rem;
  padding-bottom: 10px;
  text-align: center;
}

.lenostretorte .contenitorelenostretorte{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  gap: 2rem;
}

.lenostretorte .contenitorelenostretorte .tortedisponibili{
  text-align: center;
  padding: 3rem 2rem;
  background: #febd59;
  border-radius: .7rem;
  box-shadow: 0 .5 1rem rgba(0, 0, 0, 0.1);
  outline: .1rem solid;
  cursor: pointer;
}

.lenostretorte .contenitorelenostretorte .tortedisponibili:hover{
  outline: 0.2rem solid black;
  outline-offset: 0;
}

.lenostretorte .contenitorelenostretorte .tortedisponibili img{
  border-radius: .7rem;
}

.lenostretorte .contenitorelenostretorte .tortedisponibili h3{
  padding: .5rem 0;
  font-size: 2rem;
  color: black;
  transition: background 0.3s, color 0.3s;
}

.lenostretorte .contenitorelenostretorte .tortedisponibili:hover h3{
  color: beige;
}

.lenostretorte .contenitorelenostretorte .tortedisponibili .prezzotorta{
  font-size: 1.5rem;
  color: black;
}

.previewtortedisponibili{
  position: fixed;
  top: 0; left: 0;
  min-height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, .8);
  display: none;
  align-items: center;
  justify-content: center;
}

.previewtortedisponibili .preview{
  display: none;
  padding: 2rem;
  text-align: center;
  background-color: beige;
  position: relative;
  margin: 2rem;
  width: 70rem;
  border-radius: .7rem;
  max-height: 50rem; /* Limita l'altezza */
  overflow-y: auto; /* Aggiunge la barra di scorrimento verticale all'interno */
}

.previewtortedisponibili .preview.attivo{
  display: inline-block;
}

.previewtortedisponibili .preview img{
  height: 30rem;
  border-radius: .7rem;
}

.previewtortedisponibili .preview .pulsantechiusurapreview{
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  cursor: pointer;
  color: #444;
  font-size: 60px; /* Regola la dimensione dell'icona */
  transition: transform 0.3s ease; /* Aggiunge una transizione fluida per la trasformazione */
}

.previewtortedisponibili .preview .pulsantechiusurapreview:hover{
  transform: rotate(90deg);
}

.previewtortedisponibili .preview h3{
  color: black;
  padding: .1rem 0;
  font-size: 2.5rem;
}

.previewtortedisponibili .preview .stelleperlarecensione{
  padding: .1rem 0;
  font-size: 1.7rem;
}

.previewtortedisponibili .preview .stelleperlarecensione ion-icon{
  color: #febd59;
  font-size: 1.7rem;
}

.previewtortedisponibili .preview .stelleperlarecensione span{
  color: black;
}

.previewtortedisponibili .preview p{
  line-height: 1.9;
  font-size: 1.5rem;
  color: black;
}

.previewtortedisponibili .preview .previewprezzotorta{
  padding: 1rem 0;
  font-size: 2.3rem;
  color: black;
}

.previewtortedisponibili .preview .pulsantiopzioniprewiew{
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.previewtortedisponibili .preview .pulsantiopzioniprewiew a{
  flex: 1 1 16rem;
  padding: 1rem;
  font-size: 1.8rem;
  color: black;
  border: 0.2rem solid black;
  text-decoration: none; /* Rimuove la sottolineatura */
  border-radius: .7rem;
}

.previewtortedisponibili .preview .pulsantiopzioniprewiew a.pulsanteaggiungiallashoppingbag{
  background: #febd59;
  color: beige;
  transition: background 0.3s, color 0.3s;
}

.previewtortedisponibili .preview .pulsantiopzioniprewiew a.pulsanteaggiungiallashoppingbag:hover{
  background: beige;
  color: #febd59;
}

.previewtortedisponibili .preview .pulsantiopzioniprewiew a.pulsanteaggiungiaipreferiti{
  background: #febd59;
  color: beige;
  transition: background 0.3s, color 0.3s;
}

.previewtortedisponibili .preview .pulsantiopzioniprewiew a.pulsanteaggiungiaipreferiti:hover{
  background: beige;
  color: #febd59;
}

/* Definisce l'animazione per l'apertura della preview delle torte disponibili */
@keyframes animazionedientratapreviewtortedisponibili {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Classe che applica l'animazione all'apertura della preview delle torte disponibili */
.animazionedientratapreviewtortedisponibili {
  animation: animazionedientratapreviewtortedisponibili 0.5s ease forwards; /* Viene indicato prima la durata e poi il tipo di animazione */
}

/* Definisce l'animazione per la chiusura della preview delle torte disponibili */
@keyframes animazionediuscitapreviewtortedisponibili {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}

/* Classe che applica l'animazione alla chiusura della preview delle torte disponibili */
.animazionediuscitapreviewtortedisponibili {
  animation: animazionediuscitapreviewtortedisponibili 0.5s ease forwards; /* Viene indicato prima la durata e poi il tipo di animazione */
}

/* Media query per schermi fino a 991px */
@media (max-width:991px){

  html{
    font-size: 55%; /* Imposta la dimensione del testo al 55% */
  }

  header{
    padding: 2rem; /* Aggiunge padding all'header */
  }

  section{
    padding: 2rem; /* Aggiunge padding all'header */
  }

  .homepage{
    background-position: left;
  }

  .elementibarranavigazione a{
    font-size: 2rem; /* Ingrandisce il testo del link */
  }
}

/* Media query per schermi fino a 768px */
@media (max-width:768px){

  /* Mostra l'icona del menù */
  header .menùdispositivimobili{
    display: block; /* Mostra l'icona del menu */
  }

  /* Stile per la barra di navigazione */
  header .elementibarranavigazione{
    position: absolute; /* Imposta la posizione assoluta */
    top:20%; left:0; right:0; /* Imposta la posizione in alto, a sinistra e a destra */
    background: #febd59; /* Imposta il colore di sfondo */
    border-top: .1rem solid rgba(0,0,0,.1); /* Imposta lo stile del bordo superiore */
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0 ); /* Nasconde la barra di navigazione */
    color: black;
  }

  .elementibarranavigazione a{
    display: block; /* Imposta gli elementi "a" su una riga separata */
    font-size: 2rem; /* Ingrandisce il testo del link */
    margin-bottom: 30px; /* Aggiunge spazio inferiore tra i link */
    margin-left: 7px;
    transition: background 0.2s, color 0.2s;
  }

  .elementibarranavigazione a:hover{
    font-weight: bold; /* Imposta lo stile del testo in grassetto */
    color: beige;
  }

  .linknonsottolineati{
    color: black;
    transition: background 0.2s, color 0.2s;
  }

  .linknonsottolineati:hover{
    font-weight: bold; /* Imposta lo stile del testo in grassetto */
    color: beige;
  }

  /* Mostra la barra di navigazione quando il toggler è selezionato */
  header #toggler:checked ~ .elementibarranavigazione{
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%); /* Mostra la barra di navigazione */
    transition: clip-path 0.70s ease; /* Aggiunge una transizione con durata di 0.70 secondi e un effetto di ease */
  }

  /* Nascondi la barra di navigazione quando il toggler non è selezionato */
  header #toggler:not(:checked) ~ .elementibarranavigazione{
    transition: clip-path 0.70s ease; /* Applica la stessa transizione quando il menù viene chiuso */
  }

  /* Stile per i link nella barra di navigazione */
  header .elementibarranavigazione a{
    display block; /* Imposta i link come blocchi */
  }

  /* Stile quando l'icona del menù è attiva (cioè quando viene premuta) */
  header .menùdispositivimobili:active{
    background-color: transparent; /* Imposta lo sfondo trasparente */
  }

  .contatoreprodottipreferiti {
    color: black;
    font-weight: bold;
    transition: background 0.2s, color 0.2s;
  }

  .contatoreprodottipreferiti:hover {
    font-weight: bold; /* Imposta lo stile del testo in grassetto */
    color: beige;
  }

  .contatoreprodottishoppingbag {
    color: black;
    font-weight: bold;
    transition: background 0.2s, color 0.2s;
  }

  .contatoreprodottishoppingbag:hover {
    font-weight: bold; /* Imposta lo stile del testo in grassetto */
    color: beige;
  }

  .popup{
    font-size: 1.2rem;
    padding: 150px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .contenutohome h3{
    font-size: 5rem;
    background: url("TORTA\ AL\ CIOCCOLATO\ 1.png") no-repeat left left left fixed;
  }

  .contenutohome span{
    color: black;
    font-size: 2.5rem;
    text-align: center;
  }

  .contenitoreicone .icone h3{
    color: black;
    padding-bottom: 2rem;
    font-size: 1.5rem;
  }
  
  .contenitoreicone .icone span{
    font-size: 1.7rem;
  }

  .lenostretorte .contenitorelenostretorte .tortedisponibili img{
    height: 20rem;
    border-radius: .7rem;
  }

  .previewtortedisponibili .preview img {
    height: 15rem;
  }
}

/* Media query per schermi fino a 450px */
@media (max-width:450px){

  html{
    font-size: 50%; /* Imposta la dimensione del testo al 50% */
  }

  .titoloinizialeinformazioni{
    font-size: 3rem;
  }

  .lenostretorte .contenitorelenostretorte .tortedisponibili img{
    height: 20rem;
    border-radius: .7rem;
  }

  .previewtortedisponibili .preview img {
    height: 15rem;
  }
}