.bg{
	background-color: #562401;
}
.pond{
	position: absolute;
	top: 0%;
	left: 50%;
	height: 100%;
	width: 70%;
	transform: translateX(-50%);
}
.arrows{
	position: absolute;
	top: 51%;
	left: 49.5%;
	width: 45%;
	transform: translate(-50%, -50%);
}
.arrSec{
	left: 50%;
	width: 57%;
}
.float-option-block{
	position: absolute;
	bottom: 1%;
	height: 15%;
	width: 68%;
	left: 16%;
	color: #000000;
	font-size: 4.8vw;
	font-family: sniglet;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
@media(min-aspect-ratio:4/3){
	.float-option-block{
		font-size: 6vh;
	}
}
.float-text{
	position: relative;
	height: 90%;
	width: 12%;
	border-radius: 50%;
	background-color: #E7E6E6;
}
.float-text:hover{
	cursor: pointer;
	transform: scale(1.05);
	filter: brightness(125%) contrast(125%);
	-webkit-filter: brightness(125%) contrast(125%);
}
.float-text>p{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.cor-incor{
	position: absolute;
	display: none;
	bottom: 110%;
	left: 50%;
	width: 80%;
	transform: translateX(-50%);
}
.correct-answer{
	background-color: #98C02E;
	color: #FFFFFF;
	border: 0.8vmin solid #ECFF40;
}
.incorrect-answer{
	color: #000000;
	background-color: #FF0000;
	border: 0.8vmin solid #980000;
}



.leaf-text-block{
	position: absolute;
	top: 35%;
	height: 30%;
	width: 68%;
	left: 16%;
	color: #000000;
	font-size: 5.6vw;
	font-family: sniglet;
	display: flex;
	align-items: center;
	justify-content: space-around;
	z-index: 5;
}
@media(min-aspect-ratio:4/3){
	.leaf-text-block{
		font-size: 7vh;
	}
}
.leaf-text{
	align-self: flex-start;
	position: relative;
	height: 50%;
	width: 14%;
	border-radius: 50%;
	background-color: #58BD2F;
	box-shadow: 1vmin 0vmin 0vmin 0vmin #39A417;
	transition: 0.2s linear;
}
.leaf-text:nth-child(2n+0){
	align-self: flex-end;
}
.leaf-text>p{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.crown{
	position: absolute;
	left: 86%;
	width: 13%;
	bottom: 50%;
}
.frog{
	position: absolute;
	left: -1%;
	width: 17%;
	top: 45%;
	z-index: 10;
	transform: translateY(-50%);
}

.frog2{
	display: none;
	position: absolute;
	left: 84%;
	width: 17%;
	bottom: 45%;
	z-index: 10;
}


.leaf-press{
	box-shadow: 0vmin 0vmin 0vmin 0vmin #39A417;
	transform: translateX(1vmin);
}
.empty-leaf{
	color: #FFE599;
}


.blink-anim{
	-webkit-animation: blink-anim 1s ease-in-out infinite both;
	animation: blink-anim 1s ease-in-out infinite both;
}
@-webkit-keyframes
blink-anim {
	50% {filter: brightness(125%) contrast(125%); -webkit-filter: brightness(125%) contrast(125%);}
}
@keyframes
blink-anim {
	50% {filter: brightness(125%) contrast(125%); -webkit-filter: brightness(125%) contrast(125%);}
}


.press-anim{
	-webkit-animation: press-anim 0.8s ease-in-out 0.7s;
	animation: press-anim 0.8s ease-in-out 0.7s;
}
@-webkit-keyframes
press-anim {
	50% {box-shadow: 0vmin 0vmin 0vmin 0vmin #39A417;transform: translateX(1vmin);}
}
@keyframes
press-anim {
	50% {box-shadow: 0vmin 0vmin 0vmin 0vmin #39A417;transform: translateX(1vmin);}
}


.bg-last{
	background-color: #66ADDC;
}
.frog-last{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	height: 40%;
	bottom: 38%;
	z-index: 10;
	-webkit-animation: frog-last 1s ease-in infinite both;
	animation: frog-last 1s ease-in infinite both;
}
@-webkit-keyframes
frog-last {
	50% {transform: translate(-50%, -10%);}
}
@keyframes
frog-last {
	50% {transform: translate(-50%, -10%);}
}




.end-option-block{
	position: absolute;
	z-index: 5;
	bottom: 13%;
	top: auto;
	left: 0%;
	width: 100%;
	height: 17%;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.end-options{
	cursor: pointer;
	position: relative;
	height: 80%;
	width: 25%;
	top: auto;
	float: none;
	left: auto;
	background-color: #FF7F78;
	font-family: sniglet;
	/*border: 1vmin solid white;*/
	border-radius: 5vmin;
	font-size: 4vw;
	transition: 0.2s linear;
}
@media{
	.end-options{
		font-size: 5.2vh;
	}
}
.end-options:hover{
	background-color: rgb(230, 145, 56);
	border: 2px solid rgb(246, 178, 107);
}
.end-options p{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	width: 95%;
}
.msg-last{
	position: absolute;
	top: 2%;
	left: 0%;
	color: white;
	width: 100%;
	font-family: sniglet;
	font-size: 5vw;
}
@media(min-aspect-ratio:4/3){
	.msg-last{
		font-size: 7vh;
	}
}