h1 {font-weight:100; text-align:center;}
h2 {font-weight:200;}
h3 {font-weight:300;}
h4 {font-weight:400;}
h5 {font-weight:500;}
h6 {font-weight:600;}
h1,h2, h3,h4,h5,h6{margin-left:1em;}
em{color:blue;}
dt{font-weight:bold;}
th{text-align:left;}
body{text-align:justify;}
table{
   border-style:solid;
   border-width:1px;
}
thead, tfoot{
   background-color:lightgray;
}
caption{
   font-style:oblique;
   font-size:1.2em;
}
p{
   margin-left:1em;
   margin-right:1em;
}
#logo{width:48.0%;}
li{margin-right:1em;}
a:visited { color:blue;}
a:hover {color:magenta;}
/* Properties per rendere flottanti gli elementi tramite assegnazione di classe  */
.Left{
   float:left; 
   margin-top:0;
   margin-right:1em;
}        
.Right{
   float:right; 
   margin-top:0;
   margin-left:1em;
} 
.ClearL{
   clear:left;
}       
.ClearR{
   clear:right;
}       
.ClearBoth{
   clear:both;
}       
.button{
   display:inline;
   margin-right:1em;
   text-align:center;
}
.button a{
   border:1px solid green;
   padding:5px;
   border-radius:5px;
   line-height:2em;
   background-color:lightgray; 
}
.commento{
   font-size:10pt;
}
pre{
   background-color:white;
   margin-left:1em;
   margin-right:1em;

}
code{
   background-color:white;
   color:blue;
   font-size:10pt;
   font-family:sanserif;
}
body{
   position:absolute;
   width:100vw;
   height:96%;
   font-family:serif;
}
article{
   position:relative;
   width:60%;
   background-color:beige;
   left:20%;
   top:2%;
   font-size:14pt;
}
footer{
   position:relative;
   width:100%;
   background-color:yellow;
   font-size:14pt;
   margin-top:1em;
}
#ciliege{
   position:relative;
   width:80%;
   left:10%;
}
#montagne{
   position:relative;
   width:75%;
   margin:1em;
   margin-top:0;
   float:left;
}
.navTop{
   background-color:gray;
   color:white;
   text-align:center;
}
.navTop li{
text-align:left;
}
.navBottom{
   position:relative;
   background-color:gray;
   color:white;
   text-align:center;
}
#Logo{
   width:4vw;
   margin:0.5%;
}
#switch{position:fixed; top:0; width:100%;}

@media (min-width:360px)and (max-width:720px){
      article{
         width:99%;
         left:0;
         font-size:10pt;
      }
      footer{
         width:99%;
      }
}
@media(max-width:360px){
   p{clear:left;}
}
@media screen and (orientation:landscape) and (max-width:800px){
   code{color:red;}
   pre{background-color:yellow;}
}
#left{
   background-color:lightgreen;
   width:100%;
      height:100vh;   }
#center{
     background-color:orange;
     width:100%;
      height:100vh;   }
#right{
   background-color:magenta;   
      height:100vh;   
      width:100%;
}
@media (min-width:600px){
   #left{
      float:left;
      width:33.33%;
    }
   #center{
      float:left;
      width:33.33%;
    }
   #right{
      float:left;
      width:33.33%;
    }
   footer{
      float:left;
   }
}
@media (min-width:600px) and (max-width:800px){
   #left{
       height:100vw;    
   }
   #center{
      height:100vw;
   }
   #right{
      height:100vw;
   }
}