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

 /*custom font part*/
  @font-face {
  font-family: myFirstFont;
  src: url(EuropeanTeletext.ttf);
  /* the font is here https://www.dafont.com/european-teletext.font
  Many thanks to  Jayvee Enaguas (HarvettFox96).
  
  ===| Copyright/attribution notice |===
© 2009-2019 Jayvee Enaguas (HarvettFox96). 
Released under a libre/free public domain licence as Creative Commons Zero (CC0) 1.0. 
Applies worldwide countries including the Philippines, Spain, etc.
*/
}

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

h1 {
  margin: 0 0 0 0;
}

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

h3 {
  margin: 0 0 1em 0;
  font-size: medium;
  color: black;
	background-color: white;

}

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

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

h6 {
  margin: 0 0 1em 0;
  font-size: medium;
     background-color:white ;
    color: black;
}

p {
  margin: 0 0 1em 0;
  /* aggiunto font per rendere più leggibile paragrafi*/
  font-family: "Lucida Console", Courier, monospace;
}

/*aggiunto per avere dei p stile televideo*/
.teletext{
  margin: 0 0 1em 0;
  /* aggiunto font per rendere più leggibile paragrafi*/
  font-family: myFirstFont;
}

/*parte per evidenziare testo all'interno dei p con gli span*/
.highlight_yellow {
    background-color:yellow ;
    color: black;
}

.highlight_cyan {
    background-color:#00FFFF ;
    color: black;
}

.highlight_green {
    background-color:#00FF00 ;
    color: black;
}

.highlight_magenta {
    background-color:#FF00FF ;
    color: white;
}

.highlight_red {
    background-color:red ;
    color: white;
}

.highlight_blue {
    background-color:blue ;
    color: white;
}

.highlight_white {
    background-color:white ;
    color: black;
}
/*fine parte testo evidenziato*/

/*inizio parte per link personalizzati*/
A.class1 {color:red;}
A.class1:link  {text-decoration: none; color: red;}
A.class1:visited {text-decoration: none; color: red;}
A.class1:hover {text-decoration: underline; color: red;}
A.class1:active {text-decoration: none; color: red;}

A.class2 {color:blue;}
A.class2:link {text-decoration: none; color: blue;}
A.class2:visited {text-decoration: none; color: blue;}
A.class2:hover {text-decoration: underline; color: blue;}
A.class2:active {text-decoration: none; color: blue;}

A.class3 {  background-color:yellow ;     color: black;}
A.class3:link {text-decoration: none; background-color:yellow ;     color: black;}
A.class3:visited {text-decoration: none; background-color:yellow ;     color: black;}
A.class3:hover {text-decoration: underline; background-color:yellow ;     color: black;}
A.class3:active {text-decoration: none; background-color:yellow ;     color: black;}

