html {
  overflow: hidden;
  overscroll-behavior: none;
  height: 100%;
}

body{
	position: absolute;
	margin: 0px;
	width: 100%;
	height: 100%;
	
	background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
	overflow: hidden;
}

canvas{
	position: absolute;
	margin: 0px;
	width: 100%;
	height: 100%;
	touch-action: none;
}

.coverCanvas{
	z-index: 1;
	pointer-events: none;
}

.backgroundCanvas{
	z-index: -1;
	pointer-events: none;
}

@font-face{
	font-family: 'Michroma';
	src: url('./Fonts/Michroma-Regular.ttf')
}

@font-face{
	font-family: 'Xolonium';
	src: 	url('./Fonts/Xolonium-Regular.otf'),
			url('./Fonts/Xolonium-Bold.otf')
}

/* The sidepanel menu */
.sidepanel {
  height: 250px; /* Specify a height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 2; /* Stay on top */
  top: 0;
  left: 0;
  background-color: #111; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}

/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.sidepanel .optionLine{
  display:flex;
  flex-direction:column;
}

.sidepanel .optionLine input{
  margin-left:3em;
  margin-right: 3em;
  margin-bottom: .5em;
}

.sidepanel .configLabel {
	color:white;
  margin-bottom: .2em;
}


/* Style the button that is used to open the sidepanel */
.openbtn {
  z-index: 1; /* Stay on top */
  font-size: 12px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 6px 8px;
  border: none;
  position: absolute;
}

.openbtn:hover {
  background-color: #444;
}