@charset "UTF-8";

* {
	text-decoration: none;
	outline: none;
	border: none;
	color: var(--coal-text);
	/* font-family: "dejavu", Fira, system-ui, sans-serif; */
	font-family: "dejavu";
	transition: 0.1s ease-out;
}

::selection {
	color: var(--clay-text-above);
	background-color: var(--clay-above);
}

.unselectable {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.hidden:not(.animation) {
	position: absolute;
	display: none !important;
}

*[data-interactive="true"] {
	outline: 2px solid #00000000;
	cursor: pointer;
}

*[data-interactive="true"] :not(input, textarea) {
	cursor: pointer;
}

*[data-interactive="true"]:is(:hover, :focus) {
	outline: 2px solid var(--earth-above);
	background-color: var(--earth-above);
}

*[data-interactive="true"]:is(:hover, :focus)>label>input {
	outline: 2px solid var(--earth-above);
}

pre,
code {
	font-family: Hack, monospace;
}

input[type="range"] {
	--background: rgba(0, 0, 0, 0);
}

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

input {
	outline: var(--outline-size) var(--outline-type) var(--outline-color);
}

input[type="range"] {
	-webkit-appearance: none;
	margin: unset;
	background: transparent;
}

input[type="range"]:focus {
	outline: none;
}

input[type=range]::-ms-track {
	width: 100%;
	cursor: pointer;

	/* Hides the slider so custom styles can be added */
	background: transparent;
	border-color: transparent;
	color: transparent;
}

input[type="range"]::-moz-range-track {
	height: 6px;
	border-radius: 3px;
}

input[type="range"]::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: 3px;
}

input[type="range"].sand::-moz-range-track {
	border: 1px solid var(--sand-below);
	background-color: var(--sand);
}

input[type="range"].sand::-webkit-slider-runnable-track {
	border: 1px solid var(--sand-below);
	background-color: var(--sand);
}

input[type="range"].cloud::-moz-range-track {
	border: 1px solid var(--cloud-below);
	background-color: var(--cloud);
}

input[type="range"].cloud::-webkit-slider-runnable-track {
	border: 1px solid var(--cloud-below);
	background-color: var(--cloud);
}

input[type="range"]::-moz-range-progress {
	height: 6px;
}

input[type="range"].sand::-moz-range-progress {
	background-color: var(--sand-text);
}

input[type="range"].cloud::-moz-range-progress {
	background-color: var(--cloud-text);
}

input[type="range"]::-moz-range-thumb {
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	cursor: grab;
	border-radius: 100%;
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	margin-top: -9px;
	margin-left: -1px;
	width: 24px;
	height: 24px;
	cursor: grab;
	border-radius: 100%;
}

input[type="range"].sand::-moz-range-thumb {
	border: 2px solid var(--sand-text-below);
	background-color: var(--sand-text-above);
}

input[type="range"].sand::-webkit-slider-thumb {
	border: 2px solid var(--sand-text-below);
	background-color: var(--sand-text-above);
}

input[type="range"].cloud::-moz-range-thumb {
	border: 2px solid var(--cloud-text-below);
	background-color: var(--cloud-text-above);
}

input[type="range"].cloud::-webkit-slider-thumb {
	border: 2px solid var(--cloud-text-below);
	background-color: var(--cloud-text-above);
}

input[type="range"]:active::-moz-range-thumb {
	cursor: grabbing;
}

input[type="range"]:active::-webkit-slider-thumb {
	cursor: grabbing;
}

input[type="range"]+datalist>option {
	cursor: help;
}

:is(input:is([type="text"], [type="password"]), textarea)[required="true"] {
	--outline-size: 2px;
	--outline-type: solid;
	--outline-color: var(--earth-above);
}

:is(input:is([type="text"], [type="password"]), textarea):not([disabled], [readonly], .borderless):focus {
	--outline-size: 2px;
	--outline-type: solid;
	--outline-color: var(--earth);
	transition: 0s;
}

div.range {
	position: relative;
	display: flex;
	flex-direction: column;
}

div.range.small {
	width: 100px;
	flex-grow: 1;
}

div.range.small>input[type="range"] {
	margin: auto 0;
}

