html{ height: 100%; }

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

#canvas{
  background-color: rgb(240, 239, 237);
  width: 60vmin;
  height: 60vmin;
  position: absolute;
  top: 27vh;
}

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

#secondring{
  background-color: rgb(41, 132, 99);
  left: 1vmin;
  top: 1vmin;
  width: 15vmin;
  height: 15vmin;
  position: absolute;
}

#thirdring{
  background-color: rgb(236, 215, 44);
  left: 22.5vmin;
  top: 1vmin;
  width: 15vmin;
  height: 15vmin;
  position: absolute;
}

#fourthring{
  background-color: rgb(68, 74, 126);
  position: absolute;
  right: 1vmin;
  top: 1vmin;
  width: 15vmin;
  height: 15vmin;
}

#fifthring{
  background-color: rgb(124, 157, 208);
  position: absolute;
  left: 1vmin;
  top: 22.5vmin;
  width: 15vmin;
  height: 15vmin;
}

#sixthring{
  background-color: rgb(45, 47, 46);
  position: absolute;
  left: 22.5vmin;
  top: 22.5vmin;
  width: 15vmin;
  height: 15vmin;
}

#seventhring{
  background-color: rgb(199, 53, 28);
  position: absolute;
  right: 1vmin;
  top: 22.5vmin;
  width: 15vmin;
  height: 15vmin;
}

#eighthring{
  background-color: rgb(209, 97, 31);
  position: absolute;
  left: 1vmin;
  bottom: 1vmin;
  width: 15vmin;
  height: 15vmin;
}

#ninthring{
  background-color: rgb(166, 194, 133);
  position: absolute;
  right: 22.5vmin;
  bottom: 1vmin;
  width: 15vmin;
  height: 15vmin;
}

#tenthring{
  background-color: rgb(102, 81, 138);
  position: absolute;
  right: 1vmin;
  bottom: 1vmin;
  width: 15vmin;
  height: 15vmin;
}