HTML{
  height: 100%;
}

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

#canvas{
  background-color:  rgb(8,19,20);
  width: 80vmin;
  height: 80vmin;
  position: relative;
}

#square1{
  background-color:  rgb(215,214,209);
  position: absolute;
  left: 0vmin;
  top: vmin;
  width: 20vmin;
  height: 25vmin; 
}

#square2{
  background-color:  rgb(215,214,209);
  position: absolute;
  left: vmin;
  top: 31vmin;
  width: 20vmin;
  height: 28vmin; 
}

#square3{
  background-color:  rgb(12,90,150);
  position: absolute;
  left: vmin;
  top: 62vmin;
  width: 20vmin;
  height: 18vmin; 
}

#square4{
  background-color:  rgb(208,34,35);
  position: absolute;
  left: 23vmin;
  top: vmin;
  width: 57vmin;
  height: 59vmin; 
}

#square5{
  background-color:  rgb(215,214,209);
  position: absolute;
  left: 23vmin;
  top: 62vmin;
  width: 46vmin;
  height: 18vmin; 
}

#square6{
  background-color:  rgb(215,214,209);
  position: absolute;
  left: 72vmin;
  top: 62vmin;
  width: 8vmin;
  height: 7vmin; 
}
#strip7{
  background-color:  rgb(225,205,100);
  position: absolute;
  left: 72vmin;
  top: 72vmin;
  width: 8vmin;
  height: 8vmin; 
}