div.range.small>input[type="range"]+i.value {
	position: absolute;
	left: var(--left, 0px);
	margin-left: -10.5px;
	width: 21px;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-style: normal;
	font-weight: bold;
	pointer-events: none;
	transition: 0s;
}

div.range.small>input[type="range"].sand+i.value {
	color: var(--sand-text-below-1);
}

div.range.small>input[type="range"].sand+i.value.chrome {
	color: var(--sea-text-above);
	background: var(--sea);
	border-radius: 100%;
	width: 30px;
	height: 30px;
	margin-left: -10%;
}

div.range>datalist {
	display: flex;
	justify-content: space-between;
	padding: 0 3px;
}

input.clay {
	background-color: var(--input-clay);
}

:is(input, button).merged.right {
	margin-right: 0;
	border-radius: 3px 0 0 3px;
}

:is(input, button).merged.left {
	margin-left: 0;
	border-radius: 0 3px 3px 0;
}

button:is(.transparent, .transparent:is(:hover, :focus), .transparent:active) {
	background: unset;
}

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

a:is(:hover, :focus) {
	--color: var(--link-hover);
}

a:active {
	--color: var(--link-active);
	transition: unset;
}

label {
	--row-height: 26px;
	position: relative;
	height: var(--row-height);
	display: flex;
	overflow: hidden;
	border-radius: 2px;
}

label>i:first-of-type {
	position: absolute !important;
	margin: auto;
	color: var(--text-inverse-below-1) !important;
}

label * {
	/* color: var(--text-inverse); */
}

*[disabled],
*[readonly="true"] {
	cursor: not-allowed;
	/* filter: contrast(2) grayscale(0.8); */
	filter: contrast(0.6) grayscale(0.7);
}

.rounded {
	border-radius: 3px;
}

textarea {
	--padding-x: 12px;
	--padding-y: 8px;
	width: 100%;
	min-width: calc(100% - 24px);
	min-height: 120px;
	max-width: calc(100% - 24px);
	max-height: 300px;
	padding: var(--padding-y, 8px) var(--padding-x, 12px);
	font-size: smaller;
	overflow: hidden;
	border-radius: 3px;
	transition: 0s;
}

textarea:not(.horizontal) {
	resize: vertical;
}

select {
	--padding-left: 13px;
	--padding-right: 13px;
	padding: 3px var(--padding-right, 13px) 3px var(--padding-left, 13px);
	cursor: pointer;
	border-radius: 3px;
	background-color: var(--background-below);
}

select,
small {
	width: 60px;
}

select.medium {
	width: 150px;
}

select.large {
	width: 200px;
}

input {
	border-radius: 3px;
}

label>input {
	--padding-left: 8px;
	--padding-right: 8px;
	height: initial;
	padding: 0 var(--padding-right, 8px) 0 var(--padding-left, 8px);
	cursor: text;
}

input.small {
	width: calc(60px - var(--padding-left, 0px) - var(--padding-right, 0px));
}

input.medium {
	width: calc(150px - var(--padding-left, 0px) - var(--padding-right, 0px));
}

input.large {
	width: calc(200px - var(--padding-left, 0px) - var(--padding-right, 0px));
}

:is(input, select).center {
	text-align: center;
}

label>*:first-child.separated.right {
	margin: auto auto auto 0;
}

label>i.icon {
	top: calc((var(--row-height, 26px) - var(--height)) / 2)
}

i.icon {
	z-index: 10;
}

i.icon+input {
	padding-left: 30px;
}

i.icon.error {
	animation-duration: 2s;
	animation-name: icon-error;
	animation-fill-mode: forwards;
	animation-timing-function: ease-out;
}

:is(input, textarea).error {
	animation-duration: 1s;
	animation-name: input-error;
	animation-fill-mode: forwards;
	animation-timing-function: ease-in;
}

section.header>h1 {
	font-size: 1.3rem;
	line-height: 1.3rem;
}

section.header> :is(h2, h3) {
	font-size: 1.1rem;
	line-height: 1.1rem;
}

body {
	margin: 0;
	min-height: 100vh;
	padding: 0;
	display: flex;
	flex-direction: column;
	background-color: var(--background);
}

