html{height:100%;}


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


#canvas{
  background-color:rgb(249,227,8);
  width: 84vmin;
  height: 70vmin; 
  position:absolute;
}


#secondring{background-color:rgb(45,42,39);
  width: 12vmin;
  height: 70vmin; 
  position:absolute;
  left:12vmin
  
  
}
#thirdring{background-color:rgb(189,222,231);
  width: 12vmin;
  height: 70vmin;
  position:absolute;
  left:24vmin}

#fourthring{background-color:rgb(243,242,238);
  width: 12vmin;
  height: 70vmin;
  position:absolute;
  left:36vmin}

#fifthring{background-color:rgb(45,42,39);
  width: 12vmin;
  height: 70vmin;
  position:absolute;
  left:60vmin}

#sixthring{background-color:rgb(189,222,231);
  width: 12vmin;
  height: 70vmin;
  position:absolute;
  left:72vmin}

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