html{height: 100%;}

p{height:100%;
  color:black;
  padding: 0vmin;
}

body{height:100%;
  margin: 0;
  display:flex;
  align-items: center;
  justify-content: center;}

#canvas{
  background-color: black;
  width: 70vmin;
  height: 70vmin;
  position: absolute;
}

#second{
  background-color:rgb(212,209,205);
  width: 15.6vmin;
  height: 21vmin;
  position: absolute;
}

#third{
  background-color:rgb(197,40,29);
  width: 52vmin;
  height: 50vmin;
  position:absolute;
  left:18vmin
}

#fourth{
  background-color:rgb(212,209,205);
  width: 15.6vmin;
  height: 25vmin;
  position: absolute;
  top: 25vmin;
}

#fifth{
  background-color:rgb(34,87,144);
  width: 15.6vmin;
  height: 17.8vmin;
  position: absolute;
  top: 52.2vmin;
}

#sixth{
  background-color:rgb(212,209,205);
  width: 43vmin;
  height: 17.8vmin;
  position: absolute;
  top: 52.2vmin;
  left: 18vmin
}

#seventh{
  background-color:rgb(212,209,205);
  width: 6.2vmin;
  height: 6.8vmin;
  position: absolute;
  top: 52.2vmin;
  left: 63.8vmin
}

#eighth{
  background-color:rgb(223,203,107);
  width: 6.2vmin;
  height: 8vmin;
  position: absolute;
  top: 62vmin;
  left: 63.8vmin
}

nav {
  text-align: center;
  z-index: 1;
  position: absolute;
  left:0;
  top:0px;
  height: 7vmin;
  width: 100%

}

nav a{
  display: inline-block;
  margin-top: 5vmin;
  padding: 3vmin;
  text-decoration:none;
  font-family: verdana, sans-serif;
  color:dimgray;
  font-size: 15px;
}

.active {
  color: darkgrey;