:root {
	--c-blue: #675df5;
	--c-green: #7ad13f;
	--c-orange: #df9619;

	/* Catppuccin Mocha (slightly modified to be less purplish)*/
	--cp-base: #222;
	--cp-mantle: #181818;
	--cp-crust: #111111;
	--cp-text: #ccc;
	--cp-subtext1: #aaa;
	--cp-subtext0: #bbb;
	--cp-overlay2: #9399b2;
	--cp-overlay1: #7f849c;
	--cp-overlay0: #6c7086;

	--cp-rosewater: #f5e0dc;
	--cp-flamingo: #f2cdcd;
	--cp-pink: #f5c2e7:
	--cp-mauve: #cba6f7;
	--cp-red: #f38ba8;
	--cp-maroon: #eba0ac;
	--cp-peach: #fab387;
	--cp-yellow: #f9e2af;
	--cp-green: #a6d189;
	--cp-teal: #94e2d5;
	--cp-sky: #89dceb;
	--cp-sapphire: #74c7ec;
	--cp-blue: #89b4fa;
	--cp-lavender: #babbf1;

	--c-code-keyword: #fb4934;
	--c-code-string: #98971a;

	--c-link: #869330;
	--c-link-visited: #bb84b8;
	--c-link-hover: var(--cp-sapphire);

	--c-form-bg: #333;
	--c-form-shadow: #181818;
	--c-form-header-shadow: #222;

	--icon-filter: brightness(.7);

	--page-monospace-font: Noto Sans Mono, Roboto Mono, JetBrains Mono, monospace;

	--section-shadow: 0 0 1em #0006;
}

@media (prefers-color-scheme: light) {
	:root {
		/* Catppuccin Latte */
		--cp-base: #eff1f5;
		--cp-mantle: #e6e9ef;
		--cp-crust: #dce0e8;
		--cp-text: #4c4f69;

		--cp-subtext1: #5c5f77;
		--cp-subtext0: #6c6f85;
		--cp-overlay2: #7c7f93;
		--cp-overlay1: #8c8fa1;
		--cp-overlay0: #9ca0b0;

		--cp-red: #d20f39;
		--cp-green: #40a02b;

		--c-code-keyword: #8F0A27;
		--c-code-string: #314e1d;
	
		--c-link: #397916;
		--c-link-visited: #7b2982;
		--c-link-hover: #0842b4;

		--c-core-badge-fg: #111;
		--c-core-badge-bg: #f2cdcd;

		--c-generic-badge-bg: var(--cp-mantle);
		--c-null-badge-fg: #9a023a;
		--c-unique-badge-fg: #0842b4;
		--c-primary-key-badge-fg: #882f00;

		--c-form-bg: #fff;
		--c-form-shadow: var(--cp-crust);
		--c-form-header-shadow: var(--cp-mantle);

		--icon-filter: brightness(.2);

	}
}

@media print {
	:root {
		--section-shadow: 0 0 0 #0000;
		--cp-base: #fff;
		--cp-text: #000;
		--c-generic-badge-bg: #fff0;
	}

	body, body > main {
		display: block !important;
	}

	.article-body {
		margin: auto !important;
	}

	h1 {
		margin: 0;
	}

	header, h2, h3, h4, h5, dt {
		break-after: avoid;
	}

	dl {
		break-before: avoid;
	}

	.toc-sidebar, .table-of-contents, body > footer {
		display: none;
	}
}

:root {
	--c-hr: var(--cp-overlay0);

	--code-bg: var(--cp-crust);
	--code-fg: var(--cp-text);
	--code-pad: 0 .4ch;
	--code-radius: .2em;
}

/* Layout */

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	text-rendering: optimizelegibility;
	font-family: Noto Sans, Roboto, sans-serif;
}

body > main {
	flex-grow: 1;
	display: grid;
	grid-template-columns: 1fr 30ch 84ch 30ch 1fr;
	grid-template-rows: auto 1fr 2em;
	grid-template-areas:
		"header header header  header  header"
		".      .      main    sidebar ."
		".      .      .       sidebar .";
}

@media (max-width: 130ch) {
	body > main {
		grid-template-columns: 1fr 0 min(84ch, 100vw) 0 1fr;
		grid-template-rows: auto auto 1fr 2em;
		grid-template-areas:
			"header header header  header header"
			".      .      sidebar .      ."
			".      .      main    .      ."
			".      .      .    .      .";
	}

}

body > header {
	z-index: 1;
}

body > main > header {
	grid-area: header / auto / auto / span 5;
	box-shadow: var(--section-shadow);
}

body > main > .article-body {
	grid-area: main;
}

.article-body,  body > header > nav {
	margin-left: auto;
	margin-right: auto;
	max-width: 84ch;
	padding: .666rem;
	box-sizing: border-box;
}

main > .article-body {
	margin: 0;
}

.article-body > pre {
	padding: .666rem;
	background: var(--code-bg);
	border-radius: 1ch;
	margin: -.666rem;
}

