html{ height: 100%; }

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

#canvas{
  background-color:rgb(256, 256, 256);
  width:76vmin;
  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(35, 31, 32);
  left:1vmin;
  top:1vmin;
  width:30vmin;
  height:50vmin;
  position: absolute;
}

#thirdring{
  background-color:rgb(237, 237, 237);
  left:11vmin;
  top:18vmin;
  width:34vmin;
  height:24vmin;
  position: absolute;
}

#fourthring{
  background-color:rgb(35, 31, 32);
  position: absolute;
  right:1vmin;
  bottom: 1vmin;
  width:30vmin;
  height:50vmin;
}

#fifthring{
  background-color:rgb(236, 27, 36);
  position: absolute;
  right:11vmin;
  bottom:1vmin;
  width:1vmin;
  height:50vmin;
}