@font-face {
	font-family: 'Work Sans';
	src: url('assets/WorkSans-Light.woff2') format('woff2'),
	url('assets/WorkSans-Light.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Work Sans';
	src: url('assets/WorkSans-SemiBold.woff2') format('woff2'),
	url('assets/WorkSans-SemiBold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

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

h1, h2, h3, h4, p, ul, body, margin, ul, ol {
	margin: 0;
	padding: 0;
}

html {
	font-family: 'Work Sans', sans-serif;
	overflow-x: hidden;
}

table {
	border-collapse: collapse;
}

h1, h2, h3, h4, th, button, input, select {
	font: inherit;
}

summary, li {
	list-style: none;
}

input, button, select {
	color: inherit;
}

button, label, select, summary {
	cursor: pointer;
}

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

html {
	padding: 3em min(3em, 5vw);

	font-family: 'Work Sans', sans-serif;
	line-height: 1.5;
	background: #334;
	background-image: repeating-linear-gradient(rgb(60, 30, 94), #0a8165);
}

body {
	display: flex;
	flex-direction: column;
	gap: 1em;
	padding: 2em min(2em, 4vw) 3em;
	max-width: 40em;
	margin: 0 auto;

	background: rgb(231, 240, 241);
	background-image:
		repeating-radial-gradient(circle at 100% 0, rgba(156, 214, 220, 0.16) 0, rgba(226, 240, 245, 0.59) 2em),
		linear-gradient(to bottom, #fff, #dbe6e8 40em);
	box-shadow: 0 2em 10em black;
	color: #224;
	border-radius: 0.6em;
}

hgroup {
	padding: min(5em, 10vh) 0;
}

h1 {
	font-weight: bold;
	font-size: clamp(120%, 5vw, 400%);
	line-height: 1.2;
	text-transform: uppercase;
}

h2 {
	font-size: 150%;
	font-weight: bold;
	line-height: 1.2;
	margin: 1.5em 0 1em;
}

h3 {
	font-weight: bold;
}

p code,
pre {
	background: #b8cace;
}

p code {
	padding: 0.1em;
	border-radius: 0.1em;
}

pre {
	padding: 1em;
	border-radius: 0.3em;
	overflow-y: auto;
}

footer {
	margin-top: 2em;
	padding-top: 1em;
	font-size: 87.5%;
	border-top: 0.1em solid #a5acb6;
}