.creambg{
  background: #FEF4E8;
}
.toptxt{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    background-color: #6E6560;
    color: #fff;
    font-family: comfortaa;
    padding: 2% 1% 1% 1%;
    font-size: 2vw;
}
.submit{
  position: absolute;
  top: 83%;
  left: 50%;
  font-size: 2vw;
  background: #00B2CA;
  border: 2px solid #00B2CA;
  border-radius: .3em;
  padding: 1%;
  z-index: 10;
  color: #fff;
  transform: translateX(-50%);
}
.submit:hover{
  cursor: pointer;
  background: #64ffd0;
  border:4px solid #39e5b7;
}
.fruitsHolder{
  position: absolute;
  top: 20%;
  height: 21%;
  width: 57%;
  /*background: #f00;*/
  left: 20%;
  display: flex;
  flex-wrap: wrap-reverse;
  /*justify-content: space-around;*/
}
.fruits{
  position: relative;
  width: 10%;
  align-self: center;
}
.basketsHOlder{
  position: absolute;
  top: 46%;
  left: 10%;
  width: 80%;
  height: 35%;
  background: #fff;
  border-radius: 1em;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.basketFrtCntr{
  position: relative;
  width: 11%;
  align-self: center;
  height: 50%;
  /*background: #000;*/
}
.basketsCntr{
  position: absolute;
  top: 50%;
  left: 0%;
  width: 100%;
  height: 50%;
  align-self: center;
  /*background: #ff0;*/
}
.bsktImgCntr{
  position: absolute;
  bottom: 46%;
  left: 0%;
  width: 100%;
  height: 36%;
  display: flex;
  flex-wrap: wrap-reverse;
  /*justify-content: space-around;*/
}
.baskets{
  position: relative;
  width: 100%;
}
.fruitsInBskt{
  position: relative;
  width: 43%;
  align-self: center;
}
.optionsdiv {
  top: 87%;
  display: flex;
  left: 80%;
  flex-direction: row;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  text-align: left;
  position: absolute;
  height: 45%;
  width: 75%;
  flex-wrap: wrap;
  transform: translateX(-82%);
}

.optionscontainer {
  width: 50%;
}

.imagestartpos {
  position: absolute;
  width: 13%;
  margin-left: 1%;
  display: none;
  margin-top: 12%;
  left: 72%;
  bottom: 16%;
}

.ispforimage{
	position: absolute;
    width: 21%;
    left: 38%;
    top: 490%;
    display: none;
}

.optionsdiv p {
  padding: 2%;
  background: #926EED;
  border-radius: 15px;
  margin: 1%;
  font-size: 2vw;
  border: 5px solid #926EED;
  font-family: Abeezee;
  width: 75%;
  text-align: center;
  color: #fff;
}

.optimg {
    display: inline;
    border-radius: 15px;
    color: white;
    margin: 0% 1%;
    font-size: 4vmin;
    border: 5px solid #ADAEDB;
    cursor: pointer;
    width: 21%;
}

.forhover:hover {
  background: #ffe599;
  border: 5px solid #ffd966;
  cursor: pointer;
  color: #000;
}
.t39{
  top: 39%;
}
.t14{
  top: 14%;
}
.midtxt{
  top: 84%;
  display: flex;
  flex-flow: row;
  justify-content: space-around;
}
.mdTxt{
  position: relative;
  top: 37%;
  height: 18%;
  font-size: 3vh;
  width: 20%;
}
.mt3{
  width: 28%;
}
.sgn1sec{
  left: 0%;
  top: 26%;
  font-size: 3vh;
}
.sgn2sec{
  left: 0%;
  top: 33%;
  font-size: 3vh;
}
.belowTxt{
  position: absolute;
  top: 100%;
  text-align: left;
  left: 40%;
  opacity: 0;
}
.grenEqn{
  position: absolute;
  top: 5%;
  right: 5%;
  height: 26%;
  width: 33%;
  background: #B5EBF3;
  z-index: 5;
  border-radius: 1em;
  font-size: 2.5vw;
  opacity: 0;
}
.t90{
  top: 89%;
}
@media screen and (min-aspect-ratio: 4/3) {
	/*vw*/
	.covertext{
		font-size: 7vh;
	}
  .submit, .tryagain{
    font-size: 3.5vw;
  }
  .txt{
    font-size: 4vh;
  }
  .mdTxt, .sgn1sec, .sgn2sec{
    font-size: 3vh;
  }
}
@media screen and (max-aspect-ratio: 4/3) {
	/*vw*/
	.covertext{
		font-size: 4vw;
	}
  .submit, .tryagain{
    font-size: 2vw;
  }
  .txt{
    font-size: 3vw;
  }
  .mdTxt, .sgn1sec, .sgn2sec{
    font-size: 2.5vw;
  }
}