:root {
	--pico-font-size: 100%;
	--pico-border-radius: 0.375rem;
	--pico-border-width: 2px;
	--pico-font-family: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
		'Segoe UI Symbol', 'Noto Color Emoji';
	--pico-transition-duration: 0;
	--pico-transition: var(--pico-transition-duration) ease-in-out;
}

@media only screen and (min-width: 768px) {
	:root {
		--pico-font-size: 110%;
	}
}

html {
	scrollbar-gutter: stable;
}

/* Make clicks pass-through */
#nprogress {
	pointer-events: none;
}

#nprogress .bar {
	background: var(--pico-primary);
	position: fixed;
	z-index: 1031;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
}

/* Fancy blur effect */
#nprogress .peg {
	display: block;
	position: absolute;
	right: 0px;
	width: 100px;
	height: 100%;
	box-shadow:
		0 0 10px var(--pico-primary),
		0 0 5px var(--pico-primary);
	opacity: 1;
	-webkit-transform: rotate(3deg) translate(0px, -4px);
	-ms-transform: rotate(3deg) translate(0px, -4px);
	transform: rotate(3deg) translate(0px, -4px);
}

input:not([type='checkbox'], [type='radio']),
select,
textarea {
	margin-bottom: 0;
}

:where(:root),
article,
button,
input,
select,
textarea {
	transition: background-color var(--pico-transition);
}

article,
.card {
	border: 2px solid var(--pico-border-color);
	margin-bottom: 0;
}

.card {
	border-radius: var(--pico-border-radius);
	background: var(--pico-card-background-color);
	box-shadow: var(--pico-card-box-shadow);
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
label {
	transition: color var(--pico-transition);
}

td,
th {
	transition: all var(--pico-transition);
	border-collapse: collapse;
	background-clip: padding-box;
	padding: calc(var(--pico-spacing) / 2.5) var(--pico-spacing);
}

th,
.table-footer {
	background-color: var(--pico-card-sectioning-background-color);
}

td {
	background-color: var(--pico-card-background-color);
}

:is(button, [type='submit'], [type='button'], [role='button']).outline.secondary,
[type='reset'].outline {
	--pico-border-color: inherit;
	transition: all var(--pico-transition);
}

.container {
	max-width: 100%;
	padding-inline: var(--pico-spacing);
}

.toggle-sun {
	display: var(--pico-display-sun);
}

.toggle-moon {
	display: var(--pico-display-moon);
}

/* Orange color for light color scheme (Default) */
/* Can be forced with data-theme="light" */
[data-theme='light'],
:root:not([data-theme='dark']) {
	--pico-text-selection-color: rgba(240, 96, 72, 0.25);
	--pico-primary: #c72240;
	--pico-primary-border: #c72240cc;
	--pico-primary-background: #008563;
	--pico-primary-underline: rgba(197, 47, 33, 0.5);
	--pico-primary-hover: #9b2318;
	--pico-primary-hover-background: #086b53;
	--pico-primary-focus: transparent;
	--pico-primary-inverse: #fff;
	--pico-ok: #008563;
	--pico-ok-bg: #008563;
	--pico-error: #c72240;
	--pico-error-bg: #c72240;
	--pico-border-color: #c5cad6;
	--pico-range-border-color: #d6d8de;
	--pico-range-active-border-color: #d6d8de;
	--pico-range-thumb-border-color: var(--pico-color);
	--pico-range-thumb-color: var(--pico-primary-background);
	--pico-display-moon: none;
	--pico-display-sun: block;
}

/* Orange color for dark color scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		--pico-text-selection-color: rgba(241, 121, 97, 0.1875);
		--pico-primary: #f7525a;
		--pico-primary-border: #f7525acc;
		--pico-primary-background: #038564;
		--pico-primary-underline: rgba(241, 121, 97, 0.5);
		--pico-primary-hover: #f5a390;
		--pico-primary-hover-background: #109b78;
		--pico-primary-focus: transparent;
		--pico-primary-inverse: #fff;
		--pico-ok: #1cce93;
		--pico-ok-bg: #22926d5b;
		--pico-error: #f7525a;
		--pico-error-bg: #8f2738c7;
		--pico-border-color: #2a3140;
		--pico-range-border-color: var(--pico-muted-color);
		--pico-range-active-border-color: var(--pico-muted-color);
		--pico-range-thumb-border-color: var(--pico-background-color);
		--pico-range-thumb-color: var(--pico-primary-background);
		--pico-display-moon: block;
		--pico-display-sun: none;
	}
}

/* Orange color for dark color scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme='dark'] {
	--pico-text-selection-color: rgba(241, 121, 97, 0.1875);
	--pico-primary: #f7525a;
	--pico-primary-border: #f7525acc;
	--pico-primary-background: #038564;
	--pico-primary-underline: rgba(241, 121, 97, 0.5);
	--pico-primary-hover: #f5a390;
	--pico-primary-hover-background: #109b78;
	--pico-primary-focus: transparent;
	--pico-primary-inverse: #fff;
	--pico-ok: #1cce93;
	--pico-ok-bg: #22926d5b;
	--pico-error: #f7525a;
	--pico-error-bg: #8f2738c7;
	--pico-border-color: #2a3140;
	--pico-range-border-color: var(--pico-muted-color);
	--pico-range-active-border-color: var(--pico-muted-color);
	--pico-range-thumb-border-color: var(--pico-background-color);
	--pico-range-thumb-color: var(--pico-primary-background);
	--pico-display-moon: block;
	--pico-display-sun: none;
}