html, body {
	font-family: 'Atkinson-Hyperlegible-Bold', Helvetica, sans-serif;
	font-weight: bold;
	font-style: normal;
	text-align: center;
	
	margin: 0px;
	padding: 0px;	

	width: 100%;
	height: 100%;
	overflow-x: hidden;
	
	scrollbar-color: var(--color-half);
	scrollbar-width: thin;
}


/*
 COLOR SCHEMES
*/

.svg-front{
	color: var(--color-front);
	fill: var(--color-front);
	stroke: var(--color-front);
}
.svg-half{
	color: var(--color-half);
	fill: var(--color-half);
	stroke: var(--color-half);
}
.svg-back{
	color: var(--color-back);
	fill: var(--color-back);
	stroke: var(--color-back);
}
.svg-backlight{
	color: var(--color-backlight);
	fill: var(--color-backlight);
	stroke: var(--color-backlight);
}
.svg-backdark{
	color: var(--color-backdark);
	fill: var(--color-backdark);
	stroke: var(--color-backdark);
}
.svg-mono{
	color: var(--color-mono);
	fill: var(--color-mono);
	stroke: var(--color-mono);
}
.svg-vivid{
	color: var(--color-vivid);
	fill: var(--color-vivid);
	stroke: var(--color-vivid);
}
.svg-alert{
	color: var(--color-alert);
	fill: var(--color-alert);
	stroke: var(--color-alert);
}
.svg-gray{
	color: var(--color-gray);
	fill: var(--color-gray);
	stroke: var(--color-gray);
}



.center-vert{
  display: block;
  margin-top: auto;
  margin-bottom: auto;
}

.center-zont{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.zoom {
  transition: transform .1s;
}

.zoom:hover {
  transform: scale(1.06);
	cursor: pointer;
}



iframe {
	position: absolute;
	border: none;
	/* width: 100%;
	height: 100%;
	*/
	z-index: -1; 
}

canvas {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}


h1, h2 {
	color: var(--color-vivid);
}

h1 {
	font-size: max(3.2vh,1.6vw);
}

h2 {
	font-size: max(2.4vh,1.2vw);
}

h3 {
	font-size: max(1.88vh,0.89vw);
}

h4, p, li {
	font-size: max(1.6vh,0.8vw);
}

h5 {
	font-size: max(1.32vh,0.66vw);
}

h6 {
	font-size: max(1.08vh,0.54vw);
}

p, li{
	color: var(--color-front);
	font-weight: normal;
	margin-left: auto;
	margin-right: auto;
	text-align:left;
	line-height: 1.3;
	list-style-type: none;
}

h1 + p{
	gap: 20vmin;
}

a:link{
	color: var(--color-mono);
}
a:visited{
	color: var(--color-gray);
}
a:hover{
	color: var(--color-alert);
}

textarea{
	background: none;
	color: var(--color-front);
	border-color: var(--color-half);
	border-width: 0.3vh;
	border-radius: 1.5vh;
	padding: 1vh;
}

arrow-label, icon-text, #logo-holder, .prevent-select{
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}


#main-pane {
	overflow-y: scroll;
	padding: 4vmin 8vmin;
	flex-grow: 100;
}

#menu-holder{
	background-color: var(--color-backdark);
	border-color: var(--color-backlight);
	border-style: solid;
	z-index: 2;
}

.menu{
	background-color: var(--color-back);
	
	border-width: 0.5vmin;
	border-style: solid;
	border-color: var(--color-backlight);
	border-radius: 2vmin;

	justify-content: space-around;
}


arrow-menu{
	flex-direction: column;
	justify-content: space-around;
}

arrow-holder{
	flex-direction: row;
	justify-content:center;
	color: var(--color-vivid);
}

arrow-label{
	color: var(--color-half);
	vertical-align: bottom;
}

.arrow{
	position:absolute;
	height:3vmin;
	top:0.5vmin;
}

icon-menu{
	flex-direction: row;
	flex-wrap:wrap; 
	justify-content: space-evenly;
	padding: 1vmin;
}

.icon {
	flex-direction: column;
	color: var(--color-half);
	text-align:center;
}


#info-holder {
	display: none;
	width: 100%;
	max-width: 65vh;
}



.container {
	display: flex;
	position: relative;
	text-decoration: none;
}

.box {
	padding:  0.5vh 1vh;
	border-radius: 1.5vh;
	white-space: pre-line;
	box-shadow: 0.6vh 0.6vh var(--color-backdark);
}

.floater{
	position: absolute;
	flex-direction: column;
	background-color: var(--color-backdark);
	
	border-style: solid;
	border-color: var(--color-backlight);
	border-width: 0.5vh;
	border-radius: 1.5vh;
}

.popup-button{
	height:4vh; 
	width:4vh;
}

.menu-control {
	width: 2.5vh;
	height: 2.5vh;
	padding: 0.5vh;
}

.info-end{
	color: var(--color-half);
}



.slider {
  -webkit-appearance: none;
  height: 6px; 
  background: var(--color-half);
  -webkit-transition: .2s; 
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%; 
  background: var(--color-front);
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-front);
  cursor: pointer;
}

.slider:disabled {
  background: var(--color-backlight);
}

.slider:disabled::-webkit-slider-thumb {
  background: var(--color-backlight);
  cursor: auto;
}
.slider:disabled::-webkit-slider-thumb {
  background: var(--color-backlight);
  cursor: auto;
}