html{ height: 100%; }

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

#canvas{
  background-color: black;
  width: 80vmin;
  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:red;
  right: 0vmin;
  top: 0vmin;
  width: 60vmin;
  height: 60vmin;
  position: absolute;
}

#thirdring{
  background-color: white;
  left: 20vmin;
  bottom: 0vmin;
  width: 50vmin;
  height: 17vmin;
  position: absolute;
}

#fourthring{
  background-color: white;
  position: absolute;
  right: 0vmin;
  bottom: 11vmin;
  width: 7vmin;
  height: 6vmin;
}

#fifthring{
  background-color: yellow;
  position: absolute;
  right: 0vmin;
  bottom: 0vmin;
  width: 7vmin;
  height: 8vmin;
}

#sixthring{
  background-color: blue;
  position: absolute;
  left: 0vmin;
  bottom: 0vmin;
  width: 17vmin;
  height: 17vmin;
}

#seventhring{
  background-color: white;
  position: absolute;
  left: 0vmin;
  bottom: 20vmin;
  width: 17vmin;
  height: 30vmin;
}

#eighthring{
  background-color: white;
  position: absolute;
  left: 0vmin;
  top: 0vmin;
  width: 17vmin;
  height: 24.5vmin;
}