.bg{
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
}
.creamBg{
  background: #FEF4E8;
}
.diytxt{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-family: sniglet;
  font-size: 6vw;
}
.friendsContainer{
  position: absolute;
  top: 44%;
  left: 44%;
  width: 56%;
  height: 55%;
  /*background: #f00;*/
  display: flex;
  flex-flow: row;
  justify-content: space-around;
}

.friends{
  position: relative;
  width: 76%;
}
.frndDivContainer{
  position: relative;
  /*background: #000;*/
  height: 100%;
  width: 15%;
}
.manyImageContainer{
  position: absolute;
  top: 50%;
  left: 0%;
  width: 100%;
  height: 50%;
  /*background: #ff0;*/
}
.answerContainer{
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 50%;
  /*background: #00f;*/
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.pencilContainer{
  position: absolute;
  top: 18%;
  left: 0%;
  width: 41%;
  height: 40%;
  /*background: #f00;*/
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
.pencils{
  position: relative;
  width: 4%;
  align-self: center;
}
.pencilsAns{
  position: relative;
  width: 14%;
  align-self: center;
}
.opacityOne{
  opacity: 1;
}
.clickBtn{
  position: absolute;
  top: 70%;
  left: 8%;
  background: #00B2CA;
  color: #fff;
  padding: 1%;
  font-size: 2.5vw;
  transform: translateX(-4%);
  border-radius: .5em;
}
.clickBtn:hover{
  cursor: pointer;
  transform: scale(1.2);
}
.instruction{
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  background: #1D4E89;
  font-family: sniglet;
  font-size: 2vw;
  color: #fff;
  padding: 1%;
}

.dragdiv{
  position: absolute;
  top: 30%;
  left: 15%;
  width: 70%;
  height: 29%;
  display: flex;
  flex-flow: row;
  justify-content: space-around;
}
 .dropable{
  position: absolute;
  top: 20%;
  width: 25%;
  background: #fff;
  height: 25%;
  left: 2%;
  border: 2px solid #000;
  border-radius: .5em;
}
.dragable{
  position: relative;
  top: 20%;
  width: 25%;
  background: #fff;
  height: 25%;
  /*left: 2%;*/
  border: 2px solid #000;
  border-radius: .5em;
}
.drop2{
  left: 32%;
}
 .drop3{
  left: 60%;
}
.dragOpn{
  position: relative;
  font-size: 2.5vw;
}

 .drop2{
  left: 38%;
}
 .drop3{
  left: 74%;
}
.dropdiv, .midtxt{
  position: absolute;
  top: 50%;
  left: 15%;
  width: 70%;
  height: 29%;
  background: #fff;
}
.midtxt{
  top: 25%;
  display: flex;
  flex-flow: row;
  justify-content: space-around;
}
.mdTxt{
  position: relative;
  top: 37%;
  border-bottom: 2px dashed #000;
  height: 25%;
  font-size: 4vh;
  width: 15%;
}
.dropName{
  position: absolute;
  top: 100%;
  left: 0%;
  width: 100%;
}
.signs{
  position: absolute;
  font-size: 3vw;
}
.sgn1{
  left: 31%;
  top: 17%;
}
.sgn2{
  left: 66%;
  top: 17%;
}
.sgn1sec{
  left: 0%;
  top: 26%;
  font-size: 4vw;
}
.sgn2sec{
  left: 0%;
  top: 33%;
  font-size: 3vw;
}
.hovered{
  border: 2px dashed #000;
}
.correctTxt{
  position: absolute;
  top: 60%;
  left: 0%;
  width: 100%;
  color: #98C02E;
  font-family: sniglet;
  font-size: 8vw;
}
.pracMore{
  position: absolute;
  top: 66%;
  left: 45%;
  transform: translateX(-55%);
  width: 30%;
  background: #39e5b7;
  color: #fff;
  font-size: 3.3vw;
  border: 4px solid #2db691;
  border-radius: 1em;
  padding: 2%;
}
.pracMore:hover{
  cursor: pointer;
  background: #64ffd0;
  border: 4px solid #39e5b7;
  color: #000;
}
.grilLast{
  position: absolute;
  width: 17%;
  top: 31%;
  right: 5%;
}
.sp-1{
  padding: 2% 4% 1% 2%;
  top: 30%;
  left: 39%;
  width: 44%;
  height: 30%;
}
.dragable:hover{
  cursor: pointer;
  background: #cfe2f3;
  border: 4px solid #6fa8dc;
}
.drgbOpn, .drpdtxt{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.drpdtxt{
  color: #fff;
}
@media screen and (min-aspect-ratio: 4/3) {
	/*vw*/
	.covertext{
		font-size: 4vw;
	}
  .submit, .tryagain, .instruction{
    font-size: 2vw;
  }
  .txt{
    font-size: 3vw;
  }
  .dragOpn{
    font-size:4vh;
  }
  .pracMore{
    font-size: 4.3vh;
  }
  .diytxt{
    font-size: 10vh;
  }
  .mdTxt{
    font-size: 4vh;
  }
}
@media screen and (max-aspect-ratio: 4/3) {
  .dragOpn{
    font-size:2.5vw;
  }
  .pracMore{
    font-size: 2vw;
  }
  .diytxt{
    font-size: 6vw;
  }
  .mdTxt{
    font-size: 3vw;
  }
}