/* Reset */

*,
*:before,
*:after {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

button {
	font: inherit;
	letter-spacing: inherit;
	background: none;
	border: none;
}

/* Font and density */

@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("fonts/InterVariable.woff2") format("woff2");
}

@font-feature-values Inter {

	@character-variant {
		cv01: 1; cv02: 2; cv03: 3; cv04: 4; cv05: 5; cv06: 6; cv07: 7; cv08: 8;
		cv09: 9; cv10: 10; cv11: 11; cv12: 12; cv13: 13;
		alt-1: 1;
		alt-3: 9;
		open-4: 2;
		open-6: 3;
		open-9: 4;
		lc-l-with-tail: 5;
		simplified-u: 6;
		alt-double-s: 7;
		uc-i-with-serif: 8;
		uc-g-with-spur: 10;
		single-story-a: 11;
		compact-lc-f: 12;
		compact-lc-t: 13;
	}

	@styleset {
		ss01: 1; ss02: 2; ss03: 3; ss04: 4; ss05: 5; ss06: 6; ss07: 7; ss08: 8;
		open-digits: 1;
		disambiguation: 2;
		disambiguation-except-zero: 4;
		round-quotes-and-commas: 3;
		square-punctuation: 7;
		square-quotes: 8;
		circled-characters: 5;
		squared-characters: 6;
	}
}

:root {
	--density_ds: 1.33;
}

body {
	font-family: "Inter";
	-webkit-font-smoothing: antialiased;
	font-weight: 400;
	font-size: 1em;
	line-height: var(--density_ds);
	letter-spacing: -0.15px;
}

html {
	--mobile-font-size-min: 13;
	--mobile-font-size-max: 17;

	--desktop-font-size-min: 11;
	--desktop-font-size-max: 16;
	
	--mobile-viewport-min: 320;
	--mobile-desktop-breakpoint: 768;
	--desktop-viewport-max: 1500;

	font-size: calc(var(--mobile-font-size-min) * 1px);

	@media screen and (min-width: 320px) {
		font-size: calc(var(--mobile-font-size-min) * 1px + (var(--mobile-font-size-max) - var(--mobile-font-size-min)) * ((100vw - var(--mobile-viewport-min) * 1px) / (var(--mobile-desktop-breakpoint) - var(--mobile-viewport-min))));
	}

	@media screen and (min-width: 768px) {
		font-size: calc(var(--desktop-font-size-min) * 1px + (var(--desktop-font-size-max) - var(--desktop-font-size-min)) * ((100vw - var(--mobile-desktop-breakpoint) * 1px) / (var(--desktop-viewport-max) - var(--mobile-desktop-breakpoint))));
	}

	@media screen and (min-width: 1500px) {
		font-size: calc(var(--desktop-font-size-max) * 1px);
	}
}