.bg_full{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.top_text {
    position: absolute;
    font-size: 2vw;
    background: #7386d5;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    color: white;
    padding: 1%;
}
.centertext {
    position: relative;
    top: 9%;
    transform: translateY(-50%);
    padding: 1% 1%;
    height: auto;
    color: white;
    background: rgba(131, 167, 239,.85);
}
.speech_left {
    top: 15%;
    left: 32%;
    width: 21%;
    color: #1155cc;
}
.speech_top_middle {
    top: 37%;
    left: 28%;
    width: 21%;
    color: blue;
}
.speech_right {
    color: blue;
    width: 30%;
    left: 40%;
    top: 7%;
}
.blue_bg{
  background: #6d9eeb;
}
.bottom_text {
    position: absolute;
    background: #fff7d1;
    width: 100%;
    font-size: 2vw;
    padding: 1%;
    top: 0;
    left: 0;
}
.click-1, .click-2, .click-3 {
    width: 30%;
    cursor: pointer;
    height: 28%;
}
.click-1:hover, .click-2:hover, .click-3:hover {
  transform: scale(1.1);
  transition: .2s;
}
.insidetext_cloud {
    top: 64% !important;
    position: absolute !important;
    color: blue;
}
.click-1 {
    top: 14%;
    left: 5%;
}
.click-2 {
    top: 34%;
    left: 35%;
}
.click-3 {
    top: 59%;
    left: 65%;
}
.father_pos {
    position: absolute;
    width: 26%;
    top: 13%;
    left: 13%;
}
.insidetext{
  top: 50% !important;
  left: 12% !important;
}
.insidetext1{
  top: 50% !important;
  left: 3% !important;
}
.mother_pos {
    position: absolute;
    bottom: 0;
    left: 6%;
    width: 28%;
}
@media (min-aspect-ratio: 4/3){
	.top_text{
		font-size: 5vmin;
	}
  .bottom_text{
    font-size: 4.5vmin;
  }
}