A.class4 {  background-color:#00FFFF ;     color: black;}
A.class4:link {text-decoration: none; background-color:#00FFFF ;     color: black;}
A.class4:visited {text-decoration: none; background-color:#00FFFF ;     color: black;}
A.class4:hover {text-decoration: underline; background-color:#00FFFF ;     color: black;}
A.class4:active {text-decoration: none; background-color:#00FFFF ;     color: black;}

A.class5 {  background-color:#00FF00 ;     color: black;}
A.class5:link {text-decoration: none; background-color:#00FF00 ;     color: black;}
A.class5:visited {text-decoration: none; background-color:#00FF00 ;     color: black;}
A.class5:hover {text-decoration: underline; background-color:#00FF00 ;     color: black;}
A.class5:active {text-decoration: none; background-color:#00FF00 ;     color: black;}

A.class6 {  background-color:#FF00FF ;     color: white;}
A.class6:link {text-decoration: none; background-color:#FF00FF ;     color: white;}
A.class6:visited {text-decoration: none; background-color:#FF00FF ;     color: white;}
A.class6:hover {text-decoration: underline; background-color:#FF00FF ;     color: white;}
A.class6:active {text-decoration: none; background-color:#FF00FF ;     color: white;}

A.class7 {  background-color:red ;     color: white;}
A.class7:link {text-decoration: none; background-color:red ;     color: white;}
A.class7:visited {text-decoration: none; background-color:red ;     color: white;}
A.class7:hover {text-decoration: underline; background-color:red ;     color: white;}
A.class7:active {text-decoration: none; background-color:red ;     color: white;}

A.class8 {  background-color:blue ;     color: white;}
A.class8:link {text-decoration: none; background-color:blue ;     color: white;}
A.class8:visited {text-decoration: none; background-color:blue ;     color: white;}
A.class8:hover {text-decoration: underline; background-color:blue ;     color: white;}
A.class8:active {text-decoration: none; background-color:blue ;     color: white;}



/*fine parte per link personalizzati*/

img {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}


/*inizio parte per menu*/

ul.sidenav {
  list-style-type: none;
  margin: 5px;
  padding: 0;
  /*width: 80%;*/
  width: auto
  background-color: #00FF00;
  /*position: fixed;*/
  height: auto;
  overflow: auto;
}

ul.sidenav li a {
  display: block;
  color: black;
  padding: 8px 16px;
  text-decoration: none;
}
 
ul.sidenav li a.active {
  background-color: black;
  color: #00FF00;
}

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






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

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

.sidebar { background-color: #00FF00;
			color: black;
  padding: 3px;
  text-align: center; 




}

.content { background-color: black; 
color: white; 
  /*padding: 5px;	parte originale - comment out*/
    padding-top: 5px;
  padding-right: 3px;
  padding-bottom: 5px;
  padding-left: 8px;
  
 
  }

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

.footer2 { background-color: red; 
color: white;
text-align: center; 
  padding: 10px 3px;	}




/* fine parte dei colori */







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

.header1 { grid-area: header1; }

.header2 { grid-area: header2; }

.sidebar { grid-area: sidebar; }

.content { grid-area: content; }

.footer1 { grid-area: footer1; }

.footer2 { grid-area: footer2; }

  ul.sidenav {
    width: 90%; 
	/*modificato da 100% che era perchè teneva la finestra sempre un po' più larga del dovuto in modalità smartphone*/
    height: auto;
    position: relative;
	
	
  }
  
  ul.sidenav li a {
   float: left;
    padding: 15px;
	
  }
}



/* Small devices (portrait tablets and large phones, 721px and up) */
@media only screen and (min-width: 721px) {
  .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 header1 header1" "header2 header2 header2 header2" "sidebar content content content" "footer1 footer1 footer2 footer2";
}

.header1 { grid-area: header1; }

.header2 { grid-area: header2; }

.sidebar { grid-area: sidebar; }

.content { grid-area: content; }

.footer1 { grid-area: footer1; }

.footer2 { grid-area: footer2; }

  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 1fr 0.01fr;
  grid-template-areas: "header1 header1 header2 header2" "sidebar content content content" "footer1 footer1 footer2 footer2";
}

.header1 { grid-area: header1; }

.header2 { grid-area: header2; }

.sidebar { grid-area: sidebar; }

.content { grid-area: content; }

.footer1 { grid-area: footer1; }

.footer2 { grid-area: footer2; }

  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 1fr 0.01fr;
  grid-template-areas: "header1 header1 header2 header2" "sidebar content content content" "footer1 footer1 footer2 footer2";
}

.header1 { grid-area: header1; }

.header2 { grid-area: header2; }

.sidebar { grid-area: sidebar; }

.content { grid-area: content; }

.footer1 { grid-area: footer1; }

.footer2 { grid-area: footer2; }

  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 1fr 0.01fr;
  grid-template-areas: "header1 header1 header2 header2 header2" "sidebar content content content content" "footer1 footer1 footer2 footer2 footer2";
}

.header1 { grid-area: header1; }

.sidebar { grid-area: sidebar; }

.footer1 { grid-area: footer1; }

.header2 { grid-area: header2; }

.content { grid-area: content; }

.footer2 { grid-area: footer2; }

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