@media screen {
	header, footer {
		background-color: var(--cp-crust);
		--c-form-shadow: var(--c-form-header-shadow);
	}
}


/* General element styling */

*:focus {
	outline: .2rem solid var(--cp-green);
	outline-offset: 2px;
	z-index: 100;
}

html {
	background-color: var(--cp-base);
	color: var(--cp-text);
	margin: 0;
	padding: 0;
	tab-size: 4;
}

a {
	color: var(--c-link);
}

a:visited {
	color: var(--c-link-visited);
}

a:hover {
	color: var(--c-link-hover);
}

dt, dd, p, li, table {
	line-height: 1.45;
}

h2 {
	border-bottom: .15rem solid var(--cp-overlay0);
}

h3 {
	color: var(--cp-subtext0);
	border-bottom: .15rem solid var(--cp-overlay0);
}

hr {
	border: none;
	border-top: .15rem solid var(--c-hr);
}

dd:not(:last-child) {
	margin-bottom: .3rem;
}

li {
	margin-top: .4rem;
}

kbd:not(samp kbd) {
	border: .1em solid;
	box-shadow: .1ch .1ch .1em #555;
	border-color: var(--cp-overlay0);
	border-radius: calc(var(--code-radius)*1.5);
	min-width: 2ch;
	display: inline-block;
	text-align: center;
}

samp kbd {
	font-weight: bold;
	font-style: italic;
}

code, samp, kbd {
	font-family: var(--page-monospace-font);
	padding: var(--code-pad);
}

code, samp {
	background: var(--code-bg);
	color: var(--code-fg);
	border-radius: var(--code-radius);
}

pre {
	font-family: var(--page-monospace-font);
	font-size: 1rem;
	overflow-x: auto;
}

pre > code:only-child {
	padding: 0;
}
/* Style definition lists */

@media (min-width: 60ch) {
	dl.max-one-dd > dt {
		float: left;
	}

	dl.max-one-dd > dd {
		margin-left: 12ch;
	}
}

dt {
	font-weight: bold;
}

dt::after {
	content: ":";
	margin-right: 1ch; /*Acts like a space following the colon*/
}

/* General table styling */

div.table-wrapper {
	width: var(--table-width);
	margin: var(--section-mg-table);
	padding: 0;
	overflow: auto;
}

table {
	border-collapse: collapse;
	color: var(--code-fg);
	margin: 0;
}

th, td {
	text-align: left;
	padding: .05em 1.5ch .05em .5ch;
	border: .15rem solid var(--cp-crust);
}

tr {
	background: var(--cp-mantle);
}

tr:hover, th, .table-subheading {
	background-color: var(--cp-crust);
}

/* Unobtanium search specific */

ul.search-results {
	padding-left: 2ch;
}

.tag {
	padding: 0 .5ch;
	border-radius: .2em;
	color: var(--cp-text);
	background: var(--cp-crust);
}

/* Icons */

.decoration-data-update:before {
	--icon: url("/icons/update.svg");
}

[class*="decoration-"]:before {
	background-position: left center;
	padding-left: 2.3ch;
	background-repeat: no-repeat;
	background-size: 1.1em;
	background-image: var(--icon);
	content: "";
	filter: var(--icon-filter);
}


/* Form styling*/

form.search > input, form.search > select {
	font-size: 1.2em;
}

.form-line > * {
	width: 100%;
	box-sizing: boder-box;
}

@media(min-width: 80ch) {
	.form-line {
		display: flex;
		gap: .5ch;
		margin: .5em 0;
	}

	.form-line > * {
		width: unset;
	}

	.form-line > :first-child {
		flex-grow: 1;
		border-radius: .4em 0 0 .4em;
	}
	.form-line > :last-child {
		border-radius: 0 .4em .4em 0;
	}

	.form-line > input, .form-line > select {
		border-radius: 0;
	}

	input[type="search"] {
		min-width: 10ch;
		max-width: 100%;
		width: 40ch;
	}

}

input, select {
	display: block;
	margin: .5em 0;
}

.button, .link-list > li > a, .button-paragraph > a {
	display: inline-block;
	color: var(--cp-text);
	text-decoration: none;
}

input, select, .button, .link-list > li > a, .button-paragraph > a {
	background-color: var(--c-form-bg);
	border: none;
	border-radius: .4em;
	padding: .3em .75ch;
	box-shadow: 0 var(--form-shadow-height, .3em) var(--c-form-shadow), 0 0 1em #0002;
}

.link-list {
	display: flex;
	flex-direction: column;
	justify-content: start;
	padding: 0;
}

.link-list > li {
	display: block;
}

.link-list > li > a, .button-paragraph > a {
	width: 100%;
	margin-bottom: .2em;
	box-sizing: border-box;
}

input[type="submit"], .button {
	cursor: pointer;
}

