html, body {
	display: flex;
	flex-direction: column;
	height: 100%;
	gap: 7px;
	user-select: none;
	color: white;
	background-color: rgb(36, 31, 49);
}
@font-face {
	font-family: 'Noto Sans';
	src: url('assets/Noto_Sans/static/NotoSans-Bold.ttf');
	font-weight: bold;
	font-style: normal;
}
p, input, button {
	font-family: 'Noto Sans';
	font-weight: bold;
}
#example {
	display: flex;
	flex-grow: 1;
	align-items: center;
	margin: 0px;
	font-size: 48px;
}
input, button {
	border-radius: 10px;
	min-height: 50px;
	font-size: 16px;
}
input {
	color: black;
	background-color: rgb(246, 245, 244);
	border: 2px solid;
	border-color: rgb(145, 65, 172);
}
button {
	color: white;
	border: none;
}
#checkButton {
	background-color: rgb(145, 65, 172);
}
#checkButton:hover {
	background-color: rgb(129, 61, 156);
}
#checkButton:active {
	background-color: rgb(97, 53, 131);
}
#skipButton {
	background-color: rgb(53, 132, 228);
}
#skipButton:hover {
	background-color: rgb(28, 113, 216);
}
#skipButton:active {
	background-color: rgb(26, 95, 180);
}
#topbar {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 50px;
}
#openSidebarBtn {
	width: 50px;
	border-radius: 100px;
	background-color: rgb(36, 31, 49);
}
#sidebar {
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	left: -300px;
	width: 300px;
	height: 100%;
	z-index: 1000;
	background-color: rgb(36, 31, 49);
	border-radius: 0 10px 10px 0;
	transition: left 0.3s ease;
}
#sidebar.open {
	left: 0;
	border-right: 2px solid;
	border-top: 2px solid;
	border-bottom: 2px solid;
	border-color: rgb(145, 65, 172);
}
#sidebarOptions {
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}
.sidebarOption {
	margin: 7px;
	background-color: rgb(36, 31, 49);
}
.sidebarOption:hover, #openSidebarBtn:hover {
	background-color: rgb(61, 56, 70);
}
.sidebarOption:active, #openSidebarBtn:active {
	background-color: rgb(94, 92, 100);
}
.sidebarOption.open {
	background-color: rgb(145, 65, 172);
}
#closeSidebarBtn {
	align-self: flex-end;
	margin: 7px;
	width: 50px;
	background-color: rgb(224, 27, 36);
}
#closeSidebarBtn:hover {
	background-color: rgb(192, 28, 40);
}
#closeSidebarBtn:active {
	background-color: rgb(165, 29, 45);
}
#overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	visibility: hidden;
	opacity: 0;
	background-color: black;
}
#overlay.open {
	visibility: visible;
	opacity: 0.7;
}
input:focus, button:focus {
	outline: none;
}
#counters {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 7px;
	border-radius: 10px;
	color: black;
	background-color: white;
	font-size: 16px;
}
#counters p {
	display: flex;
	align-items: center;
	flex-grow: 1;
	margin: 0px;
	margin-left: 7px;
}
.notification {
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: white;
	justify-content: center;
	align-items: center;
	font-size: 48px;
	z-index: 1000;
	visibility: hidden;
}
#correctlyDiv {
	background-color: rgb(38, 162, 105);
}
#wronglyDiv {
	background-color: rgb(237, 51, 59);
}
#correctAnswerP {
	font-size: 24px;
}