#panza {
  width: 300px;
  height: 300px;
  background-color: ivory;
  margin: 0 auto;
  box-shadow: 15px 15px 10px gray;
}

#primul-rand {
  height: 75%;
  width: 100%;
}

#patrat-mare {
  height: 100%;
  width: 75%;
}
.rosu {
  background-color: red;
}
.dreapta {
  float:right;
}
.negru {
  background-color: black;
}

#primul-despartitor{
  height:100%;
  width:3%;
}

#prima-coloana{
  height: 100%;
  width: 22%;
}

#despartitor-doi{
  height:3%;
  width:100%;
}
#patrat-mediu{
  height:48.5%;
  width:100%;
}
#patrat-mediu-doi{
  height:48.5%;
  width:100%;
}

#rand-doi {
  height: 3%;
  width: 100%;
}
#rand-trei {
  height: 22%;
  width: 100%;
}
#ultima-coloana {
  height: 100%;
    width: 5%;
}
#dreptunghi-mic {
  height: 45%;
  width: 100%;
}

#dreptunghi-mic-doi {
  height: 45%;
  width: 100%;
}
#despartitor-trei {
  height: 10%;
  width: 100%;
}
#despartitor-patru {
  height: 100%;
  width: 3%;
}
#despartitor-cinci {
  height: 100%;
  width: 3%;
}
#dreptunghi {
  height: 100%;
  width: 67%;
}
#patrat-mic {
  height: 100%;
  width: 22%;
}
.galben{
  background-color: yellow;
}
.albastru {
  background-color: blue;
}