:root {
	--vh: 100%;
	--highlight-active-color: #8AF68F;
	--highlight-base-color: #00FFFC;
	--icon-base-color: WHITE;
	--primary-base-color: #310f57;
	--text-base-color: WHITE;
	--text-button-color: WHITE;
	--primary-dark-color: #190035;
	--primary-element-color: #250845;
	--highlight-hover-color: #95FFFC;
}

body {
	background-color: var(--primary-dark-color);
	color: var(--text-base-color);
	margin: 0;
}

header {
	align-items: center;
	background-color: var(--primary-dark-color);
	display: flex;
	position: sticky;
	top: 0;
	width: 100%;
	z-index: 1000;
}

header h1 {
	margin-left: 10px;
}

footer {
	align-items: center;
	background-color: var(--primary-dark-color);
	display: flex;
	justify-content: center;
	width: 100%;
}

.content {
	background-color: var(--primary-base-color);
	display: flex;
	flex-direction: column;
	font-family: Noto Sans;
	min-height: calc(var(--vh, 1vh) * 100);
	min-width: fit-content;
}

.main {
	align-items: center;
	display: flex;
	flex: 1;
	flex-direction: column;
	text-align: center;
}