:root {
	/* Main colors */
	--text-color-hsl: 0deg 0% 0%;
	--background-color-hsl: 0deg 0% 100%;
	--accent-color-hsl: 215deg 100% 30%;
	--link-text-color-hsl: 215deg 100% 40%;

	/* Dialogs */
	--dialog-header-color-hsl: 215deg 100% 96%;

	/* Tags */
	--tag-border-color-hsl: 215deg 100% 30%;
	--tag-background-color-hsl: 215deg 100% 30%;
	--tag-text-color-hsl: 0deg 0% 100%;

	/* Code block */
	--code-background-color-hsl: 0deg 0% 93%;
}

:focus-visible {
	outline: solid 2px hsl(var(--accent-color-hsl) / 100%);
	outline-offset: 4px;
}

@font-face {
	font-family: Adwaita;
	font-weight: normal;
	src:
		local("Adwaita Sans"),
		url("/fonts/AdwaitaSans-Regular.ttf") format("truetype");
}

@font-face {
	font-family: "Fira Code";
	font-weight: normal;
	src:
		local("Fira Code Regular"),
		url("/fonts/FiraCode-Regular.ttf") format("truetype");
}

@font-face {
	font-family: "Fira Code";
	font-weight: bold;
	src:
		local("Fira Code Bold"),
		url("/fonts/FiraCode-Bold.ttf") format("truetype");
}

@font-face {
	font-family: "Fira Code";
	font-weight: 100 300;
	src:
		local("Fira Code Light"),
		url("/fonts/FiraCode-Light.ttf") format("truetype");
}

@font-face {
	font-family: "OpenMoji Color";
	src: url("/fonts/OpenMoji-color-glyf_colr_0.woff2") format("woff2");
	unicode-range:
		U+23, U+2A, U+2D, U+30-39, U+A9, U+AE, U+200D, U+203C, U+2049, U+20E3,
		U+2117, U+2120, U+2122, U+2139, U+2194-2199, U+21A9, U+21AA, U+229C, U+231A,
		U+231B, U+2328, U+23CF, U+23E9-23F3, U+23F8-23FE, U+24C2, U+25A1,
		U+25AA-25AE, U+25B6, U+25C0, U+25C9, U+25D0, U+25D1, U+25E7-25EA, U+25ED,
		U+25EE, U+25FB-25FE, U+2600-2605, U+260E, U+2611, U+2614, U+2615, U+2618,
		U+261D, U+2620, U+2622, U+2623, U+2626, U+262A, U+262E, U+262F, U+2638-263A,
		U+2640, U+2642, U+2648-2653, U+265F, U+2660, U+2663, U+2665, U+2666, U+2668,
		U+267B, U+267E, U+267F, U+2691-2697, U+2699, U+269B, U+269C, U+26A0, U+26A1,
		U+26A7, U+26AA, U+26AB, U+26B0, U+26B1, U+26BD, U+26BE, U+26C4, U+26C5,
		U+26C8, U+26CE, U+26CF, U+26D1, U+26D3, U+26D4, U+26E9, U+26EA, U+26F0-26F5,
		U+26F7-26FA, U+26FD, U+2702, U+2705, U+2708-270D, U+270F, U+2712, U+2714,
		U+2716, U+271D, U+2721, U+2728, U+2733, U+2734, U+2744, U+2747, U+274C,
		U+274E, U+2753-2755, U+2757, U+2763, U+2764, U+2795-2797, U+27A1, U+27B0,
		U+27BF, U+2934, U+2935, U+2B05-2B07, U+2B0C, U+2B0D, U+2B1B, U+2B1C,
		U+2B1F-2B24, U+2B2E, U+2B2F, U+2B50, U+2B55, U+2B58, U+2B8F, U+2BBA-2BBC,
		U+2BC3, U+2BC4, U+2BEA, U+2BEB, U+3030, U+303D, U+3297, U+3299, U+E000-E009,
		U+E010, U+E011, U+E040-E04B, U+E050-E06D, U+E080-E0B4, U+E0C0-E0CC,
		U+E0FF-E10D, U+E140-E14A, U+E150-E157, U+E181-E189, U+E1C0-E1C4,
		U+E1C6-E1D9, U+E200-E216, U+E240-E269, U+E280-E283, U+E2C0-E2C4,
		U+E2C6-E2DA, U+E300-E303, U+E305-E30F, U+E312-E316, U+E318-E322,
		U+E324-E329, U+E32B, U+E340-E348, U+E380, U+E381, U+F000, U+F77A, U+F8FF,
		U+FE0F, U+1F004, U+1F0CF, U+1F10D-1F10F, U+1F12F, U+1F16D-1F171, U+1F17E,
		U+1F17F, U+1F18E, U+1F191-1F19A, U+1F1E6-1F1FF, U+1F201, U+1F202, U+1F21A,
		U+1F22F, U+1F232-1F23A, U+1F250, U+1F251, U+1F260-1F265, U+1F300-1F321,
		U+1F324-1F393, U+1F396, U+1F397, U+1F399-1F39B, U+1F39E-1F3F0,
		U+1F3F3-1F3F5, U+1F3F7-1F4FD, U+1F4FF-1F53D, U+1F549-1F54E, U+1F550-1F567,
		U+1F56F, U+1F570, U+1F573-1F57A, U+1F587, U+1F58A-1F58D, U+1F590, U+1F595,
		U+1F596, U+1F5A4, U+1F5A5, U+1F5A8, U+1F5B1, U+1F5B2, U+1F5BC,
		U+1F5C2-1F5C4, U+1F5D1-1F5D3, U+1F5DC-1F5DE, U+1F5E1, U+1F5E3, U+1F5E8,
		U+1F5EF, U+1F5F3, U+1F5FA-1F64F, U+1F680-1F6C5, U+1F6CB-1F6D2,
		U+1F6D5-1F6D7, U+1F6DC-1F6E5, U+1F6E9, U+1F6EB, U+1F6EC, U+1F6F0,
		U+1F6F3-1F6FC, U+1F7E0-1F7EB, U+1F7F0, U+1F90C-1F93A, U+1F93C-1F945,
		U+1F947-1F9FF, U+1FA70-1FA7C, U+1FA80-1FA88, U+1FA90-1FABD, U+1FABF-1FAC5,
		U+1FACE-1FADB, U+1FAE0-1FAE8, U+1FAF0-1FAF8, U+1FBC5-1FBC9, U+E0061-E0067,
		U+E0069, U+E006C-E006E, U+E0070-E0079, U+E007F;
}

