*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif !important;
}
body{
	background-color: whitesmoke;
	margin: 0;
	padding: 0;

}

h3{
  padding-top: 6px;
}
h3>a{
  color: white;
  text-decoration:underline;
  border: white solid 4px;
}
h4{
  font-size: 25px
}
p{
  font-size: 21px;
}
button{
  font-size: 20px;
}


.banner{
  border-bottom: 3px black solid;
  font-size:60px;
  text-align: center;
  letter-spacing: 5px;
  min-height: 100px;
  max-height: 130px;
}


.Grid{
  margin-right: auto;
  margin-left: auto;
  display:grid;

  grid-template-columns: 30px 1fr 30px;
  grid-template-rows: auto;
  grid-template-areas: 
  ". title ."
  ". paragraph ."
  ". simButtons ."
  ". canvas ."
  ". return-home-link ."
  "footer footer footer"
  ;
  gap: 12px;
}
.title, .paragraph, .simButtons, .canvas{
  margin-left: auto;
  margin-right: auto;
  max-width:751px;
}
.title{
  margin-top: 45px;
  grid-area: title;
  text-align: center;
  
}
.paragraph{
  margin-top:20px;
  grid-area: paragraph;
}
.simButtons{
  margin-top: 20px;
  grid-area: simButtons;
}
.canvas{
  grid-area: canvas;
  width:100%;
  max-width: 500px;
  border: solid black 2px;
 
}
.return-home-link{
  grid-area: return-home-link;
  margin-top: 15px;
  text-align: center;
  font-size: 19px;
}
.footer{
  display: inline;
  grid-area:footer;
  background-color: grey;
  height: 30px;
}

@media only screen and (max-width: 540px){

  h3{
    font-size: 50px;
  }
}

@media only screen and (max-width: 401px){

  h3{
    font-size: 40px;
  }
}