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

:root {
	--hue: 200;
	--hsl-lightness: 39%;
	--hsl-bg-lightness: 95%;
	--hsl: hsl(var(--hue), 66%, var(--hsl-lightness));
	--hsl-bg: hsl(var(--hue), 100%, var(--hsl-bg-lightness));

	--primary-text: #584ca4;

	--bg-col: #E0E9F8;
	--color: #30354B;
	--label-color: #4B558C;

	--bg-offset: white;
}
:root[data-theme="light"] {
    --bg-col: #E0E9F8;
    --color: #30354B;
    --label-color: #4B558C;
    --hsl-lightness: 39%;
    --hsl-bg-lightness: 95%;
		--primary-text: #584ca4;

		--bg-offset: white;
}

:root[data-theme="dark"] {
    --bg-col: #19191c;
    --color: #d3d6e3;
    --label-color: #9da6dd;
    --hsl-lightness: 50%;
    --hsl-bg-lightness: 5%;
		--bg-offset: #363343;
		--primary-text: #a89ee6;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-col: #19191c;
        --color: #d3d6e3;
        --label-color: #9da6dd;
        --hsl-lightness: 50%;
        --hsl-bg-lightness: 5%;
				--bg-offset: #363343;
				--primary-text: #a89ee6;
    }
}

body {
	color: var(--color);
	background: var(--bg-col);
	transition: background 0.15s, color 0.05s;

	margin: 0;
	padding: 8px;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

	overflow-y: scroll;
}

* { margin: 0; }

a {
	color: rgb(0,100,200);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: rgb(0,80,160);
}

label {
	display: block;
}

input, button, select, textarea {
	font-family: inherit;
	font-size: inherit;
	padding: 0.4em 1em;
	margin: 0 0 0.5em 0;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 2px;
}
input::placeholder {
	color: inherit;
}

input:disabled {
	color: #ccc;
}

input[type="range"] {
	height: 0;
}

button {
	color: var(--color);
	background-color: #f4f4f4;
	outline: none;
}

button:disabled {
	color: #999;
}

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

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

button.underline-btn {
	border: none;
	padding: 0;
	margin: 0;
	background: 0;
	text-decoration: underline;
	cursor: pointer;
}

.styled {
	--hsl: hsl(var(--hue), 66%, var(--hsl-lightness));
	--hsl-bg: hsl(var(--hue), 100%, var(--hsl-bg-lightness));
	color: var(--hsl);
	background: var(--hsl-bg);
	transition: background 0.25s, color 0.05s;
	
	border: 1px solid var(--hsl);
	border-radius: 3px;
}