body>div.background {
	z-index: -50000;
	left: -350%;
	top: -350%;
	width: 500%;
	height: 500%;
	position: absolute;
	filter: blur(200px);
	animation-duration: 15s;
	animation-name: page-background-gradient;
	animation-iteration-count: infinite;
	background-repeat: no-repeat;
	animation-timing-function: linear;
	background-image: radial-gradient(circle,
			var(--cloud-below) 0%,
			rgba(0, 0, 0, 0) 100%);
}

aside {
	z-index: 500;
	grid-column: 1/ 4;
	grid-row: 2;
	overflow: hidden;
}

header {
	--box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
	z-index: 5000;
	position: absolute;
	display: flex;
	flex-direction: column;
	box-shadow: var(--box-shadow);
	-webkit-box-shadow: var(--box-shadow);
	-moz-box-shadow: var(--box-shadow);
}

main {
	height: unset;
	display: flex;
	flex-direction: column;
	justify-content: unset;
	align-items: center;
	gap: 10px;
	transition: 0s;
}

footer {
	z-index: 3000;
	position: absolute;
}

.stretched {
	width: 100% !important;
	flex-grow: 10 !important;
}

button {
	height: auto;
	padding: 0 20px;
	font-weight: bold;
	border-radius: 3px;
}

button.grass {
	--background: var(--grass);
	color: var(--grass-text);
	background-color: var(--background);
}

button.grass * {
	color: var(--grass-text);
}

button.grass:is(:hover, :focus) {
	color: var(--grass-text-above);
	background-color: var(--grass-above);
}

button.grass:is(:hover, :focus) * {
	color: var(--grass-text-above);
}

button.grass:active {
	color: var(--grass-text-below);
	background-color: var(--grass-below);
	transition: unset;
}

button.grass:active * {
	color: var(--grass-text-below);
	transition: unset;
}

button.grass.dense {
	--background: var(--grass-dense);
	color: var(--grass-dense-text);
	background-color: var(--background);
}

button.grass.dense * {
	color: var(--grass-dense-text);
}

button.grass.dense:is(:hover, :focus) {
	color: var(--grass-dense-text-above);
	background-color: var(--grass-dense-above);
}

button.grass.dense:is(:hover, :focus) * {
	color: var(--grass-dense-text-above);
}

button.grass.dense:active {
	color: var(--grass-dense-text-below);
	background-color: var(--grass-dense-below);
	transition: unset;
}

button.grass.dense:active * {
	color: var(--grass-dense-text-below);
	transition: unset;
}

.clay {
	--background: var(--clay);
	color: var(--clay-text);
	background-color: var(--background);
}

.clay * {
	color: var(--clay-text);
}

.clay:is(:hover, :focus) {
	color: var(--clay-text-above);
	background-color: var(--clay-above);
}

.clay:is(:hover, :focus) * {
	color: var(--clay-text-above);
}

.clay:active {
	color: var(--clay-text-below);
	background-color: var(--clay-below);
	transition: unset;
}

.clay:active * {
	color: var(--clay-text-below);
	transition: unset;
}

.earth {
	--background: var(--earth);
	color: var(--earth-text);
	background-color: var(--background);
}

.earth * {
	color: var(--earth-text);
}

button.earth:is(:hover, :focus) {
	color: var(--earth-text-above);
	background-color: var(--earth-above);
}

button.earth:is(:hover, :focus) * {
	color: var(--earth-text-above);
}

button.earth:active {
	color: var(--earth-text-below);
	background-color: var(--earth-below);
	transition: unset;
}

button.earth:active * {
	color: var(--earth-text-below);
	transition: unset;
}

.sand {
	--background: var(--sand);
	color: var(--sand-text);
	background-color: var(--background);
}

.sand * {
	color: var(--sand-text);
}

button.sand:is(:hover, :focus) {
	color: var(--sand-text-above);
	background-color: var(--sand-above);
}

button.sand:is(:hover, :focus) * {
	color: var(--sand-text-above);
}

button.sand:active {
	color: var(--sand-text-below);
	background-color: var(--sand-below);
	transition: unset;
}

button.sand:active * {
	color: var(--sand-text-below);
	transition: unset;
}

.river {
	--background: var(--river);
	color: var(--river-text);
	background-color: var(--background);
}

