.vt323-regular, * {
  font-family: "VT323", monospace;
  font-weight: 400;
  font-style: normal;
}

*{
	%background-color: darkslategrey;
}

body{
	margin: 0;
}

#ctnr_header{
	display: flex;
	height: 6%;

	flex-direction: row;
	justify-content: center;
	align-content: center;
}

#ctnr_header_text{
	margin: auto;
	font-size: 1cm;
}

.ctnr_contents{
	display: none;

	width: 80%;
	height: calc(75% - 4px);

	margin-left: 5%;
	margin-right: 5%;
	padding: calc(5% - 4px);

	border-style: solid;
	border-radius: 1cm;
	border-width: 2px;
	boeder-color: gray;

	overflow-y: auto;
}

#ctnr_contents_intro{
	display: flex;

	flex-direction: column;
	justify-content: space-around;
}

#ctnr_contents_intro_desc{
	width: 80%;
	padding: 10%;

	font-size: 3.5vh;
	text-align: justify;
}

#ctnr_contents_intro_addit{
	width: 80%;
	padding: 10%;

	%background-color: blue;
}

#ctnr_contents_quest0{
	display: flex;

	flex-direction: column;
}

#ctnr_contents_quest0_quest{
	width: 80%;
	padding: 10%;

	font-size: 5vh;
	%text-align: justify;
}

#ctnr_contents_quest0_answ{
	width: 80%;
	padding: 10%;

	font-size: 3vh;
}

.ctnr_contents_quest0_answ{
	width: calc(100% - 4vh);
	margin-bottom: 2vh;
	padding: 2vh;

	border-style: solid;
	border-width: 2px;
	border-radius: 1vh;
}

#ctnr_contents_confirm{
	display: flex;

	flex-direction: column;
}

#cnvs_confirm{
	width: 60vw;
	height: 60vw;

	margin: auto;
}

#bttn_download{
	width: fit-content;
	padding: 2vh;

	border-width: 2px;

	font-size: 2vh;
}

#ctnr_contents_confirm_text{
	text-align: justify;
	font-size: 3vh;
}

.ctnr_nav{
	display: none;
	height: 14%;
	
	%background-color: red;
}

#ctnr_nav_intro{
	display: flex;

	flex-direction: row;
	justify-content: center;
	align-content: center;
}

#bttn_intro_enter{
	width: 80%;
	height: 70%;

	margin: auto;

	border-style: solid;
	border-width: 5px;
	border-radius: 9.8vh;
	border-color: black; %#4F879C;

	background-color: #E6EBED;

	font-size: 3.5vh;
}
#bttn_intro_enter:hover{
	background-color: white;
}

#ctnr_nav_quest0{
	display: flex;

	flex-direction: row;
	justify-content: center;
	align-content: center;
}

#ctnr_nav_quest0_ctnr{
	display: flex;

	flex-direction: row;
	justify-content: center;
	align-content: center;

	margin: auto;
}

#bttn_quest0_back{
	width: 9vh;
	height: 9vh;

	border-style: solid;
	border-width: 5px;
	border-radius: 4.5vh 0 0 4.5vh;
	border-color: black; %#4F879C;

	background-color: #E6EBED;

	font-size: 3.5vh;
}
#bttn_quest0_back:hover{
	background-color: white;
}

#bttn_quest0_forth{
	width: 9vh;
	height: 9vh;

	border-style: solid;
	border-width: 5px;
	border-radius: 0 4.5vh 4.5vh 0;
	border-color: black; %#4F879C;

	background-color: #E6EBED;

	font-size: 3.5vh;
}
#bttn_quest0_forth:hover{
	background-color: white;
}

#progr_quest0{
	height: 9vh;
	width: calc(80vw - 18vh);

	display: flex;

	flex-direction: row;
	justify-content: center;
	align-content: center;

	font-size: 5vh;
	background-color: #EEEEE1;
}

#progr_quest0_text{
	margin: auto;
}

#bttn_intro_confirm{
	width: 80%;
	height: 70%;

	margin: auto;

	border-style: solid;
	border-width: 5px;
	border-radius: 9.8vh;
	border-color: black; %#4F879C;

	background-color: #E6EBED;

	font-size: 3.5vh;
}
#bttn_intro_confirm:hover{
	background-color: white;
}
















.ctnr_fullsize{
	width: 100%;
	height: 100%;
}

.ctnr_fullscrn{
	width: 100vw;
	height: 100vh;
}

.ctnr_fullwidth{
	width: 100%;
}

.ctnr_fullheight{
	height: 100%;
}

.ctnr_row{
	display: flex;
	flex-direction: row;
}

.classy_margin_top_5pc{
	height: 5%;
}

#ctnr_form{
	width: 85%;
}

#ctnr_form_title{
	height: 10%;
	background-color: red;
}

#ctnr_contents{
	height: 55%;
	background-color: green;
}

#ctnr_ansr_opts{
	height: 10%;
	background-color: brown;
}

#ctnr_ansr_bttns{
	height: 5%;
	background-color: orange;
}

#ctnr_cnvs{
	width: 90%;
}

#ctnr_cnvs_title{
	height: 5%;
	background-color: orange;
}

#ctnr_cnvs_img{
	height: 75%;
	background-color: red;
}

#ctnr_cnvs_ctrls{
	height: 5%;
	background-color: blue;
}