.title{
  height: 8em;
}

.title label {
  font-family: comicsans, sans-serif;
  color: #362f2f;
  top: 42%;
  font-size: 0.9em;
}

.character-img {
  bottom: 0;
  height: 37%;
}
.character-img.teacher {
  height: 55%;
  left: 2%;
}

.character-img.deepak {
  left: 28%;
}
.character-img.rohan {
  left: 53%;
}
.character-img.muna {
  left: 75%;
}

.character-name {
  bottom: 2%;
  left: 20%;
}

.character-name.teacherdiv {
  left: 14%;
  bottom: 50%;
  color: #557c55;
}

.character-name.deepakdiv {
  left: 38%;
  color: #557c55;
}

.character-name.rohandiv {
  left: 62%;
  color: #435585;
}
.character-name.munadiv {
  left: 83%;
  color: #ff6c22;
}

.character {
  width: 24%;
}

.character:not(.character_A){
  bottom: 36%;
}
 
.toptextclass{
  color: #000;
}

.character_A .toptextclass {
  background-color: #D3CDCD; 
}
.character_B .toptextclass {
  background-color: #CBEAEC; 
}
.character_C .toptextclass {
  background-color: #80D2D7; 
}
.character_D .toptextclass {
  background-color: #FBB03B;
  color: #424242;
}

.character_A :is(.characterSpeechbox, .checkboxOptionBlock) {
  background: #717171;
  color: #fff;
}
.character_B :is(.characterSpeechbox, .checkboxOptionBlock) {
  background: #B3EAEE; 
}
.character_C :is(.characterSpeechbox, .checkboxOptionBlock) {
  background: #21C6CF; 
}
.character_D :is(.characterSpeechbox, .checkboxOptionBlock) {
  background: #FA8F69; 
}

.option {
  color: #424242;
}