.river * {
	color: var(--river-text);
}

button.river:is(:hover, :focus) {
	color: var(--river-text-above);
	background-color: var(--river-above);
}

button.river:is(:hover, :focus) * {
	color: var(--river-text-above);
}

button.river:active {
	color: var(--river-text-below);
	background-color: var(--river-below);
	transition: unset;
}

button.river:active * {
	color: var(--river-text-below);
	transition: unset;
}

.cloud {
	--background: var(--cloud);
	color: var(--cloud-text);
	background-color: var(--background);
}

.cloud * {
	color: var(--cloud-text);
}

button.cloud:is(:hover, :focus) {
	color: var(--cloud-text-above);
	background-color: var(--cloud-above);
}

button.cloud:is(:hover, :focus) * {
	color: var(--cloud-text-above);
}

button.cloud:active {
	color: var(--cloud-text-below);
	background-color: var(--cloud-below);
	transition: unset;
}

button.cloud:active * {
	color: var(--cloud-text-below);
	transition: unset;
}

.snow {
	--background: var(--snow);
	color: var(--snow-text);
	background-color: var(--background);
}

.snow *:not(.earth, .clay, .sand, .ice, .cloud, .river, .sea, .coal) {
	color: var(--snow-text);
}

button.snow:is(:hover, :focus) {
	color: var(--snow-text-above);
	background-color: var(--snow-above);
}

button.snow:is(:hover, :focus) *:not(.earth, .clay, .sand, .ice, .cloud, .river, .sea, .coal) {
	color: var(--snow-text-above);
}

button.snow:active {
	color: var(--snow-text-below);
	background-color: var(--snow-deep);
	transition: unset;
}

button.snow:active *:not(.earth, .clay, .sand, .ice, .cloud, .river, .sea, .coal) {
	color: var(--snow-text-below);
	transition: unset;
}

.sea {
	--background: var(--sea);
	color: var(--sea-text);
	background-color: var(--background);
}

.sea * {
	color: var(--sea-text);
}

button.sea:is(:hover, :focus) {
	color: var(--sea-text-above);
	background-color: var(--sea-above);
}

button.sea:is(:hover, :focus) * {
	color: var(--sea-text-above);
}

button.sea:active {
	color: var(--sea-text-below);
	background-color: var(--sea-below);
	transition: unset;
}

button.sea:active * {
	color: var(--sea-text-below);
	transition: unset;
}

.coal {
	--background: var(--coal);
	color: var(--coal-text);
	background-color: var(--background);
}

.coal * {
	color: var(--coal-text);
}

button.coal:is(:hover, :focus) {
	color: var(--coal-text-above);
	background-color: var(--coal-above);
}

button.coal:is(:hover, :focus) * {
	color: var(--coal-text-above);
}

button.coal:active {
	color: var(--coal-text-below);
	background-color: var(--coal-below);
	transition: unset;
}

button.coal:active * {
	color: var(--coal-text-below);
	transition: unset;
}


button.wide {
	flex-grow: 1;
}

section#menu {
	position: absolute;
	width: 100%;
	height: 120px;
}

section#menu>nav {
	top: 0;
	position: sticky;
	display: flex;
	justify-content: center;
	background: var(--menu-background);
}

section#menu>nav>ul {
	margin: 0;
	min-width: 800px;
	width: 80%;
	height: 45px;
	padding: 0;
	display: flex;
	gap: 10px;
	list-style: none;
}

section#menu>nav>ul>li {
	height: 100%;
	display: flex;
	align-items: center;
}

section#menu>nav>ul>li.divided {
	margin-left: 9px;
}

section#menu>nav>ul>li.divided:before {
	content: "";
	margin-right: 9px;
	height: 60%;
	border-left: 1px solid var(--menu-text-below);
}

section#menu>nav>ul>li#account:last-child {
	margin-left: auto;
}

section#menu>nav>ul>li>button {
	height: 100%;
	padding: 0 30px;
	color: var(--menu-text);
}

section#menu>nav>ul>li>button:is(:hover, :focus) {
	color: var(--menu-text-above);
}

section#menu>nav>ul>li>button:active {
	transition: 0s;
	color: var(--menu-text-below);
}
