html{ height: 100%; }

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

#canvas{
  background-color: rgb(249, 250, 252);
  width: 50vmin;
  height: 80vmin;
  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(196, 195, 193);
  left:2vmin;
  top:0vmin;
  width:46vmin;
  height:2vmin;
  position: absolute;
}

#thirdring{
  background-color: rgb(64, 63, 68);
  left:2vmin;
  top:2vmin;
  width:46vmin;
  height:76vmin;
  position: absolute;
}

#fourthring{
  background-color: rgb(66, 69, 74);
  position: absolute;
  left: 2vmin;
  top: 17.2vmin;
  width: 46vmin;
  height: 45.6vmin;
}

#fifthring{
  background-color: rgb(52, 52, 54);
  position: absolute;
  left: 17.3vmin;
  top: 17.2vmin;
  width: 15.3vmin;
  height: 45.6vmin;
}

#sixthring{
  background-color: rgb(64, 63, 68);
  position: absolute;
  left: 2vmin;
  top: 32.4vmin;
  width: 46vmin;
  height: 15.2vmin;
}