/*BARRA*/
nav {
    background-color: antiquewhite;
    color: black;
    margin: 0em;
    display: flex; 
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    width: 100%;
    position: fixed;
    top: 0em;
    left: 0em;
    word-spacing: 0.5em;
    
}

nav li {
    display: inline-block; 
    box-sizing:border-box; 
    
}

nav li a {
        color: black;

}

/* mouse sul link */
nav li:hover {
        background-color: rgb(250, 250, 230);
        border: groove;
	    box-sizing:border-box;        
}



body { 
    background-color: rgb(182, 248, 226);
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    margin: 1.5em;
}




h1, h2 { 
    background-color: rgb(245, 245, 220);
    text-align: center;
    border-radius: 0.5em ;
}

h1 { 
    margin-top: 2.5em;
    padding: 0.3em;
    border: 0.2em solid black;
    box-shadow: 0.2em 0.2em grey;
    font-style: italic;
}
    

h2 {
    padding: 0.3em;
    border: 0.3em solid grey;
    box-shadow: 0.2em 0.2em black;
} 


h7, h8 {font-family:'EB Garamond', normal;
	font-size:1em;
	color: black;
}


p.paragrafo, p.paesino {
    font-style: italic;
    font-size: larger;
    margin: auto;
}

.poesia {
    font-style: italic;
    font-size: x-large;
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
}



.grotta {    
    display: flex;
    margin: 2em;
    align-items: center;
    justify-content: space-evenly;
    height: 10em;
}

.immagine-grotta2 {
    height: 11.5em;
}


.madonnabianca  {  
    display:flex;
    justify-content:center;
    width:20em;
    height:auto;
    margin:auto;
}

.immagine-madonnabianca{
    width:35em;}




.immagine-cinqueterre {    
    margin: auto;
    width: 20em;
    height: auto;
    display: flex;
    justify-content: center;
}



li { font-style: italic;
     font-size: larger;
}
 

.castello {
    display:flex;
  	justify-content:center;
  	width:100%;
    height:12em;
  	margin:auto;
 
}

.tellaro { 
    display:flex;
	  justify-content:center;
	  width:100%;
    height:12em;
  	margin:auto;
    margin-top:2em;

}

/*ADATTAMENTI SMARTPHONE*/
 @media screen and (max-width: 600px) {

    nav {
      padding: 0%;
      font-size: 1em; 
      text-align: center;
        
    }
    
    nav li{
      text-align: center;
      font-size: 1em;
    }

    .barra li {
      font-size: 1em;

    }
  
    h1, h2, h3 {
      text-align: center;
    }

    h1 {
      margin-top: 2em;
    }

    h3 {
      font-size: 2em;
    }
    
    
    li {
      font-size: 1em;}

    .elenco li {
      margin: 0.1em;
      font-size: 1em;}

    p.paragrafo, p.paesino {
      margin: 2em;
       font-size: 1em;
       text-align: justify;
    }

    .immagine-cinqueterre, .castello {
        width: 10%;
        display: flex;
        margin:auto;
		    justify-content:center;
    }

    .immagine-grotta2 {
        width: 100%;
        margin:auto;
    }

    .immagine-grotta1, .riomaggiore{
        display: none;
    
  }
    .madonnabianca {  
      display:flex;
      justify-content:center;
      width:20em;
      height:auto;
      margin:auto;
  }

  .immagine-madonnabianca{
      width:15em;
    }
  
   .immagine-cinqueterre {
        display:grid;
        justify-content: center;
        align-items: center;
        margin:auto;  
   }

 .tellaro {
          display:flex;
					width:12em;
					height:6em;
					margin:auto;
     }
  
  

    }