@media screen {
	:root {
		color-scheme:                      normal;
		--body-background-color:           #f8f9fa;
		--background-color:                #f8f9fa;
		--nav-background-color:            rgba(248, 249, 250, 0.3);
		--nav-scroll-border-color:         rgba(0, 0, 0, 0.125);
		--section-header-background-color: #f8f9fa;
		--section-background-color:        #fff;
		--section-border-color:            rgba(0, 0, 0, 0.125);
		--text-color:                      #212529;
		--secondary-text-color:            #212529;
		--icon-color:                      #212529;
		--switch-background-color:         #ccc;
		--switch-knob-color:               #6c757d;
		--switch-knob-active-color:        #693;
		--slider-background-color:         #ccc;
		--slider-knob-color:               #6c757d;
		--button-background-color:         #ccc;
		--button-active-background-color:  #693;
	}
}

@media screen and (prefers-color-scheme: dark) {
	:root {
		color-scheme:                      dark;
		--body-background-color:           #2c2c2eff;
		--background-color:                #1c1c1eff;
		--nav-background-color:            #2c2c2e4b;
		--nav-scroll-border-color:         #ebebf52e;
		--section-header-background-color: #2c2c2e4b;
		--section-background-color:        #1c1c1e4b;
		--section-border-color:            #ebebf52e;
		--text-color:                      #fff;
		--secondary-text-color:            #ebebf599;
		--icon-color:                      #fff;
		--switch-background-color:         #ebebf52e;
		--switch-knob-color:               #9b9aa3;
		--switch-knob-active-color:        #693;
		--slider-background-color:         #ebebf52e;
		--slider-knob-color:               #9b9aa3;
		--button-background-color:         #ebebf52e;
		--button-active-background-color:  #693;
	}

	section img {
		filter: invert(.8);
	}
}

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

body {
	margin: 0;
	font-family: system-ui;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--text-color);
	text-align: left;
	background-color: var(--body-background-color) !important;
	padding-top: 5em;
}

a {
	color: var(--text-color);
	text-decoration: none;
}

a:hover {
	color: unset;
}

img {
	vertical-align: middle;
}

nav {
	background-color: var(--nav-background-color);
	-webkit-backdrop-filter: blur(3rem);
	backdrop-filter: blur(3rem);
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	padding: .5rem 1rem;
}

header {
	margin-left: auto;
	margin-right: auto;
	max-width: 50em;
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.scroll {
	border-bottom: .1em solid var(--nav-scroll-border-color);
}

nav span {
	padding-top: .3125rem;
	padding-bottom: .3125rem;
	font-size: 1.25rem;
	white-space: nowrap;
}

button {
	background-color: transparent;
	border: none;
	padding: 0;
}

button:not(:disabled) {
	cursor: pointer;
}

button .icon {
	height: 31px;
	border: 0;
	padding: 0 .3rem;
}

.icon {
	height: 31px;
	width: 31px;
	margin: .25em;
}

.icon svg {
	color: var(--icon-color);
	height: 31px;
	width: 31px;
}

.page {
	margin-left: auto;
	margin-right: auto;
	max-width: 50em;
}

section {
	border-radius: .25em;
	border: .1em solid var(--section-border-color);
	margin-bottom: .6em;
}

section > div {
	background-color: var(--section-background-color);
	border-bottom: .1em solid var(--section-border-color);
	padding: .25em;
	color: var(--secondary-text-color);
	display: flex;
	align-items: center;
}

section > div[data-type="html"] {
	display: block;
}

section > div:first-child {
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
}

section > div:last-child {
	border-bottom-right-radius: inherit;
	border-bottom-left-radius: inherit;
	border-bottom: 0;
}

section > .title {
	color: var(--text-color);
	padding-left: 1em;
	background-color: var(--section-header-background-color);
}

section > div .title{
	padding: .5em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

section > div .right {
	margin-left: auto;
	margin-right: .25em;
}


/* Switch Styling*/
.switch {
	background-color: var(--switch-background-color);
	display: inline-block;
	border-radius: 1.2em;
	padding: 0.2em 2em 0.2em 0.2em;
	cursor: pointer;
	display: inline-block;
	position: relative;
	vertical-align: top;
}

.switch input {
	display: none;
}

.switch span {
	position: relative;
	transition: transform 0.1s;
	cursor: pointer;
	background-color: var(--switch-knob-color);
	color: #fff;
	display: inline-block;
	padding: 0.25em 1em;
	border-radius: 1em;
}

.switch input:checked ~ .switch-handle {
	background-color: var(--switch-knob-active-color);
	color: #fff;
	transform: translateX(1.8em);
}


/* Slider Styling*/
.slider {
	width: 100%;
	-webkit-appearance: none;
	height: 10px;
	border-radius: 5px;   
	background: var(--slider-background-color);
	outline: none;
}

.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 0;
	background: var(--slider-knob-color);
	cursor: pointer;
	box-shadow: var(--c,0) 0 0 #ccc;
}

.slider::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 0;
	background: var(--slider-knob-color);
	cursor: pointer;
	box-shadow: var(--c,0) 0 0 #ccc;
}


/* Button Styling*/
.buttons > button:first-child {
	border-top-left-radius: .5em;
	border-bottom-left-radius: .5em;
}

.buttons > button:last-child {
	border-top-right-radius: .5em;
	border-bottom-right-radius: .5em;
}

.buttons > button {
	background-color: var(--button-background-color);
	color: var(--secondary-text-color);
	padding: .5em .7em;
	margin: 0;
}

.buttons > .active {
	background-color: var(--button-active-background-color);
}


/* Select Styling */
select {
	padding: .3em .4em;
}


/* Number Styling*/
.number {
	display: flex;
}
.number > button:first-child {
	border-top-left-radius: .5em;
	border-bottom-left-radius: .5em;
}

.number > button:last-child {
	border-top-right-radius: .5em;
	border-bottom-right-radius: .5em;
}

.number > button {
	background-color: var(--button-background-color);
	color: var(--secondary-text-color);
	padding: .5em .7em;
	margin: 0;
}

.number > input {
	width: 0;
	border-radius: 0;
	border: 0;
	margin: 0;
	padding: .5em .4em;
}

.loader {
	border: 4px solid #ccc;
	border-top: 4px solid #6c757d;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	animation: spin 1.5s linear infinite;
}


.working {
	animation-name: color;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
}

@keyframes spin {
	0% {   transform: rotate(0deg);   }
	100% { transform: rotate(360deg); }
}

@keyframes color {
	0% {   filter: brightness(85%); }
	50% {  filter: brightness(50%); }
	100% { filter: brightness(85%); }
}

@media screen and (max-width: 50em) {
	body {
		padding-top: 4em;
	}

	section > div:last-child {
		border-bottom: .1em solid var(--section-border-color);
	}

	section {
		border-radius: 0;
		border-width:  0;
		margin-bottom: 0;
	}
}

@media all and (display-mode: standalone) {
	body {
		user-select: none;
		-webkit-user-select: none;
		padding-bottom: 1em;
	}
}