html {
	color: hsl(var(--text-color-hsl) / 100%);
	background-color: hsl(var(--background-color-hsl) / 100%);
}

body {
	text-align: justify;
	font-family: Adwaita, "OpenMoji Color", sans-serif;
	margin: 2rem auto;
	display: grid;
	max-width: 100vw;
	min-height: 100vh;
	align-content: start;
	align-items: start;
}

a {
	color: hsl(var(--link-text-color-hsl) / 100%);
	text-decoration: underline solid hsl(var(--link-text-color-hsl) / 30%);
}

a:hover {
	cursor: pointer;
	text-decoration-color: hsl(var(--link-text-color-hsl) / 100%);
}

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

abbr[title] {
	text-decoration: underline dashed;
	cursor: help;
}

abbr[title]:hover {
	text-decoration-style: solid;
}

ul,
dl,
ol {
	margin-inline-start: 1rem;
	padding-inline-start: 0.7rem;
	list-style: disc;
}

ol {
	list-style: decimal;
}

li,
dt {
	display: list-item;
	margin-block-end: 0.5rem;
}

dt {
	font-style: italic;
}

dt::after {
	content: ":";
}

html[lang="fr"] dt::after {
	content: " :";
}

dd {
	margin-inline-start: 1rem;
	margin-block-end: 1rem;
}

h1 {
	font-size: 1.8rem;
	margin-block: 1rem;
}

h2 {
	font-size: 1.4rem;
	margin-block: 0.9rem;
}

h3 {
	font-size: 1.2rem;
	margin-block: 0.9rem;
}

p {
	text-align: justify;
	margin-block: 0.5rem;
	line-height: 1.5rem;
}

aside p {
	text-align: left;
}

em {
	font-weight: bold;
}

em,
i {
	font-style: italic;
}

sup {
	font-size: 0.83em;
	vertical-align: super;
	line-height: 1;
}

input[type="range"] {
	all: revert;
}

hr {
	border: solid 1px hsl(var(--text-color-hsl) / 10%);
}

article {
	max-width: 100%;
	overflow: hidden;
	border-radius: 0.3rem;
	align-self: stretch;
}

pre {
	padding-block: 0.7rem;
	margin-inline-start: 1rem;
	padding-inline-start: 0.5rem;
	border-inline-start: solid 0.2rem gray;
	border-radius: 0.3rem;
	overflow-y: auto;
	white-space: pre;
	background: color-mix(
		in sRGB,
		hsl(var(--background-color-hsl) / 100%) 95%,
		hsl(var(--text-color-hsl) / 100%)
	);
}

