html{
  height:100%;
}

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

#canvas{
  width: 70vmin;
  height: 90vmin;
  background-color: rgb(137,143,158);
  position: relative;
}

#secondring{
  background-color: rgb(20,38,49);
  position: absolute;
  left: 35vmin;
  top:0vmin;
  width: 35vmin;
  height: 90vmin;
}

#thirdring{
  background-color: rgb(196,182,159);
  position: absolute;
  left: 23vmin;
  top: 40vmin;
  width: 25vmin;
  height: 50vmin;
}

#fourthring{
  background-color: rgb(113,85,50);
  position: absolute;
  left: 23vmin;
  top: 36vmin;
  width: 25vmin;
  height: 4vmin;
}

#fifthring{
  background-color: black;
  position: absolute;
  left: 23vmin;
  top: 49vmin;
  width: 25vmin;
  height: 12vmin;
}

#sixthring{
  background-color: black;
  position: absolute;
  left: 23vmin;
  top: 70vmin;
  width: 25vmin;
  height: 12vmin;
}