@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&family=Gantari:ital,wght@0,400;0,600;1,400;1,600&display=swap');
body {
	margin: 0;
	font-family: 'Gantari', 'BIZ UDPGothic', sans-serif ;
}
h1 {
	padding: 0;
	margin: 0;
}
nav {
	padding: 20px;
	background-color: #eeeeee;
	font-size: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: sticky;
	top: 0;
}
#level {
	padding: 10px;
	border: none;
	border-radius: 10px;
	background-color: #fff;
	transition: .2s;
}
#level:hover {
	background-color: #ddd;
}
#level:focus {
	background-color: #ddd;
	outline: solid 2px black;
}
.quiz {
	padding: 5%;
}
.elementNameBox {
	background-color: #eeeeee;
	padding: 150px 40px 150px 40px;
	text-align: center;
	font-size: 40px;
	width: 20%;
	float: left;
	border-radius: 20px;
}
.choices {
	float: right;
	width: 70%;
}
.choice {
	font-size: 20px;
	width: 100%;
	margin: 7px 0px 7px 0px;
	padding: 25px;
	border: none;
	border-radius: 20px;
	background-color: #eeeeee;
	cursor: pointer;
	transition: .2s;
}
.choice:hover {
	background-color: #dddddd;
}
.choice:focus {
	outline: solid black 1px;
}

@media (max-width:920px) {
	nav {
		display: flex;
		font-size: 15px;
	}
	nav h1 {
		padding-right: 30px;
	}
	#level {
		width: 100%;
	}
	.quiz {
		padding: 0;
	}
    .elementNameBox {
		padding: 100px 0px 100px 0px;
		text-align: center;
		font-size: 40px;
		width: 100%;
		float: none;
		border-radius: 0px;
	}
	.choices {
		float: none;
		width: 90%;
		margin-top: 10px;
		margin-left: auto;
		margin-right: auto;
	}
	.choice {
		padding: 15px;
	}
}