html{ height: 100%; }

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

#canvas{
  background-color:rgb(69, 24, 125);
  width:75vmin;
  height:77vmin;
  position: absolute;
  top: 27vh;
}

@media only screen and (orientation:portrait){
  #canvas{
    position: relative !important;
  }
}

@media (max-width:480px){
  #canvas{
    top: 40vh;
  }
}

#secondring{
  background-color:rgb(2, 53, 254);
  left:25vmin;
  top:0vmin;
  width:25vmin;
  height:25vmin;
  position: absolute;
}

#thirdring{
  background-color:rgb(249, 232, 30);
  left:50vmin;
  top:0vmin;
  width:25vmin;
  height:25vmin;
  position: absolute;
}

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

#fifthring{
  background-color:rgb(244, 23, 136);
  position: absolute;
  left:50vmin;
  top:25vmin;
  width:25vmin;
  height:25vmin;
}

#sixthring{
  background-color:rgb(99, 30, 199);
  position: absolute;
  left:25vmin;
  top:50vmin;
  width:25vmin;
  height:25vmin;
}

#seventhring {
  background-color:rgb(35, 227, 242);
  position: absolute;
  left:50vmin;
  top:50vmin;
  width:25vmin;
  height:25vmin;
}

#eighthring {
  background-color:rgb(0, 0, 0);
  position: absolute;
  left:0vmin;
  top:75vmin;
  width:75vmin;
  height:2vmin;
}