/* Stili di base */
body, html {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  color:#55565a;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
   overflow-x: hidden;
   min-width:400px;  
   font-size: 16px;
}


.link-button {
  display: inline-block;
  background-color: #c71f35;
  color: white;
  padding: 10px 15px;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;

  transition: background-color 0.3s;
}

.link-button:hover, .link-button:focus {
  background-color: #367c39;
  color: white;
  text-decoration: none;
}



.header, .footer {
  background-color: #c71f35;
  color: white;
  text-align: center;
  padding: 1em;
}




.pagina {
  display: none;
}

.attiva {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between; 
}



.domanda-header {
  border-bottom: 2px solid #c71f35; /* Bordino inferiore per l'header */
  padding-bottom: 5px; /* Spazio tra testo e bordino */
}

.domanda-contenuto {
  flex-grow: 0; /* Assicura che il contenuto occupi lo spazio disponibile, spingendo il footer in basso */
  padding: 10px 0; /* Spazio sopra e sotto il contenuto della domanda */
}

.domanda-footer {
  display: flex;
  justify-content: center; /* Centra i bottoni delle risposte nel footer */
  flex-wrap: wrap; /* Permette ai bottoni di andare a capo se necessario */
  padding-top: 20px; /* Spazio tra il contenuto della domanda e i bottoni */
}

.card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  border-radius: 8px;
  background-color: white;
  max-width: 350px; /* Assicura che la card non diventi troppo larga su schermi grandi */
    opacity: 90%;
	min-height: 400px;
	    min-width: 300px;


}




/* Ombra per livello normale */
.normale {
  box-shadow: 0 4px 30px rgba(81, 126, 62, 1); /* Ombra verde */
}

/* Ombra per livello lieve */
.lieve {
  box-shadow: 0 4px 30px rgba(236, 239, 0, 1); /* Ombra gialla */
}

/* Ombra per livello moderato */
.moderato {
  box-shadow: 0 4px 30px rgba(255, 165, 0, 1); /* Ombra arancione */
}

/* Ombra per livello grave */
.grave {
  box-shadow: 0 4px 30px rgba(255, 0, 0, 1); /* Ombra rossa */
}







/* Stili per le card delle domande */
#domande{
  min-height:400px;
      display: flex;
  flex-direction: column;
  justify-content: space-between; 
}



#domande button {
  margin: 5px; /* Aggiusta il margine per adattarsi al layout orizzontale */
}

/* Assicura che i bottoni non diventino troppo larghi */
#domande button {
  min-width: 40px; /* O una larghezza minima che preferisci */
  padding: 10px;
}


#immagineBenvenuto {
  max-width: 150px; /* Dimensione massima su schermi grandi */

  display: block;
  margin: 0 auto 20px;
}

.footer {
  background-color: #c71f35;
  color: white;
  text-align: center;
  padding: 1em;
  display: flex; /* Imposta il footer su display flex */
  align-items: center; /* Centra verticalmente gli elementi all'interno del footer */
  justify-content: center; /* Centra orizzontalmente gli elementi nel footer */
}

#immagineFooter {
  max-width: 50px; /* Regola la dimensione dell'immagine secondo necessità */
  height: auto;
  margin-right: 20px; /* Aggiunge spazio tra l'immagine e il testo */
}


/* Riduci la dimensione massima dell'immagine su schermi medi */
@media (max-width: 768px) {
  #immagineBenvenuto {
    max-width: 120px; /* Dimensione leggermente più piccola */
  }
}

/* Riduci ulteriormente la dimensione massima dell'immagine su schermi piccoli */
@media (max-width: 480px) {
  #immagineBenvenuto {
    max-width: 100px; /* Ancora più piccola per adattarsi a schermi molto piccoli */
  }
}




/* Stili per i bottoni */
button {
  padding: 10px 20px;
  margin-top: 10px;
  background-color: #c71f35;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #367c39;
}
.contenitorediv {
margin-top:10%;
}


