/*-------10--------20--------30--------40--------50--------60--------70-------*/
/*css grid and drop menu version*/

*{
  box-sizing: border-box;
}

/* Min font size mobile phone */
  @media only screen and (max-width: 37.5rem) {
  body { background-color: rgb(0,0,0); /* Red */ }
  html { font-size: 1rem; }
  h1   { font-size: 1.14rem; }
  h2   { font-size: 1.07rem; }
}

/* Variable font size */
/* 16px = 1 rem 24px = 1.5rem 600px = 37.5rem and 1200px = 75rem */
/* calc( min font size + ((max - min font size)) *     */
/* (100vw - min scrn size) / (max - min screen size))) */
  @media only screen and (min-width: 37.50rem) and (max-width: 74.94em) {
  body { background-color: rgb(0,0,0); /* Blue */ }
  html { font-size: calc( 1rem + ((1.5 - 1) * (100vw - 37.5rem) / (75 - 37.5))); }
  h1   { font-size: calc( 1.14rem + ((1.8 - 1.14) * (100vw - 37.5rem) / (75 - 37.5))); }  
  h2   { font-size: calc( 1.07rem + ((1.3 - 1.07) * (100vw - 37.5rem) / (75 - 37.5))); }
  }

/* Max font size */
  @media only screen and (min-width: 75rem) {
  body { background-color: rgb(0,0,0); /* Green */ }
  html { font-size: 1.5rem; }
  h1   { font-size: 1.36rem; }
  h2   { font-size: 1.15rem; } 
}


body {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(12,1fr);
  grid-template-rows: 5rem auto auto;                    
  grid-gap: 0.5rem;
  background-color: rgb(0,0,0);
  padding: 0.5rem;
}

.grid-container > * {
  background-color: rgb(64,64,64);
  border-radius: 0.5rem;
  padding: 0.5rem;
}

.menu {
  background-color: rgb(0,0,0);
  grid-column: 1 / 2;
  grid-row: 1;
  margin-right: auto;
  height: 5em;
}

 .logo {
  background-color: rgb(0,0,0);
  grid-column: 12 / 13;
  grid-row: 1;
  margin-left: auto;
  height: 5em;
}
   
header {
  grid-column: 1 / 13;
  grid-row: 2;
  text-align: center;
}

main {
  grid-column: 1 / 13;
  grid-row: 3;
}

.full-width-centered{
  grid-column: 1 / 13;
  text-align: center;
}
 
.full-width-left{
  grid-column: 1 / 13;
  text-align: left;
}

.column-1-left{
  grid-column: 1 / 2;
}

.column-2-12-left{
  grid-column: 2 / 13;
}

/* The side navigation menu */

.sidenav {
  grid-column: 1 / 13;
  grid-row: 2 / 4;
  z-index: 1;
  background-color: rgb(0,64,0);
  display: none;  
}

/* The navigation menu links */
.sidenav a {
  padding: 0.5rem;
  text-decoration: none;
  color: LightBlue;
  font-size: 1.07rem;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: rgb(128,128,0);
}

h1,h2 {color: white;}
	
p {
	color: LightGrey;
	font-size: 1rem;
}

ul {
	color: LightGrey;
	font-size: 1rem;
}

a {
	color: LightBlue;
	font-size: 1.07rem;
}