@font-face {
	font-family: "Geo";
	src: url("./assets/fonts/Geo-Regular.ttf") format("truetype");
	font-display: swap;
}

:root {
	--font: Geo, system-ui, Arial, sans-serif;
	--title-font-size: 48px;
	--sub-title-font-size: 40px;
	--text-font-size: 32px;
}

:root[data-theme="dark"] {
	--read-color: #ffffff;
	--read-secondary-color: #bcbcbc;
	--read-tertiary-color: #909090;
	--background-color: #222222;
}

:root[data-theme="light"] {
	--read-color: #222222;
	--read-secondary-color: #505050;
	--read-tertiary-color: #7c7c7c;
	--background-color: #eff1ff;
}

@media screen and (max-width: 700px) {
	:root {
		--title-font-size: 38px;
		--sub-title-font-size: 30px;
		--text-font-size: 24px;
	}
}

body {
	width: 100dvw;
	height: 100dvh;
	margin: 0;
	padding: 0;
	background: var(--background-color);
	font-family: var(--font);
	font-size: var(--text-font-size);
	color: var(--read-color);
}