/* Responsive design con Media Queries */
@media (max-width: 768px) {
  .container {
    padding: 10px;
  }

#fiore {
    bottom: -700px;
    position: absolute;
    width: 46%;
    max-width: 100px;
    min-width: 100px;
    left: 50%;
    transform: translateX(-50%);
}


  .header h2, .footer h2 {
    font-size: 18px;
  }
}

@media (max-width: 480px) {


  button {
    padding: 8px 16px;
  }
}



.container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center; 
}


.svg-background {
    position: relative;
    z-index: -1;
    width: 100%;
}

#fiore {
    position: absolute;
    width: 100%;
    max-width: 700px;
    min-width: 360px;
    left: 50%; 
    transform: translateX(-50%); 
	bottom: -700px;
}


/* Steli (Stems) 
#Stem2_1_, #Stem3_1_, #Stem4_1_, #Stem5a_1_, #Stem5b_1_, #Stem6_1_, #Stem7a_1_, #Stem7b_1_, #Stem7c_1_, #Stem8_1_,
#Stem17_1_, #Stem18_1_, #Stem19_1_, #Stem20a_1_, #Stem20b_1_, #Stem21_1_, #Stem22a_1_, #Stem22b_1_, #Stem22c_1_, #Stem23_1_,
#Stem10_1_, #Stem11_1_, #Stem12a_1_, #Stem12b_1_,
#Stem26_1_, #Stem27_1_, #Stem28a_1_, #Stem28b_1_,
#Stem13a_1_, #Stem13b_1_, #Stem13c_1_,
#Stem29a_1_, #Stem29b_1_, #Stem29c_1_

{
    opacity: 1;
    transition: opacity 2s ease-in-out; /* Transizione fluida per l'opacità 
}
*/
/* Foglie (Leaves) 
#Leaf2_1_, #Leaf17_1_,
#Leaf4_1_, #Leaf5a_1_, #Leaf5b_1_,
#Leaf19_1_, #Leaf20a_1_, #Leaf20b_1_,
#Leaf11_1_, #Leaf12a_1_, #Leaf12b_1_,
#Leaf27_1_, #Leaf28a_1_, #Leaf28b_1_,
#Leaf13a_1_, #Leaf13b_1_, #Leaf13c_1_,
#Leaf29a_1_, #Leaf29b_1_, #Leaf29c_1_

{
    opacity: 1;
    transition: opacity 2s ease-in-out; 
}
*/
/* Boccioli (Buds) 
#Bud3_1_, #Bud6_1_,
#Bud18_1_, #Bud21_1_,
#Bud7a_1_, #Bud7b_1_, #Bud7c_1_, #Bud8_1_,
#Bud22a_1_, #Bud22b_1_, #Bud22c_1_, #Bud23_1_,
#Bud10_1_, #Bud26_1_

{
    opacity: 1;
    transition: opacity 2s ease-in-out;
}
*/

/* Altri Elementi
#Dots_1_,
#Footer_group_1_, 
#BaseGroup16_1_ path, #PinkFlowerGroup16_1_,
#BaseGroup1_1_ path, #PinkFlowerGroup1_1_,
#BaseGroup9_1_ path, #PinkFlowerGroup9_1_,
#BaseGroup25_1_ path, #PinkFlowerGroup25_1_

 {
    opacity: 1;
    transition: opacity 2s ease-in-out; 
}
 */

/* Gruppi di contorni (Strokes) 
#LeftBottomGroup_1_ path[id^=Stroke],
#LeftTopGroup_1_ path[id^=Stroke]

 {
    opacity: 1;
    transition: opacity 2s ease-in-out; 
}

#RightBottomGroup_1_ path[id^=Stroke],
#RightTopGroup_1_ path[id^=Stroke]



 {
    opacity: 1;
    transition: opacity 2s ease-in-out; 
}
*/

#Dots_1_ {
    fill: #ffc300;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}



