html{
  overflow-x:hidden;
  font-family:Verdana;
}
nav {
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  box-shadow:0 1px 3px #444;
  border-bottom:1px solid gray;
  z-index:2;
  background-color:white;
}
nav ul{
  list-style:none;
  vertical-align:middle;
  margin:0;
  padding:0;
}
nav li{
  display:inline-block;
  font-size:3vh;
  line-height:1em;
  padding:.5em 1em;
  transition:background-color 0.2s;
}
nav li:hover{
  background-color:#ccc;
}
nav a{
  text-decoration:none;
  color:black;
}
nav a:visited{
  color:black;
}
header{
  margin-top:22px;
  margin-left:-8px;
  height:350px;
  box-shadow:2px 2px 10px #444;
}
#animation{
  background-color:rgb(200, 200, 200);
}
#info{
  width:430px;
  height:150px;
  z-index:1;
  position:absolute;
  top:122px;
  left:50vw;
  transform: translateX(-200px);
  display:flex;
}
#info img{
  background-color:white;
  box-shadow:0 0 10px #444;
  color:green;
  width:150px;
  height:100%;
  font-size:50px;
  line-height:150px;
  border-radius:75px;
  border:2px solid gray;
}
#info span{
  font-size:40px;
  padding:30px;
  padding-right:0px;
  color:black;
  font-family:sans-serif;
  text-shadow:1px 2px 4px black;
}
main{
  display:flex;
  position: relative;
  left: 50%;
  transform: translateX(calc(-30vw + 4%));
  flex-flow:row wrap;
  margin:auto 0;
  width:60vw;
}
main article{
  width:42%;
  margin:4%;
}
main article a{
  font-family:courier;
  text-decoration:none;
  color:gray;
}
main article h2{
  /*looking for font family*/
}
footer{
  width:100vw;
  margin-left:-8px;
  margin-bottom:-8px;
  padding:10px 0;
  background-color:#222;
  color:white;
  text-align:center;
  height:50px;
  line-height:10px;
  font-size:20px;
}
footer a{
  color:white;
  text-decoration:none;
}