@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap');

* {
transition: all 0.1s ease 0.2s ;    /*   su tutte le proprietà, al posto di  width metti all   */
}
a {
transition: all 3s ease 0.2s ;    /*   su tutte le proprietà, al posto di  width metti all   */
}
body {
    color: #352d39;
    background-color: #fffcf9;
    text-align: left;
    font-size: 20px;
    font-family: 'montserrat', sans-serif;
}

Div#MyCode {margin-left: 150px;}

div#navbar {
    background-color: #151217;
    color:white;
    margin: 0px;
    width: 100%;
    padding: 10px 20px 10px;    /*  2px sotto e sotra -  20px; dx e sx  */
    position: fixed;
    top: 0px;
    left: 0px;
     box-shadow: 0px 1px 10px 3px black;    /* ombra   paramentri alto basso destra sinistra */

    
}

 
div#contenitore-supremo {
   /* background: #6d435a;*/
    max-width: 800px;
    margin: 100px auto 0px;     /* auto centra la pagina al centro  */
    
}



h1{
text-decoration: underline;
margin-top: 0px;
margin-bottom: 0px;
color: #ff6978;
}

 h2 {
 font-weight: normal;
 

}
 h2.dentro-piedipagina{
    color: aqua;
}


a {
    font-weight: bold;
    text-decoration: none;     /* togliamo sottolineatura */
    color: greenyellow;
    background-color: red;
}

/*modifichiamo al passare del mouse */
a:hover {
 text-decoration: underline;
 color: black
}
/* link visitati */
a:visited {
color:yellow;
}

/* link attivo */
a:active {
color: green;
}
/* elemento selezionato */
a:focus {
   font-size:50px ;
}

img {
border-radius: 10px;
}


 div#testata {
    background-color: #b1ede8;    /* Lascio il colore di default ed inserisco una immagine sotto */
    /* gradiente lineare */
  /*   background-image: linear-gradient(blue,red);
    oppure da  gradiente lineare verso destra 
    background-image: linear-gradient(to right, blue,red,green, pink, #b1ede8);*/
     /* tipo ombra  
     background-image: linear-gradient(to right right, #cdf4f0,#abede6);
*/
    /* oppure radiale 
    background-image: radial-gradient(blue,red); */
    /* oppure gradiente conico
    background-image: conic-gradient(blue,red);*/

/* inserisco una immagine */
background-image: url('galassia.jpg');
 
background-size: cover;
background-position: center;  
background-repeat: no-repeat;
color: #fffcf9;
  /*  margin: 100px 20px 50px 100px;   spazio ALTO, sinistra, basso, destra*/
  margin : 0px 0px 20px;         /* metti opx 0px 20px se vuoi mettere a zero il margine superiore 
   border: 2px solid #352d39;
 /* oppure 
    border-width: 2px;
    border-style: solid;
    border-color: black; */
 /*  oppure solo il colore della linea sotto */
      border-bottom-color: red;
      border-radius: 20px;
   /*  width: 400px;
    width: 50%;
    min-width: 350px;
    max-width: 500px;*/
    box-shadow: 0px 0px 10px 3px black;    /* ombra   paramentri alto basso destra sinistra */

      /* position: fixed;  blocca la posizione 
    top: 0px;
    left:  0px;  

    position : sticky;   mantiene la posizione normale fino a scroll e si blocca in alto o in basso
    top: 0px;
    */
    
  /*   position : sticky;  mantiene la posizione normale fino a scroll e si blocca in alto o in basso
    top: 0px;*/
   

} 

div#testata:hover {     /* quando il mouse tocca la testata   */
    box-shadow: 0px 0px 0px 0px black;    /* ombra   paramentri alto basso destra sinistra */
     background-image: linear-gradient(to top right, rgb(132, 132, 198), blue);     /*modifica lo sfondo di quell'elemento*/
     color: #151217;
}


div#piedipagina{
    color: #fffcf9;
    background-color:  #352d39;
    background-image: linear-gradient(to top right, #151217 , #634d72);
    margin-top: 0px;
    border: 2px solid #ff6978;
      border-radius: 20px;
}

div#testata, div#contenuto, div#piedipagina {
     padding: 25px;   /* mette margine interno al contenitore testata*/

}

p.dentro-testata {
    font-weight: bold;
    margin-bottom: 0px;
    padding-bottom: 0px;
    color: #fffcf9;
    
}
p.dentro-piedipagina {
    color: white;

}

img.immagine-natura {
    width: 40%;
    min-width: 200px;
}

p.dentro-piedipagina {
font-style: italic;
}

p {
color: black;
}

p.dentro-testata{
font-weight: bold;
}

#sottotitolo {  /*   ID  */
color:red;
 
}

.testoverde {   /* classe */
 font-size: 32px;
}

/*
. sfondorosa {
   background: pink;
}*/

/* adattamenti per schermi smartphone */
@media screen and (max-width: 600px){
    body {
    background-color: red;     /* quando rimpicciolisce la pagina lo sfondo diventa rosso */
     }
     /* se lo schermo è inferiore  600 px nasconde la barra navigazione */
     div#navbar{
    display:none;
    } 
    div#contenitore-supremo {
  
    margin:  0px auto 0px;     /* auto centra la pagina al centro  */
    
}
div#testata, div#piedipagina {
    margin-right: 20px;
    margin-left: 20px;
}

img.immagine-natura {
    width: 100%;
     float: none;
     margin: 20px  0px  ;
}

} 

 @media screen and (min-width: 850px){
    div#testata, div#piedipagina {
    margin-right: 20px;
    margin-left: 20px;
}
} 


 /*ul.spesa li {                selezioniamo tutti gli elementi di questa classe 
    font-weight: bold;
}*/

ul.spesa li:first-child {                /* selezioniamo il primo elemento di questa classe */
    font-weight: bold;
    color: red;
}

ul.spesa li:last-child {                /* selezioniamo l'ultimo elemento di questa classe */
    font-weight: bold;
    color: red;
}

ul.spesa li:nth-child(5) {                /* selezioniamo l'elemento n. 5 di questa classe */
    font-weight: bold;
    color: red;
}

 /* ul.spesa li:nth-child(even) {               selezioniamo tutti gli elementi pari di questa classe 
    font-weight: bold;
    color: red;
}*/
ul.spesa li:nth-child(odd) {                /* selezioniamo tutti gli elementi pari di questa classe */
    font-weight: bold;
    color: red;
}