@font-face{
	font-family: 'RPGS';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("PressStart2P.ttf");
}
body,button{
  font-family:'RPGS';
}
*{
  margin:0;
  padding:0;
}
body{
  background-color:#111;
  color:#eee;
  font-size:1.8vh;
  padding-bottom:3vh;
}
header{
  height:10vh;
  padding-left:10vh;
}
nav, article{
  text-align:center;
  box-shadow:1px 1px 3px #eee;
  margin:0 1vw 1vh 1vw;
}
header h2{
  font-size:3.5vh;
  padding-top:3.5vh;
  text-shadow:0.3vh 0.3vh 1px #888;
}
nav{
  background-color:#222;
  padding:1vh;
}
nav ul{
  list-style:none;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap:1vh;
}
nav ul li a{
  font-size:2vw;
  position:relative;
  top:0;
  left:0;
  transition:0.2s;
  text-decoration:none;
  background-color:#07e;
  color:#fff;
  display:block;
  padding:0.5vw 0;
  border:1px solid #3cf;
}
button{
  font-size:2vw;
  position:relative;
  transition:0.2s;
  background-color:#07e;
  color:#fff;
  padding:0.5vw;
  margin-bottom:2vw;
  border:1px solid #3cf;
}
nav ul li a:hover, button:hover{
  top:0.2vw;
  left:0.2vw;
  color:#113;
  background-color:#3cf;
  border-color:#fff;
}
h3{
  text-align:center;
}
article{
  text-align:left;
  padding:1vw;
}
article p{
  padding-bottom:2vw;
}
article a{
  color:#3cf;
}
article div{
  text-align:center;
}
article canvas{
  background-color:#333;
  image-rendering:pixelated;
}
footer{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  text-align:center;
  font-size:2vh;
  background-color:#eee;
  color:#111;
}
footer a{
  color:#07e;
}
@media (max-width:100vh){
  body{
    font-size:3.5vw;
    padding:0 1vw 3vh 1vw;
  }
  nav ul{
    grid-template-columns:1fr 1fr;
  }
  nav ul li a{
  	font-size:3.5vw;
    padding:1vw 0;
  }
  button{
  	font-size:3.5vw;
  	padding:1vw;
  }
}