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{
  width: 94vmin;
  height: 94vmin;
  margin: 0 auto;
  position: relative
  
}
#redSquare{
  width: 70%;
  height: 33%;
  position: absolute;
  left: 10%;
  top: 10%;
  background-color: red;
}
  
#whiteSquare{
    width: 44%;
    height: 44%;
    position: absolute;
    left: 20%;
    top: 20%;
  background-color: WhiteSmoke;
}

#blueSquare{
  width: 35%;
  height: 44%;
  position: absolute;
  left: 65%;
  top: 10%;
  background-color: blue;

}
#yellowSquare{
  width: 80%;
  height: 35%;
  position: absolute;
  left: 20%;
  top: 66%;
  background-color: yellow;


}
#whiteSquare2{
  width: 10%;
  height: 10%;
  position: absolute;
  left: 20%;
  top: 10%;
  background-color: WhiteSmoke;

}
#whiteSquare4{
  width: 40%;
  height: 10%;
  position: absolute;
  left: 60%;
  top: 55%;
  background-color: WhiteSmoke;
}

#blackSquare{
  width: 3%;
  height: 90%;
  position: absolute;
  left: 20%;
  top: 10%;
  background-color: black;

}
#blackSquare2{
  width: 3%;
  height: 54%;
  position: absolute;
  left: 64%;
  top: 10%;
  background-color: black;

}
#blackSquare3{
  width: 90%;
  height: 3%;
  position: absolute;
  left: 10%;
  top: 10%;
  background-color: black;

}
#blackSquare4{
  width: 3%;
  height: 90%;
  position: absolute;
  left: 10%;
  top: 10%;
  background-color: black;

}
#blackSquare5{
  width: 80%;
  height: 3%;
  position: absolute;
  left: 20%;
  top: 64%;
  background-color: black;
}
#blackSquare6{
  width: 3%;
  height: 90%;
  position: absolute;
  left: 98%;
  top: 10%;
  background-color: black;
}
#blackSquare7{
  width: 91%;
  height: 3%;
  position: absolute;
  left: 10%;
  top: 100%;
  background-color: black;

}
#blackSquare8{
  width: 35%;
  height: 3%;
  position: absolute;
  left: 65%;
  bottom: 45%;
  background-color: black;

}
#blackSquare9{
  width: 45%;
  height: 3%;
  position: absolute;
  left: 20%;
  bottom: 78%;
  background-color: black;

}
#blackSquare10{
  width: 3%;
  height: 9%;
  position: absolute;
  left: 28%;
  top: 10%;
  background-color: black;

}
#whiteSquare3{
  width: 10%;
  height: 60%;
  position: absolute;
  left: 25%;
  top: 40%;
  left: 10%;
  background-color: WhiteSmoke;
}

#blackSquare11{
  width: 12%;
  height: 3%;
  position: absolute;
  left: 10%;
  bottom: 60%;
  background-color: black;

}