/* MARK: - Fonts */
:root {
	--large-title: var(--weight-bold) 4rem/1.25 var(--sans-serif);
	--title1: var(--weight-medium) 3rem/1.25 var(--sans-serif);
	--title2: var(--weight-medium) 2rem/1.35 var(--sans-serif);
	--body: var(--weight-normal) 1.5rem/1.5 var(--sans-serif);
}

.large-title {
	font: var(--large-title);
}
.title1 {
	font: var(--title1);
}
.title2 {
	font: var(--title2);
}
.body {
	font: var(--body);
}

svg.large-title {
	height: 4rem;
}
svg.title1 {
	height: 3rem;
}
svg.title2 {
	height: 2rem;
}
svg.body {
	height: 1.5rem;
}

/* MARK: - Font Families */
:root {
	--sans-serif: ui-sans-serif, system-ui, sans-serif, var(--emoji);
	--emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
		"Noto Color Emoji";
}

.sans-serif {
	font-family: var(--sans-serif);
}

/* MARK: - Font Weights */
:root {
	--weight-normal: 400;
	--weight-medium: 500;
	--weight-bold: 600;
}

@media (prefers-color-scheme: dark) {
	:root {
		--weight-normal: 300;
		--weight-medium: 400;
		--weight-bold: 500;
	}
}

.normal {
	font-weight: var(--weight-normal);
}
.medium {
	font-weight: var(--weight-medium);
}
.bold {
	font-weight: var(--weight-bold);
}

/* MARK: - Spacing */
:root {
	--space-base: 0.25rem;
	--space-0: calc(0 * var(--space-base));
	--space-2: calc(0.5 * var(--space-base));
	--space-4: calc(1 * var(--space-base));
	--space-8: calc(2 * var(--space-base));
	--space-16: calc(4 * var(--space-base));
	--space-24: calc(6 * var(--space-base));
	--space-32: calc(8 * var(--space-base));
	--space-48: calc(12 * var(--space-base));
	--space-64: calc(16 * var(--space-base));
	--space-72: calc(18 * var(--space-base));
	--space-80: calc(20 * var(--space-base));
	--space-96: calc(24 * var(--space-base));

	--spacing: 0;
}

.s0 {
	--spacing: var(--space-0);
}
.s2 {
	--spacing: var(--space-2);
}
.s4 {
	--spacing: var(--space-4);
}
.s8 {
	--spacing: var(--space-8);
}
.s16 {
	--spacing: var(--space-16);
}
.s24 {
	--spacing: var(--space-24);
}
.s32 {
	--spacing: var(--space-32);
}
.s48 {
	--spacing: var(--space-48);
}
.s64 {
	--spacing: var(--space-64);
}
.s72 {
	--spacing: var(--space-72);
}
.s80 {
	--spacing: var(--space-80);
}
.s96 {
	--spacing: var(--space-96);
}

/* MARK: - Colors */
:root {
	--foreground: 0, 0, 0;
	--background: 255, 255, 255;

	--primary: rgba(var(--foreground), 100%);
	--secondary: rgba(var(--foreground), 50%);
	--tertiary: rgba(var(--foreground), 35%);
	--quaternary: rgba(var(--foreground), 15%);
	--quinary: rgba(var(--foreground), 5%);

	--primary-bg: rgba(var(--background), 100%);
	--secondary-bg: rgba(var(--background), 50%);
	--tertiary-bg: rgba(var(--background), 35%);
	--quaternary-bg: rgba(var(--background), 15%);
	--quinary-bg: rgba(var(--background), 5%);
}

@media (prefers-color-scheme: dark) {
	:root {
		--foreground: 255, 255, 255;
		--background: 27, 27, 27;
		/* look over these: */
		--secondary: rgba(var(--foreground), 75%);
		--tertiary: rgba(var(--foreground), 50%);
		--quaternary: rgba(var(--foreground), 15%);
		--quinary: rgba(var(--foreground), 3%);
	}
}

.foreground {
	color: var(--foreground);
}
.background {
	color: var(--background);
}
.primary {
	color: var(--primary);
}
.secondary {
	color: var(--secondary);
}
.tertiary {
	color: var(--tertiary);
}
.quaternary {
	color: var(--quaternary);
}
.quinary {
	color: var(--quinary);
}

/* MARK: - Animations */
:root {
	--transition: 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--transition: none;
	}
}

