@font-face {
	font-family: "Fira Sans";
	font-style: normal;
	font-weight: 400;
	src: url(/static/fonts/woff2/FiraSans-Regular.woff2) format("woff2"), url(/static/fonts/woff/FiraSans-Regular.woff) format("woff")
}

@font-face {
	font-family: "Fira Sans";
	font-style: normal;
	font-weight: 600;
	src: url(/static/fonts/woff2/FiraSans-SemiBold.woff2) format("woff2"), url(/static/fonts/woff/FiraSans-SemiBold.woff) format("woff")
}

@font-face {
	font-family: "Fira Sans";
	font-style: italic;
	font-weight: 400;
	src: url(/static/fonts/woff2/FiraSans-Italic.woff2) format("woff2"), url(/static/fonts/woff/FiraSans-Italic.woff) format("woff")
}

@font-face {
	font-family: "Fira Mono";
	font-style: normal;
	font-weight: 400;
	src: url(/static/fonts/woff2/FiraMono-Regular.woff2) format("woff2"), url(/static/fonts/woff/FiraMono-Regular.woff) format("woff")
}

@font-face {
	font-family: "Fira Mono";
	font-style: normal;
	font-weight: 700;
	src: url(/static/fonts/woff2/FiraMono-Bold.woff2) format("woff2"), url(/static/fonts/woff/FiraMono-Bold.woff) format("woff")
}

body {
	background-color: #222;
	color: #ccc;
	font-family: "Fira Sans", sans-serif;
}

.hint-notice {
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	padding: 20px;
	text-align: center;
	color: #666;
}

.main-container {
	width: 1200px;
	height: 800px;
	position: absolute;
	top: calc(50% - 400px);
	left: calc(50% - 600px);
	margin: auto;
}

.extra-description {
	max-width: 800%;
	background-color: rgba(32, 32, 32, 0.8);
	backdrop-filter: blur(10px);
	border-radius: 4px;
	padding: 15px 20px;
	position: absolute;
	top: 10px;
	left: 250px;
	right: 250px;
	text-align: center;
}

.clickable {
	cursor: pointer;
	position: absolute;
	/*border: 1px solid white;*/
		/* temporarily */
}

.nav-button {
	cursor: pointer;
	position: absolute;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.6;
}

.nav-button:hover {
	opacity: 1;
}

.back-button {
	bottom: 20px;
	left: calc(50% - 100px);
	right: calc(50% - 100px);
	height: 50px;
	background-image: url('/static/down-arrow.svg');
}


.forward-button {
	top: 20px;
	left: calc(50% - 100px);
	right: calc(50% - 100px);
	height: 50px;
	background-image: url('/static/down-arrow.svg');
}

.left-button {
	left: 20px;
	top: calc(50% - 100px);
	bottom: calc(50% - 100px);
	width: 50px;
	background-image: url('/static/left-arrow.svg');
}

.right-button {
	right: 20px;
	top: calc(50% - 100px);
	bottom: calc(50% - 100px);
	width: 50px;
	background-image: url('/static/right-arrow.svg');
}

input,
button,
.button {
	font-family: "Fira Sans", sans-serif;
	background-color: #333;
	border: 1px solid #ccc;
	border-radius: 4px;
	color: #ccc;
	padding: 5px 8px;
	margin: 0px 4px;
	text-decoration: none;
}

.button {
	cursor: default;
}

input:focus {
	outline: none;
	box-shadow: 0 0 5px #00a2de;
}

.answer-container {
	margin-top: 20px;
}

.response-container {
	margin-top: 20px;
	display: none;
}