/***** fonts *****/
/**** sans-serif ****/
@font-face {
	font-family: "B612";
	src: url("https://amaranth-legacy.yttrium.systems/B612_%28regular%29.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "B612";
	src: url("https://amaranth-legacy.yttrium.systems/B612_%28italic%29.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "B612";
	src: url("https://amaranth-legacy.yttrium.systems/B612_%28bold%29.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "B612";
	src: url("https://amaranth-legacy.yttrium.systems/B612_%28bold%2C_italic%29.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

/**** monospace ****/
@font-face {
	font-family: "JetBrains Mono";
	src: url("https://amaranth-legacy.yttrium.systems/JetBrainsMono-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("https://amaranth-legacy.yttrium.systems/JetBrainsMono-Italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("https://amaranth-legacy.yttrium.systems/JetBrainsMono-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("https://amaranth-legacy.yttrium.systems/JetBrainsMono-BoldItalic.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

/***** variables *****/
:root {
	color-scheme: light dark;

	/* spacing */
	--space-unit: 1rem;
	--space-xx-small: calc(0.25 * var(--space-unit));
	--space-x-small: calc(0.5 * var(--space-unit));
	--space-small: calc(0.75 * var(--space-unit));
	--space-medium: var(--space-unit);
	--space-large: calc(1.5 * var(--space-unit));

	/* color */
	--color-base: light-dark(black, oklch(85% 0.05 262.29));
	--color-theme: #1cdc9a;
	--color-link: light-dark(#27ae60, #1cdc9a);

	/* background color */
	--background-color-base: light-dark(oklch(96% 0.01 262.29), oklch(21% 0.01 262.29));

	/* font */
	--font-family-base: "B612", sans-serif;
	--font-family-serif: "Cinzel", serif;
	--font-family-monospace: "JetBrains Mono", monospace;

	/* font size */
	--font-size-unit: 1rem;
	--font-size-xx-small: calc(0.25 * var(--font-size-unit));
	--font-size-x-small: calc(0.5 * var(--font-size-unit));
	--font-size-small: calc(0.75 * var(--font-size-unit));
	--font-size-medium: var(--font-size-unit);
	--font-size-large: calc(1.25 * var(--font-size-unit));
	--font-size-x-large: calc(1.5 * var(--font-size-unit));
	--font-size-xx-large: calc(1.75 * var(--font-size-unit));
	--font-size-xxx-large: calc(2 * var(--font-size-unit));
}

/***** elements *****/
/* partially derived from <https://www.joshwcomeau.com/css/custom-css-reset/> */
*, *::before, *::after {
	box-sizing: border-box;
}

* {
	margin: 0;
	padding: 0;
}

body {
	line-height: 1.5;
	font-size: var(--font-size-medium);
	-webkit-font-smoothing: antialiased;

	@media screen {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		padding-block: var(--space-large);
		background-image: url("https://amaranth-legacy.yttrium.systems/-website-background-Toronto_night_cityscape_(Unsplash).jpeg.avif");
		background-color: var(--background-color-base);
		background-position: center;
		background-size: cover;
		background-attachment: fixed;
		background-repeat: no-repeat;
	}
}

main {
	width: 25%;
	margin: auto;
	padding: var(--space-medium);
	color: var(--color-base);

	@media screen {
		contain: content;
		background-color: var(--background-color-base);
		border: var(--color-theme) solid 4px;
		box-shadow: var(--color-theme) 0 0 8px;
	}

	/* phone, portrait */
	@media screen and (max-width: 639px) and (orientation: portrait) {
		width: 90%;
		max-width: unset;
	}

	/* phone, landscape */
	@media screen and (max-height: 639px) and (orientation: landscape) {
		width: 50%;
		max-width: unset;
	}

	/* tablet, portrait */
	@media screen and (min-width: 640px) and (max-width: 1119px) {
		width: 50%;
		max-width: unset;
	}
}

h1, h2, h3, h4, h5, h6, p {
	overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
	margin-block: var(--space-medium) var(--space-small);
	padding-block-end: var(--space-x-small);
	border-block-end: var(--color-theme) solid 1px;
}

h1 {
	font-size: var(--font-size-xxx-large);
}

h2 {
	font-size: var(--font-size-x-large);
}

h3, h4, h5, h6 {
	font-size: var(--font-size-medium);
}

.subtitled {
	margin-block-end: 0;
	padding-block-end: 0;
	border-block-end: none;
}

.subtitled + * {
	font-style: italic;
	margin-block-end: var(--space-small);
	padding-block-end: var(--space-x-small);
	border-block-end: var(--color-theme) solid 1px;
}

p {
	text-wrap: pretty;
}

code, pre {
	font-family: var(--font-family-monospace);
}

img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
	margin-inline: auto;
}

ul, ol, dl {
	list-style-position: inside;
}

p + :is(ul, ol, dl) {
	margin-block-start: var(--space-xx-small);
}

:any-link {
	color: var(--color-link);
	text-decoration: none;
}

:any-link:hover,
:any-link:focus-visible,
:any-link:active {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

table {
	border-collapse: collapse;
	margin-inline: auto;
}

th, td {
	border: var(--color-theme) 1px solid;
	padding-block: var(--space-xx-small);
	padding-inline: var(--space-x-small);
}

.profile-picture {
	background: linear-gradient(180deg, #5bcefa 20%, #f5a9b8 20%, 40%, #ffffff 40%, 60%, #f5a9b8 60%, 80%, #5bcefa 80%);
}