body {
	margin: 0px;
}

#red {
  width: calc(50% - 14px);
  height: calc(50vh - 14px);
  background: #ff000044;
  float: left;
  border: 7px solid #000;
}
	
	#blue {
 width: calc(50% - 14px);
  height: calc(50vh - 14px);
  background: #0000ff44;
  float: left;
		 border: 7px solid #000;
}

	#yellow {
 width: calc(50% - 14px);
  height: calc(50vh - 14px);
  background: #ffff0044;
  float: left;
		 border: 7px solid #000;
}


	#green {
 width: calc(50% - 14px);
  height: calc(50vh - 14px);
  background: #00ff0044;
  float: left;
		 border: 7px solid #000;
}


#soundsArea {
  position: absolute;
  right: 0;
  background: #fff;
  top: 0;
  padding: 20px;
	display: none;
	z-index: 3;
}

#soundsArea ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

#soundsArea li {
  margin: 20px 0px;
}

#sounds {
  position: absolute;
  right: 20px;
  top: 20px;
	z-index: 2;
}