@font-face{
	font-family: "Ubuntu Sans";
	src: url("./ubuntu-sans.ttf") format("truetype");
	font-style: normal;
}

@font-face {
	font-family: "Ubuntu Sans";
	src: url("./ubuntu-sans-italic.ttf") format("truetype");
	font-style: italic;
}

@font-face {
	font-family: "Ubuntu Sans Mono";
	src: url("./ubuntu-sans-mono.ttf") format("truetype");
	font-style: italic;
}

@media screen and (min-aspect-ratio: 1.2) {
	:root {
		--content-width: calc(min(120vh, 50vw) - var(--min-content-pad));
	}

	.grid-list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		padding: var(--dims-huge);
		gap: var(--dims-reg);
	}
	.scenario-card {
		height: 64vh;
		flex-flow: column nowrap;
	}
	.scenario-card-icon-container {
		max-height: 32vh;
		min-height: 32vh;
		width: 100%;
	}
}

@media screen and (max-aspect-ratio: 1.2) {
	:root {
		--content-width: calc(100vw - var(--min-content-pad));
	}

	.grid-list {
		display: flex;
		flex-flow: column nowrap;
		padding: var(--dims-huge);
		gap: var(--dims-reg);
	}
	.scenario-card {
		max-height: 32vh;
		flex-flow: row nowrap;
	}
	.scenario-card-icon-container {
		max-height: 100%;
		width: 20%;
	}
}

:root {
	color-scheme: only dark;

	--color-base: #171717;
	--color-base-semi: rgb(23 23 23 / 70%);
	--color-secondary: #777;
	--color-subtext: #868686;
	--color-accent: #DA4000;
	--color-text: #EDEDED;

	--font-smol: normal 400 14px/18px "Ubuntu Sans";
	--font-main: normal 400 18px/22px "Ubuntu Sans";
	--font-bold: normal 600 20px/24px "Ubuntu Sans";

	--dims-smol:  4px;
	--dims-reg:   8px;
	--dims-huge: 16px;

	--min-content-pad: min(32px, 2vw);

	background-color: black;

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

	font: var(--font-main);
}

* {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	border: none;
	overflow: auto;
	overflow-x: hidden;
}

body {
	width: 100%;
	height: 100svh;
	background-color: var(--color-base);
	color: var(--color-text);
}

a, a:visited {
	color: var(--color-accent);
}


h1, h2, h3, h4, h5, h6 {
	margin: 0;
	line-height: 1em;
}

img {
	display: block;
	max-width: 100%;
}

hr {
	width: 100%;
}

p {
	margin: 0;
}

ul, ol {
	margin: 0;
	padding: 0;
	padding-inline-start: var(--dims-huge);
}

textarea {
	resize: vertical;
	max-height: 50vh;
}

dialog {
	width: 100%;
	height: auto;
	max-width: none;
	max-height: none;
	border: none;
	padding: 0;
	margin: 0;
	background: transparent;
	backdrop-filter: blur(16px);
	outline: none;
	color: inherit;
}
dialog > form {
	display: flex;
	margin: auto;
	width: var(--content-width);
	/* min-width: 80vw; */
	max-height: 80vh;
	overflow-y: auto;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

	flex-flow: column nowrap;
	background: var(--color-base);
	border-radius: var(--dims-reg);
	padding: var(--dims-reg);
	gap: var(--dims-huge);

	border: 2px solid var(--color-accent);
	box-shadow: 0 0 var(--dims-smol) var(--color-accent);
}

details > div {
	padding: var(--dims-reg);
}
summary {
	cursor: pointer;
}

input {
	min-width: unset;
}

dl {
	margin: 0;
}

code {
	font-family: "Ubuntu Sans Mono";
	font-size: 16px;
}

pre {
	white-space: break-spaces;
}

progress {
	appearance: none;
	border: 1px solid var(--color-secondary);
	height: 4px; /* Set a specific height */
	border-radius: 1000px;
	background-color: transparent; /* Default track color */
}
/* WebKit/Blink browsers */
progress::-webkit-progress-bar {
	background-color: transparent;
}
progress::-webkit-progress-value {
	background-color: var(--color-accent);
}
/* Firefox */
progress::-moz-progress-bar {
	background-color: var(--color-accent);
}