/* Copyright (c) 2022 Magnopere
    All Rights Reserved

THIS IS UNPUBLISHED PROPRIETARY SOURCE CODE OF MAGNOPERE
The copyright notice above does not evidence any actual
or intended publication of such source code. */

:root {
	--dark-blue: #2A4A69;
	--blue: #3695ef;
	--light-blue: #80C7E3;
	--red: #B44846;
	--purple: #b032e4;
	--pink: #FD9EEB;
	--pink-2: #915E87;
	--teal: #04b46f;
	--teal-2: #106354;
	--cyan: #32BEFF;
	--cyan-2: #18628E;
	--green: #199925;
	--orange: #eea021;
	--yellow: #dfd837;
	--light-gray: #E6E3DA;
	--gray: #9C9EA5;
	--dark-gray: #726E6F;
	--white: #FAF8F0;
	--black: #38383F;

	--backdrop: #1d1d1d;
	--backdrop-0: #1d1d1d;
	--backdrop-1: #242424;
	--backdrop-2: #2f2f2f;

	--background-0: #666666;
	--background-1: #545454;
	--background-2: #424242;

	--foreground-0: #eeeeee;
	--foreground-1: #d5d5d5;
	--foreground-2: #a5a098;

	--frontdrop: #99999977;
	
	--highlight-1: #2a4a69;
	--highlight-2: #e6b562;
	--accent-1: #93d1f5;
	--accent-2: #118af0;
	
	--black-keys: #191919;
	--black-guide: #242424;
	--white-keys: #d5d5d5;
	--white-guide: #2f2f2f;
	--lines-dark: #242424;
	--lines-light: #a5a098;
}

@font-face {
	font-family: textFont;
	src: url(fonts/AlbertSans-VariableFont_wght.ttf);
	font-display: swap;
	font-weight: 300;
    font-style: normal; 
 }

 @font-face {
	font-family: logoFont;
	src: url(fonts/DAGGERSQUARE.otf);
	font-display: swap;
	font-weight: normal;
	font-style: normal; 
 }

 * {
	font-family: textFont, sans-serif;
 }

html, body {
	position: relative;
	width: 100%;
	height: 100%;
	
	/* disallow text selection  */
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;

	/* include gap and margin in sizing */
	box-sizing: border-box;
}

body {
	background-color: var(--backdrop-2);
	color: var(--foreground-0);
	margin: 0;
	padding: 8px;
	box-sizing: border-box;
	height: 100%;
	overflow: hidden;
	font-size: 15px;

	scrollbar-width: thin;
	scrollbar-color: var(--background-0) transparent;
}

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

a:hover {
	text-decoration: underline;
	color: var(--accent-2);
}

a:visited {
	color: var(--accent-2);
}

label {
	display: block;
}

em {
	font-style: normal;
	color: var(--accent-1);
	display: inline;
}

input, select, textarea {
	font-family: inherit;
	font-size: inherit;
	-webkit-padding: 0.1em 0;
	padding: 0.1em;
	background-color: var(--backdrop-1);
	color: var(--foreground-1);
	box-sizing: border-box;
	border: none;
	border-radius: 3px;
}

button {
	display: inline-block;
	font-family: logoFont, sans-serif;
	cursor: pointer;
	text-align: center;
	min-width: 22px;
	min-height: 22px;
	outline: none;
	color: var(--foreground-1);
	background-color: transparent;
	border: none;
	border-radius: 3px;
	margin: 0;
}

button.active {
	color: var(--background-2);
	background-color: var(--highlight-2);
}

button.warning {
	color: var(--background-2);
	background-color: var(--orange);
}

button.danger {
	color: var(--foreground-0);
	background-color: var(--red);
}

button:hover:not(:disabled) {
	filter: brightness(130%);
}

button:hover:not(.active, .danger, .warning, :disabled) {
	background-color: var(--frontdrop);
}

button:active:not(:disabled) {
	filter: brightness(100%);
}

button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

input:disabled {
	color: var(--highlight-1);
}

select {
	width: 100%;
	min-width: 12ch;
	max-width: 20ch;
	cursor: pointer;
	appearance: none;
	color: var(--foreground-1);
	background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjEuNDEgNC42NyAyLjQ4IDMuMTggMy41NCA0LjY3IDEuNDEgNC42NyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIzLjU0IDUuMzMgMi40OCA2LjgyIDEuNDEgNS4zMyAzLjU0IDUuMzMiLz48L3N2Zz4=) no-repeat right 2px center;
    background-color: var(--backdrop-1);
	padding-left: 0.2rem;
}

input[type=range] {
	-webkit-appearance: none;  /* Override default CSS styles */
	appearance: none;
	width: 100%; /* Full-width */
	height: 0.25rem; /* Specified height */
	color: var(--foreground-1);
	background: var(--backdrop-1); /* Grey background */
	outline: none; /* Remove outline */
	opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
	-webkit-transition: .2s; /* 0.2 seconds transition on hover */
	transition: opacity .2s;
}

input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	border: none;
	height: 1rem;
	width: 0.5rem;
	border-radius: 2px;
	background: var(--highlight-2);
}

input[type="number"] {
    appearance: textfield;
	-webkit-appearance: textfield;
}

input[type="number"]:focus, 
input[type="number"]:hover {
    appearance: auto;
	-webkit-appearance: auto;
}


::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-thumb {
	border: solid 4px transparent;
	box-shadow: inset 0 0 12px 12px var(--frontdrop);
}

::-webkit-scrollbar-track {
	box-shadow: inset 0 0 12px 12px var(--background-0);
	border: solid 4px transparent;
}

.glow {
	animation: glow 1s infinite;
	position: relative;
	z-index: 4;
	opacity: 100%;
}

@keyframes glow {
	0% {
		filter: brightness(100%);
		box-shadow: 0 0 1px 2px #dfd840aa;
	}
	50% {
		filter: brightness(125%);
		box-shadow: 0 0 4px 8px #dfd840aa;
	}
	100% {
		filter: brightness(100%);
		box-shadow: 0 0 1px 2px #dfd840aa;
	}
}