@import url(https://fonts.bunny.net/css?family=overlock:400);

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

:root {
	--bg:        #eff1f5;
	--surface:   #303446;
	--surface2:  #414559;
	--border:    rgba(255,255,255,0.07);
	--border2:   rgba(255,255,255,0.13);
	--text:      #303446;
	--muted:     #949ab6; /* #71799e; */
	--muted-l:   #cfd1de;
	--muted-d:   #525777;
	--accent:    #babbf1;
	--accent-d:  #d83984;
	--green:     #3ecf8e;
	--green-d:   rgba(62,207,142,0.12);
	--amber:     #f59e0b;
	--amber-d:   rgba(245,158,11,0.12);
	--coral:     #f97066;
	--coral-d:   rgba(249,112,102,0.12);
	--mono:      "Overlock", display;
	--sans:      sans-serif;
	--radius:    8px;
	--radius-lg: 14px;
	--link:      #686bd6;
}

html {
	font-family: var(--sans);
	font-size: 1.1em;
}

body {
	background: var(--bg);
	color: var(--text);
	min-height: 100vh;
	padding-top: 1.2rem;
}

.wrap {
	max-width: 900px;
	margin: 0 auto;
}

header {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	flex-wrap: wrap;
}

header h1 {
	font-family: var(--mono);
	font-size: 1.3rem;
	font-weight: 400;
	letter-spacing: -0.01em;
	color: var(--muted-d);
}

header h1 span, span.name {
	color: var(--accent-d);
}

h2 {
	color: var(--muted-d);
	font-size: 1.2rem;
}

section {
	color: var(--text);
	font-family: var(--mono);
	font-size: 1rem;
}

a:link, a:link:active, a:visited, a:visited:active {
	color: var(--link);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

a:hover {
	text-decoration-color: color-mix(in srgb, currentColor, transparent 50%);
}

abbr {
	font-variant: all-small-caps;
}

dl {
	border: 1px solid var(--surface);
	padding-block: 1rem;
	padding-inline: 1rem;
}

dt:first-child {
	margin-block-start: 0;
}

dt {
	margin-block: .5rem;
}

dd {
	margin-block: .5rem;
}

code {
	color: var(--muted-d);
	font-size: .8rem;
}

span.heading-link {
	font-size: 7ex;
}