:root {
	--fg: #232830;
	--bg: #dedede;
	--bg2: #e3e3e3;
	--border: #9ca0a4;
	--gray: #d0d0d0;
}

@media (prefers-color-scheme: dark) {
	:root {
		--fg: #d9d9d9;
		--bg: #101017;
		--bg2: #16161e;
		--border: #b0b0b0;
		--gray: #53515b;
	}
}

html,
body {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
	background-color: var(--bg);
	color: var(--fg);
	font-family: monospace;
	font-size: 100%;
}

header {
	display: flex;
	gap: 1em;
}

h1 {
	margin: 0;
}

hr {
	border: 0;
	height: 2px;
	background: var(--bg2);
	background-image: linear-gradient(
		to right,
		transparent,
		var(--border) 20%,
		var(--border) 80%,
		transparent
	);
}

pre {
	margin: 0;
}

img {
	margin: 0;
}

a {
	color: var(--fg);
	text-decoration: underline 2px solid;
	text-decoration-color: var(--fg);

	&:visited {
		color: var(--fg);
		text-decoration-color: var(--gray);
	}

	&:hover {
		text-decoration-color: var(--fg);
	}
	&:has(img) {
		text-decoration: none;
	}
}

.center {
	display: block;
	margin: 0;
	padding: 1em;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 80%;
	max-width: 950px;

	@media screen and (max-width: 450px) {
		width: 100%;
	}
}

.box {
	margin: 1em;
	padding: 1em;
	background-color: var(--bg2);
	border: 2px solid var(--border);
	border-image: radial-gradient(transparent 85%, var(--border)) 1;
}

.heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
}