/* https://picocss.com/docs */
@import url("https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css");
@import url("https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css");
@import url("https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.colors.min.css");

:host, :root {
	--content-width: 1200px;
	--pico-transition: 200ms cubic-bezier(.76, 0, .24, 1);
}

:host:not([data-theme="dark"]), :root:not([data-theme="dark"]), [data-theme="light"] {
	--pico-header-background: rgba(255, 255, 255, .8);
  	--pico-header-border-color: transparent;
}

@media only screen and (prefers-color-scheme: dark) {
	:host:not([data-theme]), :root:not([data-theme]) {
		--pico-header-background: rgba(19, 22.5, 30.5, .9);
    	--pico-header-border-color: rgba(32, 38, 50, .9);
	}
}

button:has(svg),
.button:has(svg),
a:has(> svg) {
	display: inline-flex !important;
	gap: 0.25rem;
	justify-content: center;
	align-items: center;
}

button svg,
.button svg,
a svg {
	height: 100%;
	width: auto;
}

form input {
	width: 100%;
}

form button[type="submit"] {
	margin-top: 0.5rem;
}

a.implicit-link {
	--pico-color: inherit !important;
	color: var(--pico-color);
	text-decoration: inherit;
}

a.implicit-link > article {
	transition: inherit;
}

a.implicit-link:is(:hover, :active, :focus) > article {
	background-color: var(--pico-form-element-selected-background-color);
}

section > a,
article > a {
	display: inline-block;
	margin-block-end: 1em;
}

:is(article, section) > :is(h1, h2, h3, p, a):last-child {
	margin-bottom: 0;
}

p > small {
	color: var(--pico-muted-color);
	white-space: nowrap;
}

article, section {
	margin-bottom: calc(var(--pico-block-spacing-vertical) * 4);
}

.home article, .home section {
	margin-bottom: calc(var(--pico-block-spacing-vertical) * 16);
}

.logo > * {
	display: flex;
	gap: 0.5em;
	justify-content: center;
	align-items: center;
	margin: 0;
}

a.logo {
	text-decoration: none;
}

.logo > * > svg {
	height: 1em;
}

.home section:not(:first-child) .grid a:has(> svg) {
	display: flex;
	gap: 1rem;
	flex-direction: column;
}

.home section:not(:first-child) .grid svg {
	display: block;
	width: 5rem;
	height: auto;
	margin: 0 auto;
}

body > header {
	width: 100%;
	max-width: 100%;
	padding: 0;
	border-bottom: var(--pico-border-width) solid var(--pico-header-border-color);
	box-shadow: var(--pico-card-box-shadow);
	background-color: var(--pico-header-background);
}

body > header > nav {
	max-width: var(--content-width);
	margin: 0 auto;
}

body > main {
	padding-block: calc(var(--pico-spacing) * 5);
}

body > main > section:last-of-type {
	margin-bottom: 0;
}

body > footer {
	width: 100%;
	max-width: 100%;
	--pico-block-spacing-vertical: var(--pico-spacing);
}

body > footer > article {
	margin-bottom: 1rem !important;
}

body > footer > article > nav {
	max-width: var(--content-width);
	margin: 0 auto;
}

.align-center {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.align-right {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
}

article:has(.article-thumbnail) {
	min-height: 7rem;
}

.article-thumbnail {
	float: right;
	width: 5rem;
	height: auto;
	margin-left: 1rem;
	margin-bottom: 1rem;
}

.article-list article {
	margin-bottom: var(--pico-spacing);
}

.large-thumbnail {
	width: 10rem;
}

.danger {
	--pico-background-color: var(--pico-color-red-500);
	--pico-border-color: var(--pico-color-red-500);
}

.danger:is(:hover, :active, :focus) {
	--pico-background-color: var(--pico-color-red-600);
	--pico-border-color: var(--pico-color-red-600);
}

.row, .button-row {
	display: flex;
	gap: 1em;
	flex-direction: row;
	align-items: center;
}

.button-row {
	margin-top: 0.5rem;
	margin-bottom: var(--pico-spacing);
}

.button-row > button,
.button-row > a[role="button"] {
	flex: 1;
	margin: 0 !important;
}

.row > p {
	margin: 0;
}

.column {
	display: flex;
	gap: 1em;
	flex-direction: column;
}

.float-right {
	float: right;
	margin-left: 1em;
}

.float-right.column {
	align-items: flex-end;
}

.flex-grid {
	display: flex;
	column-gap: var(--pico-grid-column-gap);
  	row-gap: var(--pico-grid-row-gap);
	flex-direction: row;
}

.overflow {
	flex-wrap: wrap;
}

@media (max-width: 576px) {
	body > header > nav {
		padding-left: var(--pico-block-spacing-horizontal);
		padding-right: var(--pico-block-spacing-horizontal);
	}
}

@media (min-width: 576px) {
	:host, :root {
		--content-width: 510px;
	}
}

@media (min-width: 768px) {
	:host, :root {
		--content-width: 700px;
	}
}

@media (min-width:1024px) {
	:host, :root {
		--content-width: 950px;
	}
}

@media (min-width: 1280px) {
	:host, :root {
		--content-width: 1200px;
	}
}

@media (min-width:1536px) {
	:host, :root {
		--content-width: 1450px;
	}
}