*{ 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: 20vmin; 
  height: 20vmin;
}

#blue{
  background-color:rgb(10,78,148);
  position:absolute;
  left: 23vmin; 
  top: 23vmin; 
  width: 68.3vmin; 
  height: 33vmin;
}

#yellow{
  background-color:rgb(253,240,53);
  position:absolute;
  left: 69vmin; 
  top: 69vmin; 
  width: 22.3vmin; 
  height: 22.3vmin;
}

#black1{
  background-color: black;
  position: absolute;
  left: 20vmin; 
  top: 0vmin; 
  width: 3vmin; 
  height: 91.3vmin;
}

#black2{
  background-color: black;
  position: absolute;
  left: 0vmin; 
  top: 20vmin; 
  width: 91.3vmin; 
  height: 3vmin;
}

#black3{
  background-color: black;
  position: absolute;
  left: 20vmin; 
  top: 55vmin; 
  width: 71.3vmin; 
  height: 3vmin;
}

#black4{
  background-color: black;
  position: absolute;
  left: 66vmin; 
  top: 55vmin; 
  width: 3vmin; 
  height: 36.3vmin;
}

#black5{
  background-color: black;
  position: absolute;
  left: 69vmin; 
  top: 66vmin; 
  width: 22.3vmin; 
  height: 3vmin;
}