#RightGroup_1_{
	opacity: 1;
    transition: opacity 2s ease-in-out;
}

#RightTopGroup_1_{
	opacity: 1;
    transition: opacity 2s ease-in-out;
}

#StrokesGroup30_1_,
#LeafGroup29_1_,
#LeafGroup28_1_,
#LeafGroup27_1_,
#BudGroup26_1_,
#FlowerGroup25_1_ {
	opacity: 0;
    transition: opacity 2s ease-in-out;
}




#RightBottomGroup_1_{
	opacity: 1;
    transition: opacity 2s ease-in-out;
}

#StrokesGroup24_1_,
#BudGroup23_1_,
#BudGroup22_1_,
#BudGroup21_1_,
#LeafGroup20_1_,
#LeafGroup19_1_,
#BudGroup18_1_,
#LeafGroup17_1_,
#FlowerGroup16_1_,
#PinkFlowerGroup16_1_,
#PinkFlowerGroup25_1_ {
	opacity: 0;
    transition: opacity 2s ease-in-out;
}




#LeftGroup_1_{
	opacity: 1;
    transition: opacity 2s ease-in-out;
}

#LeftTopGroup_1_{
	opacity: 1;
    transition: opacity 2s ease-in-out;
}


#StrokesGroup15_1_,
#LeafGroup13_1_,
#LeafGroup12_1_,
#LeafGroup11_1_,
#BudGroup10_1_,
#FlowerGroup9_1_ {
	opacity: 0;
    transition: opacity 2s ease-in-out;
}




#LeftBottomGroup_1_{
	opacity: 1;
    transition: opacity 2s ease-in-out;
}


#StrokesGroup14_1_,
#BudGroup8_1_,
#BudGroup7_1_,
#BudGroup6_1_,
#LeafGroup5_1_,
#LeafGroup4_1_,
#BudGroup3_1_,
#LeafGroup2_1_,
#FlowerGroup1_1_,
#PinkFlowerGroup1_1_,
#PinkFlowerGroup9_1_ {
	opacity: 0;
    transition: opacity 2s ease-in-out;
}







@keyframes mossoDalVento {
  0%, 100% {
    transform: rotate(-1deg);
  }
  50% {
    transform: rotate(1deg);
  }
}

#LeftGroup_1_ {
  /* Fissa il punto di rotazione in basso al centro dell'elemento */
  transform-origin: center bottom;
  /* Applica l'animazione, con una durata di 3 secondi e un'iterazione infinita */
  animation: mossoDalVento 15s infinite;
}
#RightGroup_1_ {
  /* Fissa il punto di rotazione in basso al centro dell'elemento */
  transform-origin: center bottom;
  /* Applica l'animazione, con una durata di 3 secondi e un'iterazione infinita */
  animation: mossoDalVento 20s infinite;
}



#LeftTopGroup_1_ {
  /* Fissa il punto di rotazione in basso al centro dell'elemento */
  transform-origin: center bottom;
  /* Applica l'animazione, con una durata di 3 secondi e un'iterazione infinita */
  animation: mossoDalVento 15s infinite;
}
#RightTopGroup_1_ {
  /* Fissa il punto di rotazione in basso al centro dell'elemento */
  transform-origin: center bottom;
  /* Applica l'animazione, con una durata di 3 secondi e un'iterazione infinita */
  animation: mossoDalVento 20s infinite;
}












path {
    stroke-dasharray: 1000; /* Assicurati che questo valore sia sufficientemente grande da coprire la lunghezza totale di qualsiasi path */
    stroke-dashoffset: 1000; /* Inizialmente nasconde il percorso */
    /* Rimuovi la proprietà animation da qui */
}

/* Utilizza questa classe per avviare l'animazione */
.animate-path {
    animation: draw 2s forwards; /* Modifica la durata dell'animazione come necessario */
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes drawPathReverse {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: [lunghezza del percorso];
  }
}