/*MANY THANKS TO https://grid.layoutit.com/ */


/*
 /*custom font part
  @font-face {
  font-family: myFirstFont;
  src: url(EuropeanTeletext.ttf);
}
*/

body {
  
  margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
   max-width: 960px;
  /*font-family: 'Open Sans', 'sans-serif';*/
  /*font-family: myFirstFont;*/
  background-color: grey;
  color: #444;
 
   
}

h1 {
  margin: 0 0 1em 0;
  font-size: 200%;
}

h2 {
  margin: 0 0 1em 0;
  font-size: medium;
}

p {
  margin: 0 0 1em 0;
}

 img{
   /* width:100%;*/
   /* max-width:408px;
	max-height:120px;*/

  max-width: 100%;
  height: auto;

}

/*inizio parte per menu*/

ul.sidenav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: red;
  /*position: fixed;*/
  height: auto;
  overflow: auto;
}

ul.sidenav li a {
  display: block;
  color: white;
  padding: 8px 16px;
  text-decoration: none;
}
 
ul.sidenav li a.active {
  background-color: white;
  color: red;
}

ul.sidenav li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
/*fine parte per menu */


/*qui ci sono i colori di default di sfondo (se funziona) */
.header1 { background-color: white;
color: black;
font-size: 200%;
text-align: center;
  padding-top: 3px;
  padding-right: 8px;
  padding-bottom: 8px;
  padding-left: 8px; }

.header2 { background-color: white;
color: black; 
text-align: center; 
  padding-top: 8px;
  padding-right: 8px;
  padding-bottom: 8px;
  padding-left: 8px;}
  
  .horizontalbar { background-color: red;
color: red; 
text-align: center; 
  padding-top: 8px;
  padding-right: 8px;
  padding-bottom: 8px;
  padding-left: 8px;}

.sidebar { background-color: red;
			color: white;
  padding: 3px;			}

.content { background-color: white; 
color: black; 
  padding: 5px;	}

.footer1 { background-color: black;
color: white;
text-align: center; 
  padding: 6px 3px;	  }














/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0.01fr 0.01fr 0.01fr 0.01fr 1fr 0.01fr;
  grid-template-areas: "header1" "header2" "sidebar" "horizontalbar" "content" "footer1";
}

.header1 { grid-area: header1; }

.header2 { grid-area: header2; }

.sidebar { grid-area: sidebar; }

.content { grid-area: content; }

.footer1 { grid-area: footer1; }

.horizontalbar { grid-area: horizontalbar; }

  ul.sidenav {
    width: 100%;
    height: auto;
    position: relative;
  }
  
  ul.sidenav li a {
   float: left;

    padding: 15px;
  }

}



/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.01fr 0.01fr 0.01fr 1fr 0.01fr;
  grid-template-areas: "header1 header1 header1 header1" "header2 header2 header2 header2" "horizontalbar horizontalbar horizontalbar horizontalbar" "sidebar content content content" "footer1 footer1 footer1 footer1";
}

.header1 { grid-area: header1;
 border-radius: 5px 5px 0px 0px; 

}

.header2 { grid-area: header2; }

.sidebar { grid-area: sidebar; }

.content { grid-area: content; }

.footer1 { grid-area: footer1; }

.horizontalbar { grid-area: horizontalbar; }

  ul.sidenav li a {
    text-align: center;
    float: none;
  }

} 





/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
 .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.01fr 0.01fr 1fr 0.01fr;
  grid-template-areas: "header1 header1 header2 header2" "horizontalbar horizontalbar horizontalbar horizontalbar" "sidebar content content content" "footer1 footer1 footer1 footer1";
}

.header1 { grid-area: header1; 
 border-radius: 5px 0px 0px 0px;
 }

.header2 { grid-area: header2; 
 border-radius: 0px 5px 0px 0px;
}

.sidebar { grid-area: sidebar; }

.content { grid-area: content; }

.footer1 { grid-area: footer1; }

.horizontalbar { grid-area: horizontalbar; }

  ul.sidenav li a {
    text-align: center;
    float: none;
  }
} 
 




/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.01fr 0.01fr 1fr 0.01fr;
  grid-template-areas: "header1 header1 header2 header2" "horizontalbar horizontalbar horizontalbar horizontalbar" "sidebar content content content" "footer1 footer1 footer1 footer1";
}

.header1 { grid-area: header1; 
 border-radius: 5px 0px 0px 0px;
 }

.header2 { grid-area: header2; 
 border-radius: 0px 5px 0px 0px;}

.sidebar { grid-area: sidebar; }

.content { grid-area: content; }

.footer1 { grid-area: footer1; }

.horizontalbar { grid-area: horizontalbar; }

  ul.sidenav li a {
    text-align: center;
    float: none;
  }
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 0.7fr 1.4fr;
  grid-template-rows: 0.01fr 0.01fr 1fr 0.01fr;
  grid-template-areas: "header1 header1 header2 header2 header2" "horizontalbar horizontalbar horizontalbar horizontalbar horizontalbar""sidebar content content content content" "footer1 footer1 footer1 footer1 footer1";
}

.header1 { grid-area: header1; 
 border-radius: 5px 0px 0px 0px;
 }

.sidebar { grid-area: sidebar; }

.footer1 { grid-area: footer1; }

.header2 { grid-area: header2; 
border-radius: 0px 5px 0px 0px;}

.content { grid-area: content; }

.horizontalbar { grid-area: horizontalbar; }

  ul.sidenav li a {
    text-align: center;
    float: none;
  }
}