#canvas {
  width: 90vmin;
  margin: 20vmin auto auto auto;
  height: 60vmin;
  background-color: #f02401;
  position: relative;
}
#square {
  left: 1%;
  top: 8%;
  width: 32%;
  height: 86%;
  background-color: #00a026;
  position: absolute;
}
#oval1 {
  left: 62%;
  top: 8%;
  width: 17%;
  height: 40%;
  background-color: #0072cb;
  position: absolute;
  border-top-left-radius: 100% 100%;
}
#oval2 {
  left: 79%;
  top: 8%;
  width: 3%;
  height: 40%;
  background-color: #0072cb;
  position: absolute;
}
#oval3 {
  left: 82%;
  top: 8%;
  width: 17%;
  height: 40%;
  background-color: #0072cb;
  position: absolute;
  border-top-right-radius: 100% 100%;
}
#oval4 {
  left: 62%;
  top: 48%;
  width: 37%;
  height: 8%;
  background-color: #0072cb;
  position: absolute;
}
#oval5 {
  left: 62%;
  top: 56%;
  width: 17%;
  height: 40%;
  background-color: #0072cb;
  position: absolute;
  border-bottom-left-radius: 100% 100%;
}
#oval6 {
  left: 79%;
  top: 56%;
  width: 3%;
  height: 40%;
  background-color: #0072cb;
  position: absolute;
}
#oval7 {
  left: 82%;
  top:  56%;
  width: 17%;
  height: 40%;
  background-color: #0072cb;
  position: absolute;
  border-bottom-right-radius: 100% 100%;
}