input[type="submit"]:hover, .button:hover, .button-paragraph > a:hover, .link-list > li > a:hover, select:hover:not(:focus) {
	--form-shadow-height: .225em;
	transform: translate(0, .075em);
	transition-timing-function: ease-out;
}

input[type="submit"]:active, .button:active, .button-paragraph > a:active, .link-list > li > a:active {
	--form-shadow-height: 0em;
	transform: translate(0, .3em);
	box-shadow: 0 0 var(--c-form-shadow);
}

.actions {
	text-align: right;
}

.box {
	border: .15rem solid var(--cp-crust);
	background: var(--cp-mantle);
	margin: 1rem 0;
	padding: .5rem 1ch;
	width: 100%;
	border-radius: .5rem;
	box-sizing: border-box;
}

.box > *:first-child {
	margin-top: 0;
}

.box > *:last-child {
	margin-bottom: 0;
}

.box.success {
	border-color: var(--cp-green);
}

.box.error {
	border-color: var(--cp-red);
}

.dnssec-badge {
	--badge-color: var(--cp-crust);
	box-shadow: inset 0 0 0 .1em var(--badge-color);
	background: var(--cp-mantle);
	display: inline-block;
	text-decoration: none;
	border-radius: .3em;
	padding: var(--code-pad);
	font-family: var(--page-monospace-font);
	cursor: help;
}

.link-list .dnssec-badge, .button-paragraph .dnssec-badge {
	float: right;
}

.dnssec-badge.dnssec-status-bogus {
	--badge-color: var(--cp-red);
}

.button-paragraph code, .link-list code {
	background: #0000;
}

.sitename > img {
	height: 1.2em;
	padding: 0 .3ch;
	margin-bottom: -.2em;
	margin-right: .5ch;
}

.sitename {
	text-decoration: none;
	font-size: 1.5rem;
}

.link-list small, .button-paragraph small {
	opacity: 0.8;
}

.decorated:not(.is-icon)::before {
	background-position: left center;
	padding-left: 2.3ch;
	background-repeat: no-repeat;
	background-size: 1.1em;
	background-image: var(--icon);
	content: "";
	filter: var(--icon-filter);
}

.is-icon {
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 1.1em;
	background-image: var(--icon);
	filter: var(--icon-filter);
}

.decorated.info-elevation {
	--icon: url("/lucide-icons.svg#mountain");
}

.decorated.wmo-95, .decorated.wmo-96, .decorated.wmo-99 {
	--icon: url("/lucide-icons.svg#mountain");
}

.decorated.wmo-0, .decorated.wmo-1 {
	--icon: url("/lucide-icons.svg#sun");
}

.decorated.wmo-2 {
	--icon: url("/lucide-icons.svg#cloud-sun");
}

.decorated.wmo-3 {
	--icon: url("/lucide-icons.svg#cloudy");
}

.decorated.wmo-45, .decorated.wmo-48 {
	--icon: url("/lucide-icons.svg#cloud-fog");
}

.decorated.wmo-51, .decorated.wmo-53, .decorated.wmo-53,
.decorated.wmo-56, .decorated.wmo-57,
.decorated.wmo-61, .decorated.wmo-63, .decorated.wmo-65,
.decorated.wmo-66, .decorated.wmo-67,
.decorated.wmo-80, .decorated.wmo-81, .decorated.wmo-82 {
	--icon: url("/lucide-icons.svg#cloud-rain");
}

.decorated.wmo-71, .decorated.wmo-73, .decorated.wmo-75, .decorated.wmo-77 {
	--icon: url("/lucide-icons.svg#cloud-snow");
}

.decorated.wmo-95, .decorated.wmo-96, .decorated.wmo-97 {
	--icon: url("/lucide-icons.svg#cloud-lightning");
}

@media (max-width: 60ch) {
	.icon-pri-sec {
		grid-template-rows: 2.6em auto auto !important;
		grid-template-columns: 1fr 2.2em 1fr !important;
		grid-template-areas:
			". icon ."
			"primary primary primary"
			"secondary secondary secondary" !important;
		text-align: center;
	}

	.weather-table th, .weather-table td {
		text-align: center;
		padding-right: 0.5ch;
	}
}

.icon-pri-sec {
	display: grid;
	grid-template-columns: 2.6em 1fr;
	grid-template-areas:
		"icon primary"
		"icon secondary";
}


.icon-pri-sec > :nth-child(1) {
	grid-area: icon;
	font-size: 2em;
}

.icon-pri-sec > img:nth-child(1) {
	filter: var(--icon-filter);
	height: 1.1em;
	margin-top: .15em;
}

.icon-pri-sec > :nth-child(2) {
	grid-area: primary;
	font-weight: 600;
}

.icon-pri-sec > :nth-child(3) {
	grid-area: secondary;
	color: var(--cp-subtext1);
	font-size: 0.95em;
}

.weather-table {
	width: 100%;
}

* {
	box-sizing: border-box;
}