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: white;
  width: 94vmin;
  height: 94vmin;
  margin: 0 auto;
  position: relative;
  }

#orangeSquare{
  width: 90%;
  height: 90%;
  position: absolute;
  left: 10%;
  top: 10%;
  background-color: rgb(208, 91, 27);
}
#greenSquare{
  width: 90%;
  height: 45%;
  position: absolute;
  left: 10%;
  top: 55%;
  background-color: rgb(99, 125, 62);
}

#whiteSquare{
  width: 65%;
  height: 55%;
  position: absolute;
  left: 15%;
  top: 15%;
  background-color: WhiteSmoke;
}

#redSquare{
  width: 75%;
  height: 78%;
  position: absolute;
  left: 15%;
  top: 10%;
  background-color: rgb(185, 35, 50);
}

#blueSquare{
  width: 85%;
  height: 90%;
  position: absolute;
  left: 15%;
  top: 10%;
  background-color: rgb(27, 94, 123);
}

#orangeSquare2{
  width: 65%;
  height: 5%;
  position: absolute;
  left: 15%;
  top: 10%;
  background-color: rgb(208, 91, 27);
}

#greenSquare2{
  width: 80%;
  height: 15%;
  position: absolute;
  left: 10%;
  top: 85%;
  background-color: rgb(99, 125, 62);
}

#darkblueSquare{
  width: 30%;
  height: 40%;
  position: absolute;
  left: 50%;
  top: 15%;
  background-color: rgb(25, 40, 65);
}