*{ box-sizing:border-box; }
body{ margin: 3vmin;}
#canvas{ 
  width: 94vmin; 
  height:94vmin; 
  max-width:600px; 
  max-height:600px; 
  margin:0 auto;
  background-color: whitesmoke; 
  position:relative;
}

#red{ 
  background-color:rgb(234,32,45);
  position:absolute;
  left: 0vmin; 
  top: 0vmin; 
  width: 25vmin; 
  height: 20vmin;
}
#red2{ 
  background-color:rgb(234,32,45);
  position:absolute;
  left: 15vmin; 
  top: 20vmin; 
  width: 10vmin; 
  height: 50vmin;
}

#yellow{
  background-color:rgb(253,240,53);
  position:absolute;
  left: 0vmin; 
  top: 69vmin; 
  width: 91.3vmin; 
  height: 25vmin;
}
#yellow2{
  background-color:rgb(253,240,53);
  position:absolute;
  left: 0vmin; 
  top: 0vmin; 
  width: 4vmin; 
  height: 94vmin;
}
#violet{
  background-color:palevioletred;
  position:absolute;
  left: 45vmin; 
  top: 30vmin; 
  width: 27vmin; 
  height: 64vmin;
}
#grey{
  background-color:grey;
  position:absolute;
  left: 70vmin; 
  top: 30vmin; 
  width: 5vmin; 
  height: 64vmin;
}
#green{
  background-color:olive;
  position:absolute;
  left: 85vmin; 
  top: 0vmin; 
  width: 5vmin; 
  height: 69vmin;
}
#blue{
  background-color: lightblue;
  position:absolute;
  left: 50vmin; 
  top: 5vmin; 
  width: 41.3vmin; 
  height: 10vmin;
}