@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');

*{ box-sizing:border-box; }
body{ margin: 3vmin;}
#canvas{
  width: 100vmin;
  height: 125vmin;
  background-color: rgb(237,228,214);
  margin: 0 auto;
  position: relative;
}
#blue{ 
  background-color: rgb(119,165,212);
  position:absolute;
  left: 10vmin; 
  top: 20vmin; 
  width: 40vmin; 
  height: 40vmin;
}
#orange{ 
  background-color: rgb(230,122,75);
  position:absolute;
  left: 50vmin; 
  top: 60vmin; 
  width: 40vmin; 
  height: 40vmin;
}
#black{ 
  background-color: rgb(40,39,44);
  position:absolute;
  left: 58vmin; 
  top: 20vmin; 
  width: 32vmin; 
  height: 32vmin;
}
#green{ 
  background-color: rgb(75,169,97);
  position:absolute;
  left: 10vmin; 
  top: 68vmin; 
  width: 32vmin; 
  height: 32vmin;
}