a:hover{text-decoration: none;}

.questionbox {

    padding: 4vh;

    width: 127vh;

    margin: auto;

    height: 100vh;

    cursor: default;

    background: #17a2b8;

    z-index: 9;

    position: relative;

    opacity: 0.93;

    border-radius: 5px;

    display: none;

    position: relative;

    background: #117a8b;

    z-index: 9;

    display: none;

    opacity: 0.93;

}

.help {

    /* margin-top: 10vh; */

    border-radius: 1vh;

    color: white;

    float: left;

    background-color: #53AE32;

    vertical-align: middle;

    padding: 1vh 2vh;

    height: 8vh;

    font-size: 4vh;

    line-height: 6vh;

    cursor: pointer;

    transition: 0.3s background-color;

}

.help:hover {

    background-color: #4fa031;

}

.help:active {

    background-color: #44822e;

}

.timer {

    /* margin-top: 10vh; */

    border-radius: 1vh;

    color: white;

    position: fixed;

    width: 20vh;

    vertical-align: middle;

    height: 8vh;

    background-color: #FF3AF7;

    /* padding: 0 2vh 0 2vh; */

    font-size: 5vh;

    line-height: 8vh;

    left: calc(50vw - 12vh);

    text-align: center;

    font-weight: bold;

    display: inline-block;

    animation-name: timer-resize;

    animation-duration: 3s;

    animation-iteration-count: infinite;

}

.timer div {

    height: 8vh;

    /* width: 6vh; */

    /* float: left; */

    display: inline-block;

    margin-right: 5%;

}

.category {

    position: relative;

    /* margin-top: 10vh; */

    color: white;

    float: right;

    height: 8vh;

    vertical-align: middle;

    font-size: 4vh;

    line-height: 8vh;

}

.category div {

    display: inline-block;

    color: white;

    /* float: right; */

    background-color: var(--color);

    text-align: center;

    width: 8vh;

    height: 8vh;

    font-size: 4.5vh;

    border-radius: 50%;

    line-height: 8vh;

    margin-left: 1vh;

}

.back {

    border-radius: 1vh;

    /*margin-top: 10vh;*/

    float: left;

    height: 8vh;

    color: white;

    padding: 0 2vh;

    font-size: 4.5vh;

    line-height: 8vh;

    background-color: #035B8A;

    cursor: pointer;

}

.back img {

    float: left;

    height: 6vh;

}

.question {

	position: absolute;

	padding: 4vh 2vh;

	width: 115vh;

	height: 15vh;

	font-size: 5vh;

	line-height: 5vh;

	color: #025E8E;

	background-color: #FCEE21;

	top: 13vh;

	border-radius: 2vh;

	font-weight: bold;

	box-sizing: content-box;

	text-align: right;

}

.question p {

    line-height: initial;

} 

.hint {

    position: fixed;

	padding: 3vh 2vh;

	width: 115vh;

	font-size: 4vh;

	line-height: 4vh;

	color: #025E8E;

	background-color: #FAF2B7;

	top: 37vh;

	border-radius: 2vh;

	font-weight: bold;

	box-sizing: content-box;

	text-align: right;

}



.resault {

	width: 48vh;

	height: 5vh;

	padding: 3vh 5vh;

	border-radius: 2vh;

	position: absolute;

	font-size: 5vh;

	line-height: 5vh;

	font-weight: bold;

	border-color: white;

	border-style: solid;

	border-width: 0;

	transition: 0.5s background-color;

	box-sizing: content-box;

	text-align: center;

	

    right: 36vh;

    top: 48vh;

}



.answear4 {

	width: 48vh;

	height: 5vh;

	padding: 3vh 5vh;

	border-radius: 2vh;

	position: absolute;

	font-size: 3.5vh;

	line-height: 5vh;

	font-weight: bold;

	border-color: white;

	border-style: solid;

	border-width: 0;

	transition: 0.5s background-color;

	box-sizing: content-box;

	text-align: center;

}

.answear4:nth-child(1) {

    right: 4vh;

    top: 48vh;

}

.answear4:nth-child(2) {

    left: 4vh;

    top: 48vh;

}

.answear4:nth-child(3) {

    right: 4vh;

    top: 64vh;

}

.answear4:nth-child(4) {

    left: 4vh;

    top: 64vh;

}

.answear4-default {

    color: #045C8D;

    background-color: white;

    cursor: pointer;

}

.answear4-disable {

    color: #999999;

    background-color: #B3B3B3;

}

.answear4-right {

    color: white;

    background-color: #53AE32;

    border-width: 0.5vh;

    padding: 2.5vh 4.5vh;

}

.answear4-wrong {

    color: white;

    background-color: #EE1B22;

    border-width: 0.5vh;

    padding: 2.5vh 4.5vh;

}

.answear4-default:hover {

    background-color: #e6e6e6;

}

.answear4-default:active {

    background-color: #d2d2d2;

}

.answear4 i {

    float: left;

    font-size: 8vh;

    line-height: 5vh;

    transition: 0s;

}

.resault i {

    float: left;

    font-size: 8vh;

    line-height: 5vh;

    transition: 0s;

}

.answear4-right i {

    color: #FCEE21;

}

.answear2 {

    cursor: pointer;

    width: 35vh;

    /* height: 4vh; */

    padding: 2.5vh 4.5vh;

    border-radius: 2vh;

    position: absolute;

    top: 65vh;

    font-size: 5vh;

    line-height: 4vh;

    font-weight: bold;

    border-color: white;

    border-style: solid;

    border-width: 0.5vh;

    transition: 0.5s background-color;

    color: white;

    text-align: center;

}

.answear2-true {

    right: 5vh;

    background-color: #53AE32;

}

.answear2-true:hover {

    background-color: #49942e;

}

.answear2-true:active {

    background-color: #43842c;

}

.answear2-false {

    left: 5vh;

    background-color: #EE1B22;

}

.answear2-false:hover {

    background-color: #bb292e;

}

.answear2-false:active {

    background-color: #942328;

}

.pop-up {
	position: fixed;
	width: 38vh;
	height: 24vh;
	padding: 6vh;
	left: calc(50vw - 25vh);
	top: calc(32vh);
	background-color: #53AE32;
	border-radius: 2vh;
	opacity: 1;
	text-align: center;
	font-size: 3.5vh;
	line-height: 5vh;
	color: white;
	font-weight: bold;
	box-sizing: content-box;
	display: none;
}

.pop-up-visible {

    opacity: 1;

    animation-name: pop-up-resize;

    animation-duration: 0.8s;

}


.pop-up div {
	width: 18vh;
	height: 8vh;
	margin-top: 2vh;
	float: left;
	color: #045C8D;
	background-color: white;
	border-radius: 1vh;
	line-height: 8vh;
	font-size: 2.6vh;
	--scale: 1;
	transition-timing-function: cubic-bezier(0, 0, 1, 0);
	transition: 0.5s background-color;
}

.pop-up div:nth-child(3) {
	margin-left: 2vh;
}

.pop-up div:hover {
	background-color: #e6e6e6;
}

.pop-up div:active {
	background-color: #d2d2d2;
}

@keyframes pop-up-resize {

    0% {transform: scale(0); opacity: 0;}

    65% {transform: scale(1.25); opacity: 1;}

    100% {transform: scale(1);}

}

@keyframes timer-resize {

    0% {transform: scale(1); background-color: #FF3AF7;}

    80% {transform: scale(1); background-color: #FF3AF7;}

    90% {transform: scale(1.1); background-color: #f157ea;}

    100% {transform: scale(1); background-color: #FF3AF7;}

}