:root {
	--background: rgb(23,25,29);
	--text: rgb(171, 194, 223);
	--text-highlighted: rgb(121, 144, 173);
	--heading: rgb(103, 101, 228);
	--warn: rgb(226, 193, 89);
	--success: rgb(118, 221, 90);
	--error: rgb(228, 56, 60);
	--info: rgb(81, 112, 234);
	--block-background: rgb(41, 44, 53);
	--block-highlighted: rgb(80, 82, 95);
	--ping: #e3193b;
	--pingalpha: #e3193b99;
	font-size: 16px;
}

* {
	box-sizing: border-box !important;
	font-family: VarelaRound, sans-serif;
	margin: 0;
	padding: 0;
	zoom: 1 !important;
	color-scheme: dark !important;
}

body * {
	border-radius: .5rem;
}

main {
	padding: 0 1rem;
	max-width: 1200px;
	min-width: 400px;
	min-height: 100%;
	width: 95%;
}

.blur-bg {
	backdrop-filter: blur(35px) brightness(50%);
}

.w10, .w20, .w30, .w40, .w50, .w60, .w70, .w80, w90, .w100 {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.w10 {
	width: 10%;
}

.w20 {
	width: 20%;
}

.w30 {
	width: 30%;
}

.w40 {
	width: 40%;
}

.w50 {
	width: 50%;
}

.w60 {
	width: 60%;
}

.w70 {
	width: 70%;
}

.w80 {
	width: 80%;
}

.w90 {
	width: 90%;
}

.w100 {
	width: 100%;
}

.wh100 {
	width: 100%;
	height: 100%;
}

.div-center {
	display: block;
	margin: auto;
}

.flex {
	display: flex;
}

.flex-row {
	flex-direction: row;
}

.flex-col {
	flex-direction: column;
}

.float-right {
	float: right;
}

.float-left {
	float: left;
}

.clearfix {
	clear: both;
}

.opacity-hover:hover {
	opacity: 0.5;
}

.link-cursor, .link-cursor:hover {
	cursor: pointer;
}

.img-box {
	max-height: 4rem;
	margin-right: 0.5rem;
}

.big-character {
	max-width: 6em;
	max-height: 6em;
	min-width: 6em;
	min-height: 6em;
	border: solid 0.3em var(--text);
	border-radius: 3em;
	margin-right: 0.5em;
}

.character {
	max-width: 3em;
	max-height: 3em;
	min-width: 3em;
	min-height: 3em;
	border: solid 0.2em var(--text);
	border-radius: 1.5em;
	margin-right: 0.5em;
}

.textbox-x {
	font-size: 1.5rem;
	font-weight: 900; 
}

.connect-left {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	border-left: none;
	margin-left: -0.26rem !important;
}

.connect-right {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.fullscreen {
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	min-width: 100vw;
	min-height: 100vh;
	max-width: 100vw;
	max-height: 100vh;
	overflow: hidden;
	padding: 0;
	margin: 0;
}

.fullscreen, .fullscreen * {
	position: fixed;
	top: 0;
	left: 0;
}

button, input, select, textarea, .button {
	padding: .5rem;
	background: var(--background);
	border-radius: .25rem;
	border: solid 1px var(--text);
	color: var(--text);
	box-shadow: none;
	outline: none;
	display: inline;
	transition: all .2s ease-out .05s;
}

.token input, .token button {
	padding: .5em;
	border-radius: .25em;
	font-size: inherit !important;
	border: solid 0.1em var(--text);
}

input[type=number]::-webkit-inner-spin-button {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	margin: 0 !important;
	padding: 0 !important;
	background: blue;
}

input[type=checkbox] {
	height: 1em;
	width: 1em;
	margin: 0 0.5em;
}

button[disabled], input[readonly], select[disabled], input[disabled] {
	cursor: not-allowed !important;
	filter: grayscale(100%) brightness(75%) !important;
	box-shadow: none !important;
	color: var(--text) !important;
	background: var(--background) !important;
	border: solid 1px var(--text) !important;
}

.fixed-sidebar {
	position: fixed;
	height: auto;
	width: 14rem;
	z-index: 100;
	padding: 1rem !important;
}

.margin-sidebar {
	margin: 0 14rem;
}

.margin-sidebar.left-0 {
	margin: 0 0 0 14rem;
}

.margin-sidebar.right-0 {
	margin: 0 14rem 0 0;
}

.info-bar {
	z-index: 90;
	position: fixed;
	left: 50%;
	transform: translate(-50%, 0);
	padding: 0.5rem 2.5rem !important;
	border-radius: .5rem !important;
}

.info-bar.bottom-0, .fixed-sidebar.bottom-0, .fixed.bottom-0 {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

	.info-bar.top-0, .fixed-sidebar.top-0, .fixed.top-0 {
		border-top-left-radius: 0 !important;
		border-top-right-radius: 0 !important;
	}

.info-bar.right-0, .fixed-sidebar.right-0, .fixed.right-0 {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.info-bar.left-0, .fixed-sidebar.left-0, .fixed.left-0 {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

.map-selection {
	padding: 1rem;
	max-width: 100%;
	color: var(--text);
	text-decoration-color: var(--background);
	background: var(--background);
	border: solid 1px var(--text);
	transition: all .2s ease-out .05s;
	margin-bottom: 1rem;
}

.map-selection:hover {
	background: var(--text);
	color: var(--background);
	text-decoration: underline;
}

.map-selection.active {
	background: var(--text);
	color: var(--background);
	padding: 0.5rem;
}

.right-0 {
	right: 0;
}

.left-0 {
	left: 0;
}

.bottom-0 {
	bottom: 0;
}

.top-0 {
	top: 0;
}

.margin-bottom {
	margin-bottom: 1rem;
}

.margin-top {
	margin-top: 1rem;
}

.divider {
	width: auto;
	border-radius: 0;
	margin: 1rem 0;
	border-bottom: solid 1px var(--text-highlighted);
}

.margin-lr-0 {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.margin-lr-1 {
	margin-left: 1rem !important;
	margin-right: 1rem !important;
}

.margin-tb-0 {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.margin-tb-1 {
	margin-top: 1rem !important;
	margin-bottom: 1rem !important;
}

input::placeholder, textarea::placeholder {
	color: var(--text);
	opacity: .5;
}

button:active, button:hover, button.active, .button:hover, .button:active, .button.active {
	background: var(--text);
	color: var(--background);
}

button:hover, input:hover, .button:hover  {
	box-shadow: var(--text-highlighted) 0 0 10px;
}

@font-face {
	font-family: "VarelaRound";
	src: url('/static/font/VarelaRound.ttf') format('truetype');
}

body {
	color: var(--text);
	background: var(--background);
	margin: 0;
	display: flex;
	justify-content: center;
	font-size: 1rem;
}

*::-webkit-scrollbar {
	width: 10px;
}

*::-webkit-scrollbar-track {
	background: var(--block-background);
	border-radius: 1px;
}

*::-webkit-scrollbar-thumb {
	background: var(--text-highlighted);
	border: 3px solid var(--block-background);
	border-radius: 5px;
}

body::-webkit-scrollbar-track {
	background: var(--background) !important;
}

body::-webkit-scrollbar-thumb {
	border-color: var(--background) !important;
}

@supports not selector(::-webkit-scrollbar) {
	body {
		scrollbar-color: var(--text-highlighted) var(--background) !important;
	}

	* {
		scrollbar-color: var(--text-highlighted) var(--block-background);
	}
}

code {
	font-family: Consolas, monospace !important;
}

.centered {
	text-align: center;
}

.underlined {
	text-decoration: underline;
}

h1, h2, h3, h4, h5 {
	color: var(--heading);
}

h1 {
	font-size: 3rem;
}

h2 {
	font-size: 2rem;
}

h3 {
	font-size: 1.75rem;
}

h4 {
	font-size: 1.5rem;
}

h5 {
	font-size: 1.25rem;
}

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

a:hover, a:active {
	color: var(--text-highlighted);
}

.info {
	--text: var(--info) !important;
}

.success {
	--text: var(--success) !important;
}

.error {
	--text: var(--error) !important;
}

.warn {
	--text: var(--warn) !important;
}

.block {
	background: var(--block-background);
	border-radius: .5rem;
	padding: .5rem;
}

.info, .error, .warn, .success {
	color: var(--text);
	text-decoration-color: var(--text);
}

.fit {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.wh100 {
	min-width: 100%;
	min-height: 100%;
	width: 100%;
	height: 100%;
}

.grid {
	gap: 1rem;
	display: grid;
}

.grid-header {
	position: sticky !important;
	top: 0 !important;
	z-index: 95 !important;
	border-radius: 0 !important;
}

.white-bg {
	background: #fff !important;
	color: #000 !important;
}

.dark-bg {
	background: var(--background) !important;
}

.soft-edges {
	box-shadow: inset 0 0 1.5rem 0 var(--background);
}

.absolute {
	position: absolute !important;
}

.fixed {
	position: fixed !important;
}

.relative {
	position: relative !important;
}

img, canvas {
	user-select: none !important;
}

.flex-center {
	display: flex;
	align-items: center;
}

.notepad-box {
	overflow-y: auto;
	overflow-x: hidden;
	resize: none;
	min-height: 80%;
	max-height: 80%;
	min-width: 100%;
	max-width: 100%;
}

.square {
	object-fit: cover;
	aspect-ratio: 1 / 1 !important;
}

.inline-block {
	display: inline-block;
}

.inline {
	display: inline;
}

.left {
	text-align: left;
}

.right {
	text-align: right;
}

.token {
	position: absolute;
	z-index: 40 !important;
	user-select: none !important;
	margin: 0;
	padding: 0.5em;
	border-radius: 0.5em;
	transform-box: border-box;
}

.token:hover {
	backdrop-filter: brightness(40%) blur(3px);
}

.token:hover, .token:hover * {
	z-index: 60 !important;
}

.token * {
	position: static !important;
}

.token img {
	box-shadow: 0 0 0 0 var(--text);
	transition: box-shadow ease-in-out 0.3s;
}

.token .x {
	display: none;
}

.token h5, .token p {
	font-size: 1em;
}

.token:hover .x {
	display: inline;
}

.token:hover img {
	box-shadow: 0 0 1em 0.2em var(--text);
}

.tooltip .tooltip-text {
	display: none;
	visibility: collapse;
	position: absolute;
	bottom: 0;
	top: auto;
	z-index: 45 !important;
	border-radius: 0.5em;
	padding: 0.25em;
}

.tooltip:hover .tooltip-text {
	display: block;
	visibility: visible;
}

.underline-hover {
	text-decoration: none;
}


.underline-hover:hover {
	text-decoration: underline;
	opacity: 1;
	color: var(--text);
}

.pad-0 {
	padding: 0;
}

.pad-1 {
	padding: 1rem;
}

.pad-small {
	padding: 0.25rem;
}

.big-btn {
	padding: 0 0.5rem 0.25rem 0.5rem;
	font-size: 1.5rem;
}

.see-through {
	opacity: 0.65 !important;
}

.scrollable {
	overflow-y: auto !important;
}

#ping {
	position: absolute;
	background: var(--ping);
	border-radius: 50%;
	box-shadow: 0 0 50px var(--pingalpha);
	width: 5px;
	height: 5px;
	animation: load 1.5s ease-out infinite;
	z-index: 55 !important;
	transform: translate(-50%, -50%);
}

@keyframes load {
	0% {
		box-shadow: 0 0 10px var(--pingalpha);
		width: 5px;
		height: 5px;
	}

	50% {
		box-shadow: 0 0 40px var(--pingalpha);
		width: 20px;
		height: 20px;
	}

	100% {
		box-shadow: 0 0 10px var(--pingalpha);
		width: 5px;
		height: 5px;
	}
}

.img-grid {
	display: grid;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr;
	border-radius: .5rem;
	gap: 0;
	margin: 0;
	padding: 0;
}

.img-grid img {
	border-radius: 0 !important;
	object-fit: cover;
}

.grid-table {
	grid-template-columns: repeat(2, 1fr);
}

@media(min-width: 900px){
	.grid-table {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media(min-width: 1200px){
	.grid-table {
		grid-template-columns: repeat(4, 1fr);
	}
}