@font-face {
	font-family: "serif";
	src: url("/assets/fonts/InstrumentSerif-Regular.woff2");
}

:root {
	--c-primary: #3d3bf3;
	--c-secondary: #ebeaff;
	--c-accent-1: #ff2929;
	--c-accent-0: #9694ff;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;

	color: var(--c-secondary);
}

body {
	padding: calc(1.618vmin * 5);
	height: 100vh;

	background: black;
}

main {
	animation: 5s glow forwards;

	display: grid;
	align-items: center;

	aspect-ratio: 1;
	border-radius: calc(1.618vmin * 2);
	padding: calc(1.618vmin * 5);
	max-height: 100%;
	margin: auto;
	border: 1px solid transparent;

	background: var(--c-primary);
}

@keyframes glow {
	to {
		border: 1px solid color-mix(in srgb, var(--c-accent-0), transparent 50%);

		box-shadow: 0 0 5vmin var(--c-primary);
	}
}

section {
	display: grid;
	align-items: center;

	aspect-ratio: 1;
	max-width: 100%;
	max-height: 100%;
	width: min-content;

	background:
		linear-gradient(
			to right,
			transparent 8px,
			color-mix(in srgb, var(--c-secondary), transparent 80%),
			transparent 9px
		),
		linear-gradient(
		to bottom,
		transparent 8px,
		color-mix(in srgb, var(--c-secondary), transparent 80%),
		transparent 9px
	);
	background-size: 16px 16px;
}

h1 {
	font-family: "serif";
	font-size: 52pt;
	font-weight: normal;
	letter-spacing: -5pt;
	line-height: 0.54;
	text-transform: capitalize;
}

a {
	font-family: sans-serif;
	letter-spacing: -1pt;
}

@media screen and (min-width: 30em) and (min-height: 30em) {
	h1 {
		font-size: 92pt;
		letter-spacing: -10pt;
	}
}

@media screen and (min-width: 45em) and (min-height: 45em) {
	h1 {
		font-size: 128pt;
		letter-spacing: -10pt;
	}
}

@media screen and (min-width: 68em) and (min-height: 68em) {
	h1 {
		font-size: 208pt;
		letter-spacing: -15pt;
	}
}

@media screen and (min-width: 135em) and (min-height: 135em) {
	h1 {
		font-size: 344pt;
		letter-spacing: -15pt;
	}
}