html{
  height:100%;
}

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

#canvas{
  width: 80vmin;
  height: 80vmin;
  background-color: rgb(174, 194, 219);
  position: relative;
}

#secondring{
  background-color: rgb(174,174,172);
  position: absolute;
  left: 8vmin;
  top: 10vmin;
  width: 65vmin;
  height: 65vmin;
}

#thirdring{
  background-color: rgb(197,181,118);
  position: absolute;
  left: 15vmin;
  top: 20vmin;
  width: 50vmin;
  height: 50vmin;
}

#fourthring{
  background-color: rgb(216,186,94);
  position: absolute;
  left: 25vmin;
  top: 35vmin;
  width: 30vmin;
  height: 30vmin;
}