body {

  height: 100vh;
  width: 100%;
  background-color: #ffdc3d;
}

.box {
  width: 620px;
  height: 490px;
  margin: 30px auto;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0px 3px 18px 3px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-wrap: wrap;
  
}

.char1 {  
  position: relative;
  display: block;
  align-items: center;
}

.char1__body1 {
  position: relative;
  margin: 0;
  left: 10px;
  top: 10px;
  width: 120px;
  height: 120px;
  background-color: #ffdc3d;
}
.char1__body2 {
  position: relative;
  margin: 0;
  left: 10px;
  top: 10px;
  width: 120px;
  height: 50px;
  background-color: #cea46d;

}

.char1__body3 {
  position: relative;
  margin: 0;
  left: 10px;
  top: 10px;
  width: 120px;
  height: 140px;
  background-color: white;
}

.char1__body4 {
  position: relative;
  margin: 0;
  left: 10px;
  top: 10px;
  width: 120px;
  height: 120px;
  background-color: #3295bd;
}

.char1__body5 {
  position: relative;
  margin: 0;
  left: 10px;
  top: 10px;
  width: 120px;
  height: 40px;
  background-color: #535353;
}

.char2 {  
  position: relative;
  display: block;
  align-items: center;
  
}

.char2__body1 {
  position: relative;
  margin: 0;
  left: 10px;
  top: 10px;
  width: 120px;
  height: 120px;
  background-color: #3843e0;
}
.char2__body2 {
  position: relative;
  margin: 0;
  left: 10px;
  top: 10px;
  width: 120px;
  height: 120px;
  background-color: #ffdc3d;

}

.char2__body3 {
  position: relative;
  margin: 0;
  left: 10px;
  top: 10px;
  width: 120px;
  height: 15px;
  background-color: #db2a2a;
}

.char2__body4 {
  position: relative;
  margin: 0;
  left: 10px;
  top: 10px;
  width: 120px;
  height: 175px;
  background-color: #4bcf68;
}

.char2__body5 {
  position: relative;
  margin: 0;
  left: 10px;
  top: 10px;
  width: 120px;
  height: 40px;
  background-color: #db2a2a;
}
.char3 {  
  position: relative;
  display: block;
  align-items: center;
  
}

.char3__body1 {
  position: relative;
  margin: 0;
  left: 10px;
  top: 10px;
  width: 120px;
  height: 120px;
  background-color: #ffdc3d;
}
.char3__body2 {
  position: relative;
  margin: 0;
  left: 10px;
  top: 10px;
  width: 120px;
  height: 185px;
  background-color: #db2a2a;

}

.char3__body3 {
  position: relative;
  margin: 0;
  left: 10px;
  top: 10px;
  width: 120px;
  height: 75px;
  background-color: #3295bd;
}

.char3__body4 {
  position: relative;
  margin: 0;
  left: 10px;
  top: 10px;
  width: 120px;
  height: 50px;
  background-color: #ffdc3d;
}

.char3__body5 {
  position: relative;
  margin: 0;
  left: 10px;
  top: 10px;
  width: 120px;
  height: 40px;
  background-color: #3295bd;
}
.char4 {  
  position: relative;
  display: block;
  align-items: center;
  
}

.char4__body1 {
  position: relative;
  margin: 0;
  left: 10px;
  top: 10px;
  width: 120px;
  height: 120px;
  background-color: #ffdc3d;
}
.char4__body2 {
  position: relative;
  margin: 0;
  left: 10px;
  top: 10px;
  width: 120px;
  height: 15px;
  background-color: white;

}

.char4__body3 {
  position: relative;
  margin: 0;
  left: 10px;
  top: 10px;
  width: 120px;
  height: 245px;
  background-color: #db2a2a;
}

.char4__body4 {
  position: relative;
  margin: 0;
  left: 10px;
  top: 10px;
  width: 120px;
  height: 50px;
  background-color: #ffdc3d;
}

.char4__body5 {
  position: relative;
  margin: 0;
  left: 10px;
  top: 10px;
  width: 120px;
  height: 40px;
  background-color: #db2a2a;
}
.char5 {  
  position: relative;
  display: block;
  align-items: center;
  
}

.char5__body1 {
  position: relative;
  margin: 0;
  left: 10px;
  top: 10px;
  width: 120px;
  height: 15px;
  background-color: #ffdc3d;
}

.char5__body2 {
  position: relative;
  margin: 0;
  left: 10px;
  top: 10px;
  width: 120px;
  height: 15px;
  background-color: #3295bd;
}
.char5__body3 {
  position: relative;
  margin: 0;
  left: 10px;
  top: 10px;
  width: 120px;
  height: 120px;
  background-color: #ffdc3d;

}

.char5__body4 {
  position: relative;
  margin: 0;
  left: 10px;
  top: 10px;
  width: 120px;
  height: 35px;
  background-color: #db2a2a;
}

.char5__body5 {
  position: relative;
  margin: 0;
  left: 10px;
  top: 10px;
  width: 120px;
  height: 15px;
  background-color: #ffdc3d;
}
.char5__body6 {
  position: relative;
  margin: 0;
  left: 10px;
  top: 10px;
  width: 120px;
  height: 270px;
  background-color: #3295bd;
}

.content img {
  position: absolute;
  width: 50%;
  margin: 20px;
  left: 25%;
  align-content: center;
  
}