html{ height: 100%; }

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

#canvas{
  background-color: rgb(245, 244, 241);
  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(251, 228, 60);
  left:10vmin;
  top: 8vmin;
  width:8.57142vmin;
  height:44vmin;
  position: absolute;
}

#thirdring{
  background-color: rgb(50, 49, 45);
  left:18.57142vmin;
  top:8vmin;
  width:8.57142vmin;
  height:44vmin;
  position: absolute;
}

#fourthring{
  background-color: rgb(182, 225, 234);
  position: absolute;
  left:27.14284vmin;
  top:8vmin;
  width:8.57142vmin;
  height:44vmin;
}

#fifthring{
  background-color: rgb(251, 228, 60);
  position: absolute;
  right:27.14284vmin;
  top:8vmin;
  width:8.57142vmin;
  height:44vmin;
}

#sixthring{
  background-color: rgb(50, 49, 45);
  position: absolute;
  right: 18.57142vmin;
  top:8vmin;
  width:8.57142vmin;
  height:44vmin;
}

#seventhring{
  background-color: rgb(182, 225, 234);
  position: absolute;
  right: 10vmin;
  top: 8vmin;
  width:8.57142vmin;
  height:44vmin;
}