.playtime-text{
	position: absolute;
	bottom: 5%;
	left: 31%;
	color: white;
	width: 36%;
	height: 60%;
	background-color: #FFAB40;
	border-radius: 50%;
	border: 0.8vmin solid white;
	font-family: sniglet;
	font-size: 7.5vw;
	transition: 0.2s linear;
}
.playtime-text>p{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
@media(min-aspect-ratio:4/3){
	.playtime-text{
		font-size: 10vh;
	}
}
.ins-container{
	position: absolute;
	top: 0%;
	left: 0%;
	height: 20%;
	width: 100%;
	z-index: 15;
	background-color: #F14E5A;
}
.e1-ins {
	position: absolute;
	color: #FFFFFF;
	left: 0%;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	font-size: 3.2vw;
	font-family: comfortaa;
}
@media(min-aspect-ratio:4/3){
	.e1-ins{
		font-size: 4vh;
	}
}
.bg-ex{
	background: linear-gradient(to top, #DBEFBB, #15ADB2);
}
.bg-playtime{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.playtime-button{
	cursor: pointer;
	position: absolute;
	opacity: 0;
	bottom: 5%;
	left: 31%;
	width: 36%;
	height: 60%;
	border-radius: 50%;
	border: 0.8vmin solid white;
	z-index: 5;
	transition: 0.2s linear;
}
.rhino{
	position: absolute;
	height: 30%;
	left: 11%;
	bottom: 18%;
	z-index: 6;
}
.squirrel{
	position: absolute;
	height: 27%;
	left: 69%;
	bottom: 13%;
	z-index: 6;
	transform: rotate(10deg);
}
.blink-anim{
	-webkit-animation: blink-anim 0.5s ease-in-out infinite both;
	animation: blink-anim 0.5s 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%);}
}


.bg-2{
	background: linear-gradient(to top, #D9EFBE, #2DBDDB);
}



svg{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
}
#rope-svg{
	position: absolute;
	width: 100%;
	height: 9.1%;
	left: 0%;
	top: 40%;
	z-index: 1;
}
.float-option-block{
	position: absolute;
	bottom: 5%;
	height: 15%;
	width: 60%;
	left: 20%;
	color: #000000;
	font-size: 4vw;
	font-family: sniglet;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
@media(min-aspect-ratio:4/3){
	.float-option-block{
		font-size: 5vh;
	}
}
.float-text{
	position: relative;
	cursor: pointer;
	height: 79%;
	width: 12%;
	border-radius: 50%;
	border: 1px solid #D6B174;
	background-color: #F9CB9C;
}
.float-text>p{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.float-text:hover{
	transform: scale(1.05);
	filter: brightness(125%) contrast(125%);
	-webkit-filter: brightness(125%) contrast(125%);
}
.cor-incor{
	position: absolute;
	display: none;
	bottom: 65%;
	left: 50%;
	width: 12%;
	transform: translateX(-50%);
}




.grass{
	position: absolute;
	bottom: 0%;
	left: 0%;
	width: 100%;
}
.sun{
	position: absolute;
	top: 5%;
	left: 5%;
	height: 12%;
	/*animation: sun 1s linear infinite;*/
}
.sunring-1, .sunring-2{
	animation-fill-mode: both;
	animation-iteration-count: infinite;
	animation-duration: 2s;
	animation-timing-function: linear;
}
.sunring-1{
	/*animation-name: sunring-1;*/
}
.sunring-2{
	/*animation-name: sunring-2;*/
}
@keyframes
sun {
	50% {transform: scale(1.2);}
}
@keyframes
sunring-1 {
	25% {transform: scale(1.3) rotate(90deg);}
	50% {transform: scale(1) rotate(180deg);}
	100% {transform: scale(1) rotate(360deg);}
}
@keyframes
sunring-2 {
	50% {transform: scale(1) rotate(180deg);}
	75% {transform: scale(1.3) rotate(270deg);}
	100% {transform: scale(1) rotate(360deg);}
}
.bird{
	position: absolute;
	bottom: 1%;
	left: 4%;
	height: 15%;
	z-index: 4;
}
.butterfly{
	position: absolute;
	top: 43.7%;
	left: 92.5%;
	height: 20%;
	z-index: 5;
	transform-origin: 50% 0%;
	transition: 1000ms linear;
}
.butterfly-2{
	top: 48.5%;
	transform: rotateX(20deg);
}
.shirt-image{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
}
.shirttext{
	position: absolute;
	top: 35%;
	left: 32%;
	height: 36%;
	width: 36%;
	border-radius: 50%;
	background-color: #FFF2CC;
	color: #434343;
	font-family: sniglet;
	z-index: 5;
	font-size: 4.4vw;
}
@media(min-aspect-ratio:4/3){
	.shirttext{
		font-size: 6vh;
	}
}
.shirttext>p{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.blanktext{
	background-color: #999999;
}
.shirtdiv{
	cursor: pointer;
	position: absolute;
	z-index: 3;
	height: 35%;
	width: 20%;
	transform-origin: 50% 0%;
	transition: 1000ms linear;
}

.shirt-1{
	left: 5%;
	top: 45%;
	transform: rotate(-5deg);
	/*left: 2%;top: 18%;transform: rotate(14deg) rotateX(25deg);*/
}

.shirt-2{
	left: 27%;
	top: 43%;
	transform: rotate(-5deg);
	/*left: 27%;top: 21%;transform: rotate(14deg) rotateX(25deg);*/
}
.shirt-3{
	left: 52%;
	top: 47%;
	transform: rotate(-5deg);
	/*left: 52%;top: 18%;transform: rotate(14deg) rotateX(25deg);*/
}
.shirt-4{
	left: 74%;
	top: 45%;
	transform: rotate(-10deg);
	/*left: 76%;top: 22%;transform: rotate(8deg) rotateX(25deg);*/
}


.shirt-anim-1, .shirt-anim-2, .shirt-anim-3, .shirt-anim-4{
	animation-fill-mode: both;
	animation-iteration-count: infinite;
	animation-duration: 1s;
	animation-timing-function: linear;
}
.shirt-anim-1{
	/*animation-name: shirt-anim-1;*/
	left: 2%;top: 43%;transform: rotate(14deg) rotateX(25deg);
}
.shirt-anim-2{
	/*animation-name: shirt-anim-2;*/
	left: 27%;top: 46%;transform: rotate(14deg) rotateX(25deg);
}
.shirt-anim-3{
	/*animation-name: shirt-anim-3;*/
	left: 52%;top: 43%;transform: rotate(14deg) rotateX(25deg);
}
.shirt-anim-4{
	/*animation-name: shirt-anim-4;*/
	left: 74%;top: 46.5%;transform: rotate(10deg) rotateX(25deg);
}
@keyframes
shirt-anim-1 {
	50% {left: 2%;top: 33%;transform: rotate(14deg) rotateX(25deg);}
}
@keyframes
shirt-anim-2 {
	50% {left: 27%;top: 36%;transform: rotate(14deg) rotateX(25deg);}
}
@keyframes
shirt-anim-3 {
	50% {left: 52%;top: 33%;transform: rotate(14deg) rotateX(25deg);}
}
@keyframes
shirt-anim-4 {
	50% {left: 76%;top: 37%;transform: rotate(8deg) rotateX(25deg);}
}

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



.yellow-text{
	color: #FFD966;
}
.bg-grass{
	position: absolute;
	width: 100%;
	bottom: 0%;
	left: 0%;
	height: 4%;
	background-color: #98C02E;
}
.questionblock{
	position: absolute;
	width: 100%;
	height: 12%;
	top: 20%;
	background-color: #01BCD5;
	color: #FFFFFF;
	font-family: sniglet;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.6vw;
}
@media(min-aspect-ratio:4/3){
	.questionblock{
		font-size: 3.4vh;
	}
}
.questionblock>*{
	position: relative;
	margin: 0% 1%;
}
.speaker{
	cursor: pointer;
	transition: 0.2s linear;
	height: 80%;
}
.speaker:hover{
	transform: scale(1.1);
}


.correct-answer{
	background-color: #98C02E;
	color: #FFFFFF;
	border: 0.8vmin solid #ECFF40;
}
.incorrect-answer{
	background-color: #FF0000;
	color: #000000;
	border: 0.8vmin solid #980000;
}