:root {
	--font-header: 'Russo One', sans-serif;
	--font-body: "Roboto Variable", sans-serif;
	--font-code: "Roboto Mono Variable", monospace;
}

* {
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-header);
	text-transform: uppercase;
	font-weight: 400;
	opacity: 0.87;
}


h1,
h2 {
	color: var(--color-primary);
	margin-bottom: var(--m);
}

h3,
h4,
h5,
h6 {
	color: var(--color-on-background);
}

h1,
h2 {
	font-size: var(--lg);
	line-height: calc(var(--lg) * 1.1);

	@media (min-width: 1200px) {
		font-size: var(--xlg);
		line-height: calc(var(--xlg) * 1.1);
	}
}

h3,
h4 {
	font-size: var(--l);
	line-height: calc(var(--l) * 1.2);

	@media (min-width: 1200px) {
		font-size: var(--lg);
		line-height: calc(var(--lg) * 1.2);
	}
}

h5,
h6 {
	font-size: var(--mg);
	line-height: calc(var(--mg) * 1.2);
}

p,
pre,
li,
input,
label,
dt,
dd {
	font-size: var(--m);
	line-height: calc(var(--m) * 1.4);
	font-family: var(--font-body);
	color: var(--color-on-background);
	font-weight: 400;
}

p {
	margin-bottom: var(--xxs);
	hyphens: auto;
	opacity: 0.87;
}

p:last-of-type {
	margin-bottom: 0;
}

.text-as-body {
	font-size: var(--m);
	line-height: var(--m);
	font-family: var(--font-body);
	color: var(--color-on-background);
	font-weight: 500;
}

a,
span,
em {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	opacity: inherit;
	margin: 0;
	padding: 0;
}


a {
	color: var(--color-info);
}

em {
	font-style: italic;
}

strong {
	font-weight: 600;
}

ul {
	list-style-type: disc;
}

code {
	display: inline-block;
	font-family: var(--font-code);
	font-weight: 400;
	font-size: var(--m);
	line-height: calc(var(--m) * 1.6);
	border-radius: 3px;
	padding-inline: 0.5em;
	background-color: var(--color-marker);
	color: var(--color-on-marker);
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	* {
		-webkit-font-smoothing: auto;
	}
}