@font-face {
	font-family: 'Oi';
	src: url('/fonts/Oi-Regular.woff2');
	font-style: normal;
	font-weight: 400;
	font-display: swap;
}

:root {
	--background: light-dark(#414482,#2E305C);
	--text: light-dark(#2E305C,#3F427E);
	--pocket: light-dark(#3C3E77,#2B2C55);
	--pocket-border: light-dark(#2E305C,#3F427E);
}

* {
	box-sizing: border-box;
}

html {
	color-scheme: light dark;
}

body {
	color: var(--text);
	background-color: var(--background);
	font-family: 'Oi', serif;
	font-kerning: normal;
	font-size: 100%;
	font-variant-ligatures: common-ligatures;
	font-weight: 400;
	line-height: 1.444;
	margin: 0;
	padding: 0;
	text-align: left;
	text-size-adjust: 100%;
	display: flex;
	flex-flow: column;
	gap: 0.625rem;
	transition: background 0.3s, color 0.3s;
}

h1, h2, h3, h4, h5, h6, p {
	overflow-wrap: break-word;
}

main h1 {
	background: var(--pocket);
	clip-path: polygon(0 0, 100% 0, 100% 68%, 50% 100%, 0 68%);
	font-size: 9vw;
	font-weight: 400;
	height: 80vw;
	line-height: 1.1;
	margin: 10vw auto;
	padding: 5vw;
	width: 80vw;
}