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

#purple{
  background-color: rebeccapurple;
  position:absolute;
  left: 8vmin; 
  top: 10vmin; 
  width: 35vmin; 
  height: 35vmin;
}

#orange{
  background-color: rgb(252, 134,55);
  position:absolute;
  left: 50vmin; 
  top: 49vmin; 
  width: 35vmin; 
  height: 35vmin;
}  
#teal{
  background-color: teal;
  position:absolute;
  left: 60vmin; 
  top: 10vmin; 
  width: 25vmin; 
  height: 25vmin;
}
#dkblue{
  background-color: darkblue;
  position:absolute;
  left: 8vmin; 
  top: 59vmin; 
  width: 25vmin; 
  height: 25vmin;
}