html{height:100%;
}


head{height: 100%;
}

body{height:100%;

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


#canvas{
  background-color:rgb(63,30,120);
  width: 78vmin;
  height: 79.6vmin; 
  position:absolute;
}


#secondring{background-color:rgb(7,60,244);
  width: 26vmin;
  height: 26vmin; 
  position:absolute;
  top:0vmin;
  left:26vmin;
}

#thirdring{background-color:rgb(247,231,83);
  width: 26vmin;
  height: 26vmin; 
  position:absolute;
  top:0vmin;
  left:52vmin;
}

#fourthring{background-color:rgb(227,227,227);
  width: 26vmin;
  height: 26vmin; 
  position:absolute;
  top:26vmin;
  left:0vmin;
}

#fifthring{background-color:rgb(224,57,134);
  width: 26vmin;
  height: 26vmin; 
  position:absolute;
  top:26vmin;
  left:52vmin;
}

#sixthring{background-color:rgb(90,42,191);
  width: 26vmin;
  height: 26vmin; 
  position:absolute;
  top:52vmin;
  left:26vmin;
}

#seven{background-color:rgb(107,224,239);
  width: 26vmin;
  height: 26vmin; 
  position:absolute;
  top:52vmin;
  left:52vmin;
}

#eight{background-color:rgb(0,0,0);
  width: 78vmin;
  height: 1.6vmin; 
  position:absolute;
  top:78vmin;
  left:vmin;
}

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