html{
  height:100%;
}

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

#canvas{
  width: 90vmin;
  height: 70vmin;
  background-color: white;
  position: relative;
}

#secondring{
  background-color: black;
  position: absolute;
  left: 0vmin;
  top:0vmin;
  width: 35vmin;
  height: 55vmin;
}

#thirdring{
  background-color: lightgrey;
  position: absolute;
  left: 10vmin;
  top: 18vmin;
  width: 60vmin;
  height: 30vmin;
}

#fourthring{
  background-color: black;
  position: absolute;
  left: 55vmin;
  top: 10vmin;
  width: 35vmin;
  height: 55vmin;
}

#fifthring{
  background-color: red;
  position: absolute;
  left: 81vmin;
  top: 10vmin;
  width: 1vmin;
  height: 55vmin;
}