html{ height: 100%; }

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

#canvas{
  background-color: rgb(131, 138, 154);
  width: 55vmin;
  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(14, 36, 47);
  right: 0vmin;
  top: 0vmin;
  width: 27.5vmin;
  height: 80vmin;
  position: absolute;
}

#thirdring{
  background-color: rgb(203, 186, 160);
  position: absolute;
  left: 18.5vmin;
  top: 28vmin;
  width: 18vmin;
  height: 52vmin;
}

#fourthring{
  background-color: rgb(113, 80, 37);
  left: 18.5vmin;
  top: 28vmin;
  width: 18vmin;
  height: 4vmin;
  position: absolute;
}

#fifthring{
  background-color: black;
  position: absolute;
  left: 18.5vmin;
  top: 41.6vmin;
  width: 18vmin;
  height: 9.6vmin;
}

#sixthring{
  background-color: black;
  position: absolute;
  left: 18.5vmin;
  top: 60.8vmin;
  width: 18vmin;
  height: 9.6vmin;
}