body {
 font-family: "Helvetica", sans-serif, "verdana";
    margin: auto}

#nav{
  border:1px solid #ccc;
  border-width:1px 0;
  list-style:none;
  margin:0;
  padding:0;
  text-align:center;
}

#canvas{
  background-color: WhiteSmoke;
  width: 94vmin;
  height: 94vmin;
  margin: 0 auto;
  position: relative
}

#blueSquare{
  width: 23%;
  height: 77%;
  position: absolute;
  left: 10%;
  top: 20%;
  background-color: rgb(55 67 159);
}

#blueSquare2{
  width: 40%;
  height: 15%;
  position: absolute;
  left: 10%;
  top: 5%;
  background-color: rgb(55 67 159);
}

#blueSquare3{
  width: 14%;
  height: 90%;
  position: absolute;
  left: 57%;
  top: 5%;
  background-color: rgb(55 67 159);
}

#blueSquare4{
  width: 7%;
  height: 60%;
  position: absolute;
  left: 83%;
  top: 5%;
  background-color: rgb(55 67 159);
}

#blackSquare{
  width: 34%;
  height: 15%;
  position: absolute;
  left: 57%;
  top: 83%;
  background-color: rgb(39 40 43);
}

#blackSquare2{
  width: 30%;
  height: 15%;
  position: absolute;
  left: 10%;
  top: 20%;
  background-color: rgb(39 40 43);
}

#blackSquare3{
  width: 15%;
  height: 60%;
  position: absolute;
  left: 68%;
  top: 5%;
  background-color: rgb(39 40 43);
}

#yellowSquare{
  width: 8%;
  height: 90%;
  position: absolute;
  left: 57%;
  top: 5%;
  background-color: rgb(248 228 91);
}

#yellowSquare2{
  width: 44%;
  height: 100%;
  position: absolute;
  left: 130%;
  top: %;
  background-color: rgb(248 228 91);
}