@font-face {
	font-family: "Josefin Sans CFJ";
	src: url("/font/JosefinSansCFJ-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Josefin Sans CFJ";
	src: url("/font/JosefinSansCFJ-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Josefin Sans CFJ";
	src: url("/font/JosefinSansCFJ-Light.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Josefin Sans CFJ-fallback";
	size-adjust: 101.81%;
	ascent-override: 75%;
	descent-override: 25%;
	line-gap-override: 0;
	src: local("Arial");
}
html {
	overflow: hidden;
}
body {
	height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;

	--background-color: #fafafa;
	--text-color: #333;
	--highlight-color: #0066CC;
	background-color: var(--background-color);
	color: var(--text-color);
}
body, button, input {
	font-family: "Josefin Sans CFJ", "Josefin Sans CFJ-fallback", system-ui;
	font-size: 16px;
}
.material-symbols-outlined {
	user-select: none;
}

#mainViewport {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: auto;
}
main {
	display: flex;
	flex-direction: column;
	flex: 1;
}
#content {
	flex-grow: 1;
	font-size: 20px;
}