@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: 90vmin;
  height: 170vmin;
  background-color: rgb(226,223,219);
  margin: 0 auto;
  position: relative;
}
#blue{ 
  background-color: rgb(46,57,142);
  position:absolute;
  left: 10vmin; 
  top: 5vmin; 
  width: 70vmin; 
  height: 94%;
}
#white{ 
  background-color: rgb(239,239,239);
  position:absolute;
  left: 47%; 
  top: 5vmin; 
  width: 5vmin; 
  height: 94%;
}
#black1{ 
  background-color: rgb(37,40,41);
  position:absolute;
  left: 11%; 
  top: 12%; 
  width: 27%; 
  height: 7%;
}
#yellow1{ 
  background-color: rgb(244,226,102);
  position:absolute;
  left: 38%; 
  top: 12%; 
  width: 9%; 
  height: 85%;
}
#yellow1{ 
  background-color: rgb(244,226,102);
  position:absolute;
  left: 38%; 
  top: 12%; 
  width: 9%; 
  height: 85%;
}
#white1{ 
  background-color: rgb(239,239,239);
  position:absolute;
  left: 31%; 
  top: 19%; 
  width: 7%; 
  height: 78%;
}
#black2{ 
  background-color: rgb(37,40,41);
  position:absolute;
  left: 52.5%; 
  top: 87%; 
  width: 36%; 
  height: 10%;
}
#white2{ 
  background-color: rgb(239,239,239);
  position:absolute;
  left: 70%; 
  top: 70%; 
  width: 19%; 
  height: 17%;
}
#black3{ 
  background-color: rgb(37,40,41);
  position:absolute;
  left: 70%; 
  top: 3%; 
  width: 14%; 
  height: 67%;
}
#yellow2{ 
  background-color: rgb(244,226,102);
  position:absolute;
  left: 52.5%; 
  top: 2.8%; 
  width: 10%; 
  height: 84%;
}