html {
	--col-page: #f8f8f8;
	--col-back: Canvas;
	--col-text: #333333;
	--col-border: #808080;
	--col-shadow: #00000033;
	--col-button: #bfe0f3;
	--col-button-hover: #d2e9f7;
	--col-button-press: #a6cbe0;
	--col-button-text: #000000;

	--col-meta: #0000cc;
	--col-key: #000000;
	--col-sep: #666666;
	--col-value: #7700aa;
	--col-comment: #334433;

	@media (prefers-color-scheme: dark) {
		--col-page: #222222;
		--col-back: #111111;
		--col-text: #f8f8f8;
		--col-border: #aaaaaa;
		--col-shadow: #00000066;
		--col-button: #007fc8;
		--col-button-hover: #1698e9;
		--col-button-press: #04649c;
		--col-button-text: #ffffff;

		--col-meta: #88aaff;
		--col-key: #eeeeee;
		--col-sep: #bbbbbb;
		--col-value: #dd99ee;
		--col-comment: #bbeeaa;
	}

	@media (prefers-contrast: more) {
		--col-page: Canvas;
		--col-back: Canvas;
		--col-text: CanvasText;
		--col-border: CanvasText;
		--col-shadow: transparent;
		--col-button: ButtonFace;
		--col-button-hover: ButtonFace;
		--col-button-press: ButtonFace;
		--col-button-text: ButtonText;

		--col-meta: CanvasText;
		--col-key: CanvasText;
		--col-sep: CanvasText;
		--col-value: CanvasText;
		--col-comment: CanvasText;
	}
}

body {
	font: 1em sans-serif;
	margin: 32px 8px 8px;
	background: var(--col-page);
	color: var(--col-text);
}

body.sub {
	margin: 4px;
}

.yourip {
	text-align: center;
	font-size: 2em;

	code {
		user-select: all;
	}
}

#form {
	position: relative;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;

	label {
		display: flex;
		flex-flow: column;
		width: 100%;
		gap: 8px;
		align-items: center;
		color: var(--col-text);
	}

	#ip {
		font-size: 1.5rem;
		border-radius: 100px;
		padding: 8px calc(24px + 2.5em) 8px 24px;
		line-height: 1;
		background: var(--col-back);
		color: var(--col-text);
		border: 1px solid var(--col-border);
		align-self: stretch;
		box-shadow: 0 1px 2px var(--col-shadow);
	}

	#submit {
		margin: 0;
		padding: 0 12px;
		font-size: 1rem;
		position: absolute;
		right: 5px;
		bottom: 5px;
		height: calc(1.8rem + 8px);
		border: none;
		border-radius: 100px;
		background: var(--col-button);
		color: var(--col-button-text);
		cursor: pointer;

		&:hover {
			background: var(--col-button-hover);

			&:active {
				background: var(--col-button-press);
			}
		}
	}
}

.out {
	display: block;
	border: none;
	max-width: 1000px;
	margin: 48px auto 0;
	width: 100%;
	min-height: max(calc(100vh - 240px), 540px);
}

h2 {
	font: 2em sans-serif;
	margin: 32px 0 8px;
}

h3 {
	font: 1.5em sans-serif;
	margin: 32px 0 8px;
}

pre {
	font: 1.1em / 1.5 monospace;
	white-space: pre-wrap;
	background: var(--col-back);
	padding: 8px;
	margin: 4px 8px;
	padding: 8px;
}

.meta {
	color: var(--col-meta);
}

.key {
	font-weight: bolder;
	color: var(--col-key);
}

.sep {
	color: var(--col-sep);
}

.value {
	color: var(--col-value);
}

.comment {
	color: var(--col-comment);
}