/* general stuffs */
:root {
	color-scheme: light;
	--background: #FFFFFF;
	--backdrop: #CFCFCF;
	--foreground: #000000;
	--accent0: #007FFF;
	--accent1: #7F00FF;
	--accent2: #FF7F00;
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		--background: #202020;
		--backdrop: #101010;
		--foreground: #FFFFFF;
		--accent0: #7FFFFF;
		--accent1: #FF7FFF;
		--accent2: #FFFF7F;
	}
}

:root {
	scrollbar-width: none;
	
	background-color: var(--background);
	color: var(--foreground);
	accent-color: var(--accent0);
	
	font-family: "Courier New", monospace, sans-serif;
	word-break: keep-all; /* ADD ​ TO STUFF!!! */
}

body {
	margin: 0;
	box-sizing: border-box;
	min-height: 100dvh;
	background-color: var(--background);
}

main {
	padding: 2em;
	background-color: var(--background);
}

/* literally just the details tag lmao*/
summary::after {
	content: " (click to expand)";
	opacity: 50%;
	font-size: smaller;
	font-weight: lighter;
}

details[open] {
	margin-bottom: 1em;
}

details[open] > summary::after {
	content: " (click to collapse)";
}

summary:hover,
summary:active,
details[open] > summary {
	font-weight: bold;
}

.specs > tbody > tr > :first-child {
	font-weight: bold;
}

.specs > tbody > tr > :last-child {
	padding-left: 1em;
}

/* buttons! */
.buttons {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	margin-top: 1em;
}

.buttons * {
	font-size: 0;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	object-fit: fill;
	width: 88px;
	height: 31px;
	margin: 0;
	padding: 0;
}

/* fixes oddly large gap at top and bottom */
body > main > :first-child {
	margin-top: 0;
}
body > main > :last-child {
	margin-bottom: 0;
}

/* links */
a {
	color: var(--accent0);
}

a:visited {
	color: var(--accent1);
}

a:active,
a:hover {
	color: var(--accent2);
}

/* misc */
img {
	max-width: 100%;
}

footer {
	text-align: end;
	font-size: small;
	opacity: 50%;
}

iframe {
	border: none;
}

/* responsive stuff */
@media (min-width: 960px) {
	/* thank you slonk */
	:root {
		--target-ratio: 0.6;
		--largest-possible: min(
			100% * var(--target-ratio),  /* target size */
			1600px * var(--target-ratio) /* max size */
		);
		--width: max(
			var(--largest-possible),
			1200px * var(--target-ratio) /* min size */
		);
	}
	
	body {
		padding: 4em 0;
		background: var(--backdrop);
	}

	main {
		padding: 4em;
	}

	body > * {
		margin: auto;
		box-sizing: border-box;
		width: var(--width);
	}
}