html{ height: 100%; }

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

#canvas{
  background-color:rgb(59, 73, 110);
  width:80vmin;
  height:60vmin;
  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(29, 23, 40);
  left:16vmin;
  top:0vmin;
  width:8vmin;
  height:60vmin;
  position: absolute;
}

#thirdring{
  background-color:rgb(22, 83, 80);
  left:24vmin;
  top:0vmin;
  width:8vmin;
  height:60vmin;
  position: absolute;
}

#fourthring{
  background-color:rgb(254, 196, 88);
  position: absolute;
  left:32vmin;
  top:0vmin;
  width:8vmin;
  height:60vmin;
}

#fifthring{
  background-color:rgb(33, 27, 42);
  position: absolute;
  left:40vmin;
  top:0vmin;
  width:8vmin;
  height:60vmin;
}

#sixthring{
  background-color:rgb(255, 123, 55);
  position: absolute;
  left:48vmin;
  top:0vmin;
  width:8vmin;
  height:60vmin;
}

#seventhring{
  background-color:rgb(125, 76, 55);
  position: absolute;
  left:56vmin;
  top:0vmin;
  width:8vmin;
  height:60vmin;
}

#eighthring{
  background-color:rgb(255, 123, 55) ;
  position: absolute;
  left:48vmin;
  top:0vmin;
  width:8vmin;
  height:60vmin;
}

#ninthring {
  background-color:rgb(33, 27, 42);
  position: absolute;
  left:64vmin;
  top:0vmin;
  width:8vmin;
  height:60vmin;
}

#tenthring {
  background-color:rgb(22, 83, 80);
  position: absolute;
  left:72vmin;
  top:0vmin;
  width:8vmin;
  height:60vmin;
}