html{ height: 100%; }

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

#canvas{
  background-color: rgb(170, 163, 147);
  width: 60vmin;
  height: 80vmin;
  position: absolute;
  top: 27vh;
}

@media only screen and (orientation:portrait){
  #canvas{
    position: relative !important;
  }
}

#secondring{
  background-color: rgb(171, 123, 0);
  right: 9vmin;
  top: .25vmin;
  width: 40vmin;
  height: 40vmin;
  border-radius: 50%;
  position: absolute;
}

#thirdring{
  background-color: rgb(171, 123, 0);
  left: 5vmin;
  bottom: 0vmin;
  width: 40vmin;
  height: 40vmin;
  border-radius: 50%;
  position: absolute;
}

#fourthring{
  background-color:rgb(170, 163, 147);
  position: absolute;
  left: 15vmin;
  bottom: 10vmin;
  width: 20vmin;
  height: 20vmin;
  border-radius: 50%;
}

#fifthring{
  background-color: rgb(165, 165, 165);
  position: absolute;
  left: 10vmin;
  bottom: 20vmin;
  width: 38vmin;
  height: 2vmin;
}

#sixthring{
  background-color: rgb(165, 165, 165);
  position: absolute;
  left: 10vmin;
  top: 27vmin;
  width: 38vmin;
  height: 2vmin;
}

#seventhring{
  background-color: rgb(165, 165, 165);
  position: absolute;
  right: 12vmin;
  top: 27vmin;
  width: 2vmin;
  height: 33vmin;
}

#eighthring{
  background-color: rgb(165, 165, 165);
  position: absolute;
  left: 10vmin;
  top: 27vmin;
  width: 2vmin;
  height: 33vmin;
}

#ninthring{
  background-color: white;
  position: absolute;
  left: 0vmin;
  top: 0vmin;
  width: 10vmin;
  height: 80vmin;
}

#tenthring{
  background-color: white;
  position: absolute;
  right: 0vmin;
  top: 0vmin;
  width: 12vmin;
  height: 80vmin;
}

#eleventhring{
  background-color: white;
  position: absolute;
  left: 0vmin;
  top: 0vmin;
  width: 60vmin;
  height: 27vmin;
}

#twelfthring{
  background-color: white;
  position: absolute;
  left: 0vmin;
  bottom: 0vmin;
  width: 60vmin;
  height: 20vmin;
}