:root {
	--primary-hs: 210 100%;
	--danger-hs: 345 90%;
	--success-hs: 137 57%;

	--l-0: 0%;
	--l-10: 10%;
	--l-30: 30%;
	--l-40: 40%;
	--l-50: 50%;
	--l-60: 60%;
	--l-80: 80%;
	--l-90: 90%;
	--l-95: 95%;
	--l-100: 100%;

	--shadow-color: 0deg 0% 0%;
	--shadow-elevation-low:
		0.2px 0.6px 0.7px hsl(var(--shadow-color) / 0.13),
		0.7px 2px 2.3px -2.8px hsl(var(--shadow-color) / 0.12);
	--shadow-elevation-medium:
		0.2px 0.6px 0.7px hsl(var(--shadow-color) / 0.13),
		0.9px 2.5px 2.8px -1.4px hsl(var(--shadow-color) / 0.12),
		3.7px 10px 11.4px -2.8px hsl(var(--shadow-color) / 0.11);
	--shadow-elevation-high:
		0.2px 0.6px 0.7px hsl(var(--shadow-color) / 0.12),
		1.2px 3.1px 3.6px -0.6px hsl(var(--shadow-color) / 0.11),
		2.5px 6.6px 7.6px -1.1px hsl(var(--shadow-color) / 0.11),
		4.9px 13.2px 15.1px -1.7px hsl(var(--shadow-color) / 0.1),
		9.2px 24.8px 28.4px -2.3px hsl(var(--shadow-color) / 0.1),
		16.1px 43.5px 49.7px -2.8px hsl(var(--shadow-color) / 0.09);

	--focus-shadow: inset 0 0 0 1px hsl(var(--primary-hs) var(--l-40));

	display: contents;
}

[data-bs-theme="dark"],
[data-themify-theme="dark"] {
	--l-0: 100%;
	--l-10: 98%;
	--l-30: 78%;
	--l-40: 68%;
	--l-60: 48%;
	--l-80: 28%;
	--l-90: 18%;
	--l-95: 13%;
	--l-100: 8%;
}

@media (prefers-color-scheme: dark) {
	[data-themify-theme="media-query"] {
		--l-0: 100%;
		--l-10: 98%;
		--l-30: 78%;
		--l-40: 68%;
		--l-60: 48%;
		--l-80: 28%;
		--l-90: 18%;
		--l-95: 13%;
		--l-100: 8%;
	}
}

*,
::after,
::before {
	box-sizing: border-box;
}

html,
body {
	position: relative;
	width: 100%;
	height: 100%;
}

html {
	scroll-behavior: smooth;
}

body {
	background: hsl(0 0% var(--l-100));
	color: hsl(0 0% var(--l-0));
	margin: 0;
	box-sizing: border-box;
	font-family:
		-apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto,
		Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

a {
	color: hsl(var(--primary-hs) var(--l-40));
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

label {
	display: block;
}

input,
button,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
	-webkit-padding: 0.4em 0;
	padding: 0.4em;
	margin: 0;
	box-sizing: border-box;
	border: 1px solid hsl(0 0% var(--l-80));
	border-radius: 2px;
}

input:disabled {
	color: hsl(0 0% var(--l-80));
}

button {
	color: #333;
	background-color: #f4f4f4;
}

button:disabled {
	color: #999;
}

button:not(:disabled):active {
	background-color: #ddd;
}

button:focus {
	border-color: #666;
}

button.reset,
button.reset:active,
.reset-button,
.reset-button:active {
	border: none;
	margin: 0;
	padding: 0;
	width: auto;
	overflow: visible;
	text-align: inherit;

	background: transparent;

	/* inherit font & color from ancestor */
	color: inherit;
	font: inherit;

	/* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
	line-height: normal;

	/* Corrects font smoothing for webkit */
	-webkit-font-smoothing: inherit;
	-moz-osx-font-smoothing: inherit;

	/* Corrects inability to style clickable `input` types in iOS */
	-webkit-appearance: none;
}

.transition,
.btn-primary,
.btn-outline-primary {
	transition:
		color 0.15s ease-in-out,
		background-color 0.15s ease-in-out,
		border-color 0.15s ease-in-out,
		box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
	.transition,
	.btn-primary,
	.btn-outline-primary {
		transition: none;
	}
}

.btn-primary,
.btn-outline-primary {
	padding: var(--padding-y, 0.75rem) var(--padding-x, 1rem);
	border-radius: 0.75rem;
	border: 1px solid hsl(var(--primary-hs) var(--l-50));
}

.btn-primary {
	background-color: hsl(var(--primary-hs) var(--l-50));
	color: hsl(0 0% var(--l-100));
	box-shadow:
		inset 0 0.5rem 1rem rgba(255, 255, 255, 0.25),
		inset 0 -0.5rem 1rem rgba(0, 0, 0, 0.25),
		var(--shadow-elevation-medium);
}

.btn-outline-primary {
	background-color: transparent;
	color: hsl(var(--primary-hs) var(--l-40));
}

.btn-primary:hover,
.btn-outline-primary:hover {
	background-color: hsl(var(--primary-hs) var(--l-40));
	color: hsl(0 0% var(--l-100));
	box-shadow:
		inset 0 0.5rem 1rem rgba(255, 255, 255, 0.25),
		inset 0 -0.5rem 1rem rgba(0, 0, 0, 0.25),
		var(--shadow-elevation-medium);
}

.bi {
	display: inline-block;
	vertical-align: -0.125em;
}

.container {
	padding: 0 calc(50% - 24rem);
	margin-left: 1rem;
	margin-right: 1rem;
}

.card {
	border-radius: 0.5rem;
	box-shadow: 0 4px 12px hsla(0 0% var(--l-80) / 20%);
	background-color: hsl(0 0% var(--l-90));
}

.layout {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.content {
	flex-grow: 1;
}

.common-input {
	all: unset;
	box-sizing: border-box;
	cursor: text;
	padding: 0.75rem;
	background: hsl(0 0% var(--l-100));
	border-radius: 0.5rem;
	border: 1px solid hsl(0 0% var(--l-100));
}
.common-input:focus {
	border-color: hsl(var(--primary-hs) var(--l-40));
	box-shadow: var(--focus-shadow);
}

.form-select {
	border-radius: 0.5rem;
	border-color: hsl(0 0% var(--l-50));
	color: hsl(0 0% var(--l-0));
	background-color: hsl(0 0% var(--l-100));
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23808080' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 16px 12px;
	transition:
		border-color 0.15s ease-in-out,
		box-shadow 0.15s ease-in-out;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 2.25rem;
}

.form-select:focus {
	outline: 0;
	border-color: hsl(var(--primary-hs) var(--l-40));
	box-shadow: var(--focus-shadow);
}

.bg-body {
	background: hsl(0 0% var(--l-100));
}