@font-face {
	font-family: "Phyrexian Regular";
	src: url("fonts/Phyrexian-Regular.ttf") format("truetype");
	/* block: the encoded Latin string must never flash before the glyphs load */
	font-display: block;
}

:root {
	--ink: #0a0a0a;
	--bone: #ece8df;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	height: 100%;
	background: var(--ink);
	color: var(--bone);
}

body {
	overflow: hidden;
}

.defs {
	position: absolute;
}

main {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100dvh;
}

/* Phyrexian reads top to bottom, lines left to right. */
.phyrexian {
	margin: 0;
	font-family: "Phyrexian Regular";
	font-weight: normal;
	font-size: 5.6vh;
	font-size: 5.6dvh;
	line-height: 1;
	writing-mode: vertical-lr;
	white-space: nowrap;
	filter: url(#glyph-ink);
}