/* MARK: - Basics */
:root {
	color-scheme: light dark;
	touch-action: manipulation;

	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@media (max-width: 479px) {
	html {
		font-size: 75%;
	}
}

body {
	padding: 0 2rem;
	margin: 6rem auto 2rem;
	max-width: 75rem;
	font: var(--body);
	color: var(--primary);
	background: var(--primary-bg);
}

@media (max-width: 479px) {
	body {
		padding: 0 1rem;
		margin-bottom: 1rem;
	}
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote {
	font: inherit;
	margin: 0;
	overflow-wrap: break-word;
}

img,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

img:not(.plain),
video:not(.plain) {
	box-sizing: border-box;
	border-radius: 0.5rem;
	border: 1px solid var(--quinary);
}

em {
	font-family: var(--serif);
}

strong,
b {
	font-weight: var(--weight-bold);
}

hr {
	width: 100%;
	max-width: 200px;
	margin: 0;
	border: none;
	border-top: 1px solid var(--quinary);
}

ul.plain {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pretty {
	text-wrap: pretty;
}

/* MARK: - Links */
a {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition), text-decoration-color var(--transition);
}

a:not(.plain) {
	text-decoration: underline;
	-webkit-text-decoration-color: var(--quaternary);
	text-decoration-color: var(--quaternary);
	text-decoration-thickness: 1px;
	text-underline-offset: 2.5px;
}

a:hover:not(.plain):not(.cta) {
	-webkit-text-decoration-color: var(--secondary);
	text-decoration-color: var(--secondary);
}

a.plain {
	transition: opacity var(--transition);
}

a.plain svg {
	/* Fix SVGs moving slightly on hover */
	transform: translateZ(0);
}

a.plain:not(.hstack):not(.vstack) {
	display: inline-block;
}

a.plain:hover {
	opacity: 0.7;
}

.cta {
	display: inline-block;
	color: var(--primary-bg);
	background: var(--primary);
	font: var(--title2);
	font-weight: 500;
	padding: 1rem 2.5rem;
	border-radius: 999rem;
	transition: opacity var(--transition), box-shadow var(--transition);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
}

@media (prefers-color-scheme: dark) {
	.cta {
		font-weight: 600;
	}
}

.cta > span:first-child {
	margin-right: 0.5rem;
}

.cta:hover {
	opacity: 0.85;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18), 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* MARK: - Stack */
:root {
	--alignment: center;
}

.vstack {
	display: flex;
	justify-content: space-between;
	align-items: var(--alignment);
	flex-direction: column;
	gap: var(--spacing);
}

.hstack {
	display: flex;
	justify-content: space-between;
	align-items: var(--alignment);
	flex-direction: row;
	gap: var(--spacing);
}

.vstack > * {
	min-height: 0;
}

.hstack > * {
	min-width: 0;
}

.leading {
	--alignment: flex-start;
}

.center {
	--alignment: center;
}

.trailing {
	--alignment: flex-end;
}

.stretch {
	--alignment: stretch;
}

.vstack.leading {
	text-align: left;
}

.vstack.center {
	text-align: center;
}

.vstack.trailing {
	text-align: right;
}

.vstack.narrow-page {
	width: 100%;
	max-width: 45rem;
	margin: 0 auto;
}

/* MARK: - Components */
.highlight-blue {
	position: relative;
	display: inline;
}
.highlight-blue::before {
	content: "";
	position: absolute;
	left: -0.06em;
	right: -0.06em;
	bottom: 0.06em;
	height: 31%;
	background: #77afd2;
	opacity: 0.7;
	border-radius: 3px;
	z-index: -1;
}

.highlight-green {
	position: relative;
	display: inline;
}
.highlight-green::before {
	content: "";
	position: absolute;
	left: -0.22em;
	right: -0.22em;
	top: 0;
	bottom: 0;
	z-index: -1;
	opacity: 0.7;
	transform: translateY(0.5em);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 80' preserveAspectRatio='none'%3E%3Cpath d='M32,39 Q153,20 274,30 Q375,40 475,22' fill='none' stroke='%2372ae84' stroke-width='24' stroke-linecap='butt' /%3E%3Cellipse cx='32' cy='39' rx='19.43' ry='12' fill='%2372ae84' /%3E%3Cellipse cx='475' cy='22' rx='19.43' ry='12' fill='%2372ae84' /%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	pointer-events: none;
}

@media (prefers-color-scheme: dark) {
	.highlight-blue::before,
	.highlight-green::before {
		opacity: 0.5;
	}
}

.badges {
	margin: 0 1rem;
	opacity: 0.35;
}

@media (prefers-color-scheme: dark) {
	.badges {
		filter: invert();
	}
}

.card {
	background: var(--quinary);
	border-radius: 20px;
}

.preview-image {
	display: flex;
	overflow: hidden;
}

.preview-image img {
	margin: auto auto 0;
	padding: calc(2rem + 5vw) 2rem 0;
	box-sizing: border-box;
}

@media (max-width: 479px) {
	.preview-image img {
		margin: auto 0 0 auto;
		padding: 3rem 0 0 2rem;
	}
}

.site-footer {
	padding: var(--space-96) var(--space-8);
}