/*
This is a Cascading Style Sheet (CSS).
It describes rules for styling your HTML markup.

To use this file, place the following <link> tag anywhere in the <head> of your HTML file, making sure that the filename after "href" matches the name of your file....

    <head>
        <link rel="stylesheet" href="style.css">
    </head>

Learn more about CSS at https://developer.mozilla.org/en-US/docs/Web/Guide/CSS

When you're done, you can delete all of this grey text, it's just a comment.
*/

/* Fonts from Google Fonts - more at https://fonts.google.com */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');

body {

  margin: 3vims;

}

#canvas{
  
  width:70vmin;
  height: 105vmin;
  margin: 0 auto;
  position:relative;
  background-color:white;
  
  
}

#blue{


  width:93%;
  height:100%;
  margin: 0 auto;
  position:absolute;
  background-color:#2e3b97;
 
}


#white1{
  
  width:10%;
  height:73%;
  top:27%;
  left:19%;
  position:absolute;
  background-color:white;
  }

#yellow{

  width:11%;
  height:85%;
  top:15%;
  left:29%;
  position:absolute;
  background-color:#f5e14a;
}

#white2{

  width:7%;
  height:100%;
  left:40%;
  position:absolute;
  background-color:white;
}

#yellow2{

  width:11%;
  height:100%;
  left:47%;
  position:absolute;
  background-color:#f5e14a;
}

#black1{

  width:20%;
  height:60%;
  left:67%;
  position:absolute;
  background-color:#000000;
}

#black2{

  width:29%;
  height:13%;
  top:15%;
  position:absolute;
  background-color:#000000;
}


#white3{

  width:26%;
  height:40%;
  top:60%;
  left:67%;
  position:absolute;
  background-color:white;
}

#black3{

  width:35%;
  height:20%;
  top:80%;
  left:58%;
  position:absolute;
  background-color:#000000;
}

