html{height:100%;}


body{height:100%;

  margin: 0;
  display:flex;  
  align-items:center;
  justify-content:center;
  padding: 160px;
}


#canvas{
  background-color:rgb(64,63,68);
  width: 69vmin;
  height: 120vmin; 
  position:absolute;
  margin-top:5vmin;

}


#secondring{background-color:rgb(67,68,73);
  width: 23vmin;
  height: 24vmin; 
  position:absolute;
  top:24vmin;}
    
  #thirdring{background-color:rgb(54,53,58);
      width: 23vmin;
      height: 24vmin; 
      position:absolute;
    top:24vmin;
left:23vmin;}

#fourthring{background-color:rgb(67,68,73);
  width: 23vmin;
  height: 24vmin; 
  position:absolute;
  top:24vmin;
  left:46vmin;}

#fifthring{background-color:rgb(67,68,73);
  width: 23vmin;
  height: 24vmin; 
  position:absolute;
  top:72vmin;
  left:46vmin;}

#sixthring{background-color:rgb(67,68,73);
  width: 23vmin;
  height: 24vmin; 
  position:absolute;
  top:72vmin;}
  
  #seven{background-color:rgb(54,53,58);
    width: 23vmin;
    height: 24vmin; 
    position:absolute;
    top:72vmin;
    left:23vmin;}

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;
}