/*CAP1 CAP2 presentazione*/
/*CAP3 creazione pagine html e css*/
/*CAP4 creazione titoli e paragrafi*/
/*CAP5 spiegazione tag, elementi, attributi*/
/*CAP6 proprieta e valori in css*/
/*CAP7 promozionale/
/*CAP8 stili interni (io invece li inserisco in foglio esterno*)/
/*CAP9 stili interni e  funzione dei SELETTORI*/
/*CAP10 funzione di ID e CLASSE. ... NOTA in HTML si rendono uinivoci gli elementi scrivendo  ID= (nome) mentre in CSS gli elementi con ID si selezionano con # (cancelletto) seguito dall'id assegnato in html.  NOTA in CSS e le CLASSI si creano con . (punto) seguito da un nome identificativo di quella specifica classe e dai suoi attibuti mentre in HTML per assegnare quella classe si scrive class= "nomeidentificativo". Si possono assegnare piu classi allo stesso elemento inserendo gli identificativi delle  classi nelle virgolette dopo class */
/*CAP11 come richiamare i selettori singolarmete o in gruppi e/o per id e/o per classi  al fin di assegnare varie proprieta e valori*/
/*CAP12 regole di priorita di ccs nelle applicazioni delle istruzioni*/
/*CAP13 come inserire commenti nel css*/
/*CAP14 creazione foglio stile esterno*/
/*CAP15 proprieta e valori degli elementi*/
/*CAP16 chat gpt - intelligenza artificiale*/
/*CAP17 creazione DIV*/
/*CAP18 promozionale*/
/*CAP19 proprieta color*/
/*CAP20 proprieta testo */
/*CAP2i dimensioni e stili dei caratteri */
/*CAP22 proprieta larghezza ed altezza dei div e dei loro contenuti*/
/*CAP23 promozionale*/
/*CAP24 proprieta distanze (margin, padding)*/
/*CAP25 proprieta bordi */
/*CAP26 proprieta sfondi e gradienti*/
/*CAP27 proprieta ombre e trasparenze*/
/*CAP28 posizionamento immagini e testi FLOAT */
/*CAP29 posizionamento elementi POSITION*/

body{
  background-image: linear-gradient(to top,#ffffaa, #ffffcc,#f89999,#ffffcc,#ffffaa); 
 }  
 /*assegno alla PAGINA colore di fondo*/

div#nome{
  background: linear-gradient(to bottom, #ff0000, #ffffcc);
  text-align: center;
  width: 100%;
  position: fixed;
  margin-top: 0px;
  top: 0px;
  left: 0px;
 box-shadow: 0px 0px 10px 3px;
}


h1{color:rgb(7, 13, 94);
  
}

h2{color:rgb(7, 13, 94);}

/*.allinea{
  text-align: center;/*allineamento testo
  border-bottom: 2px solid #e46c6c;
}
*/


.larghezza {
  width: 90%;
  margin: 20px auto;
  text-align: center;/*allineamento testo*/
  border-bottom: 2px solid #e46c6c;
  
 
}



.contenitore-padre {
  max-width: 1300px;
  min-width: 400px; 
  min-width: 300px;
  margin: 150px auto 80px;
}


.image-wrapper {
  display: inline-block; /* Permette di posizionare le immagini in linea l'una accanto all'altra */
  margin: 30px; /* Aggiunge spazio tra le immagini */
  box-shadow: 0px 0px 10px 3px;
}




/* INIZIO STILI PER DIV TREDIV E CONTENUTO*/

/*assegno  STILI al DIV TREDIV*/
.largtrediv {
  width: 90%;
    margin: 20px auto;
    display: flex;
    justify-content: space-between; /* Distribuisce uniformemente gli spazi tra i figli */
    border-bottom: 2px solid #e46c6c;
  }


/*assegno  STILI ai DIV VID 1, VID2 e VID3*/
.child { 
  width: 30%; /* Poiché vuoi spazi di almeno 20px tra di loro, imposta la larghezza al 30% */
    margin: 30px 10px; /* Rimuovi eventuali margini predefiniti */
    display: flex;
    align-items: center; /* Per il centro del contenuto verticalmente */
    justify-content: center; /* Per il centro del contenuto orizzontalmente */
  
}

/*assegno  STILI al CONTENUTO DEI DIV VID1, VID2 e VID3*/
.child img {
  width: 100%; /* Per fare in modo che l'immagine riempia completamente il div figlio */
  height: auto; /* Per mantenere l'aspetto proporzionato dell'immagine */
}


/*FINE STILI PER DIV TREDIV E CONTENUTO*/


#scelte{
  background: linear-gradient(to top, #ff0000, #ffffcc);/*sfondo*/
  text-align: center;/*allineamento testo*/
  width: 100%;/*larghezza*/
  position: fixed;
  margin-bottom: 0px;
  bottom: 0px;
  left: 0px;
  box-shadow: 0px 0px 5px 1px;   
  
}
/*assegno al DIV SCELTE colore di fondo,centro tutti gli elementi */

.cornice{border:2px solid blue ;}
/*STILI DUE DIV AFFIANCATI CON FLOAT*/




.clear {
  clear: both; /* Aggiungi un div con clear per ripristinare il normale flusso del documento dopo i div con float */
}





/*ISTRUZIONI PER IL MENU */

ul#menu {
  font-family: Verdana, sans-serif;
  font-size: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-block;/*consigliato da gpt per centrare il menu */

}
ul#menu li {
  display: block;
  width: 94px;
  height: 30px;
  margin: 1px;
  float: left; /* elementi su singola riga */
}

ul#menu li a {
  color:rgb(7, 13, 94);
  display: block;
  font-weight: bold;
  line-height: 30px;
  text-decoration: none;
  width: 94px;
  height: 30px;
  text-align: center;
}

ul#menu li.active, ul#menu li:hover {
  background-color: #FF0000;
}

.dim{
  width: 90px;
  height: 35px;
}
/* FINE ISTRUZIONI MENU*/