@font-face{
	font-family: "Determination";
	src:url("./undertale-font-rus-eng.otf.woff2");
}

@keyframes textShake {
	0% { transform: translate(0px,0px) }
	25% { transform: translate(1px,0px) }
	50% { transform: translate(0px,1px) }
	75% { transform: translate(-1px,0px) }
	100% { transform: translate(0px,0px ) }
}

* {
	margin: 0px;
	padding: 0px;
	font-family: "Determination", sans-serif;
	color: #fff;
}

html {
	background-color: #000;
}

.text-shake {
	animation: textShake 0.1s infinite;
}


#menu {
	display:flex;
	justify-content: center;
}

#start-btn {
	font-size: 2em;
	position: absolute;
	top:50%;
}

#scene {
	height: 60vh;
}

#question-container {
	display: flex;
	justify-content: center;
}

#question {
	position: absolute;
	top:20%;
	max-width: 450px;
}

#box {
	border: white solid 6px;
	margin: auto;
	padding: 15px 10px;
	height: 200px;
	max-width: 800px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#answer-grid {
	display: grid;
	justify-content: center;
	grid-template-columns: 50fr 50fr;
	gap: 50px 60px;
	padding: 15px 0;
	width: 100%;
}

.answer-option {
	display: flex;
	align-items: center;
	flex-direction: row;
	height: 50px;
	gap:15px;
}

.answer-option:nth-child(odd) {
	flex-flow: row-reverse;
	.answer-text {
		text-align: end;
	}
}

.answer-text {
	align-self: center;
	font-size: 1.5em;
	text-wrap: balance;
}

.btn {
	border-color: gold;
	color: gold;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 5px;
}

.answer-btn {
	border: #42fb4b solid;
	color: #42fb4b;
	width: 50px;
	height: 50px;
	font-size: 3em;
	letter-spacing: -0.15em;
	padding-bottom: 0;
}

.answer-selected {
	border-color: gold;
	color: gold;
}

.correct {
	color: darkgreen;
	border-color: darkgreen;
}

.wrong {
	color: darkred;
	border-color: darkred;
}

#timer {
	position: absolute;
	align-self: center;
	justify-self: center;
}