.text-no-wrap {
	white-space: nowrap;
}

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

.textual-graph {
	font-family: "Fira Code", "OpenMoji Color", monospace;
}

code {
	font-size: 0.8rem;
	font-family: "Fira Code", "OpenMoji Color", monospace;
	background-color: hsl(var(--code-background-color-hsl) / 100%);
	padding-block: 0.1rem;
	padding-inline: 0.4rem;
	border-radius: 0.3rem;
	white-space: pre;
}

pre code {
	background: unset;
	padding: unset;
	border: unset;
}

button,
.button {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.3rem;
	align-items: center;
	justify-content: center;
	color: hsl(var(--text-color-hsl) / 100%);
	text-decoration: none;
	background: no-repeat hsl(var(--accent-color-hsl) / 10%);
	border: solid 1px hsl(var(--accent-color-hsl) / 100%);
	padding-inline: 0.5rem;
	padding-block: 0.2rem;
	border-radius: 0.5rem;
	cursor: pointer;
	font-size: 0.8rem;
}

.circle {
	border-radius: 100%;
}

button .icon,
.button .icon,
.tag .icon {
	font-family: "OpenMoji Color", emoji, sans-serif;
}

/* stylelint-disable-next-line no-descending-specificity */
button .icon,
.button .icon {
	font-size: 1.2rem;
	margin-block: -0.3rem;
}

button:hover,
.button:hover {
	background: no-repeat 0.8em 0.2em hsl(var(--accent-color-hsl) / 20%);
}

dialog > header button {
	aspect-ratio: 1 / 1;
	padding: 0.2rem;
	font-size: 1rem;
	font-weight: 900;
	border: none;
}

dialog {
	position: absolute;
	top: 10vh;
	left: 50vw;
	transform: translate(-50%);
	padding-block-end: 1rem;
}

dialog::backdrop {
	backdrop-filter: grayscale(60%);
}

dialog[open] {
	display: grid;
	max-height: 30vh;
	overflow-y: auto;
	background: hsl(var(--background-color-hsl) / 100%);
	border: solid hsl(var(--text-color-hsl) / 100%) 1px;
	border-radius: 5px;
	box-shadow: 0 0 10px hsl(var(--text-color-hsl) / 100%);
}

dialog > * {
	padding-inline: 0.8rem;
}

dialog > header {
	display: grid;
	grid-template-columns: 1fr min-content;
	align-items: center;
	background-color: hsl(var(--dialog-header-color-hsl) / 100%);
	padding-block: 0.6rem;
	position: sticky;
	top: 0;
	left: 0;
	max-width: 80vw;
}

dialog > header h1 {
	width: 100%;
	font-size: 1.2rem;
	text-align: center;
	margin-block: 0;
}

dialog > *:last-child {
	padding-block-end: 1rem;
}

#screenshots {
	display: grid;
}

#screenshots figure {
	cursor: zoom-in;
}

#screenshots picture {
	text-align: center;
}

#screenshots img {
	max-width: 100%;
}

#screenshots figcaption {
	max-width: 60%;
	margin: auto;
	text-align: center;
	font-size: 0.9rem;
}

#screenshots dialog {
	width: 80vw;
	height: 80vh;
	max-height: unset;
	cursor: zoom-out;
}

#screenshots dialog img {
	max-width: unset;
}

@media (prefers-color-scheme: dark) {
	:root {
		/* Main colors */
		--text-color-hsl: 0deg 0% 70%;
		--background-color-hsl: 0deg 0% 10%;
		--accent-color-hsl: 215deg 100% 30%;
		--link-text-color-hsl: 215deg 100% 70%;

		/* Dialogs */
		--dialog-header-color-hsl: 215deg 60% 20%;

		/* Tags */
		--tag-border-color-hsl: 215deg 100% 90%;
		--tag-background-color-hsl: 215deg 100% 90%;
		--tag-text-color-hsl: 0deg 0% 100%;

		/* Code block */
		--code-background-color-hsl: 0deg 0% 20%;
	}

	@font-face {
		font-family: "OpenMoji Color";
		src: url("/fonts/OpenMoji-black-glyf.woff2") format("woff2");
		unicode-range: U+21A9;
	}

	dialog[open] {
		border: solid hsl(var(--accent-color-hsl) / 100%) 1px;
		box-shadow: 0 0 10px hsl(var(--accent-color-hsl) / 100%);
	}

	button,
	.button {
		background: no-repeat hsl(var(--accent-color-hsl) / 25%);
	}
}