/* JS Variables */
:root {
	--scrollSpeed: 1s;
	--noteColor: #ff2142;
	--fadeColor: #3266a8;
}

/* Practice */
#practiceContainer {
	display: none;
}
#practiceMenuDiv {
	position: fixed;
	width: 500px;
	height: 420px;
	margin-left: auto;
	margin-right: auto;
	top: 50px;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #858585;
	border: solid #000;
	border-width: 5px;
	border-color: #666565;
	border-radius: 3%;
	box-shadow: 0 0 0 5px hsl(0, 0%, 20%);
	z-index: 101;
}
.practiceInfoList {
	position: relative;
	text-align: center;
	top: 8%;
	left: 50%;
	width: 90%;
	color: white;
	transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	align-items: center;
	display: flex;
	margin-right:auto;
	height: 50px;
}
.practiceInfoText {
	font-size: 10;
}
#practiceText {
	color: white;
	font-size: 25;
	text-shadow: 0 0 1px #000000, 0 0 3px #000000;
}

/* Settings */
#overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.7);
	z-index: 100;
	cursor: pointer;
}
#settingsHeader {
	font-size:32px;
	font-weight:bold;
	justify-content: center;
	animation-name: shift;
	animation-timing-function: ease;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-fill-mode:forwards;
	margin-left: 0px;
}
#settingsFooter {
	height: 30px;
	justify-content: center;
}
.settingsList {
	position: relative;
	top: 8%;
	left: 50%;
	font-size: 25;
	color: white;
	transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	align-items: center;
	display: flex;
	margin-left: 3%;
	margin-right:auto;
	height: 50px;
}
#menuDiv {
	position: fixed;
	width: 500px;
	height: 530px;
	margin-left: auto;
	margin-right: auto;
	top: 50px;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #858585;
	border: solid #000;
	border-width: 5px;
	border-color: #666565;
	border-radius: 3%;
	box-shadow: 0 0 0 5px hsl(0, 0%, 20%);
	z-index: 101;
}
.settingsText {
	text-align: center;
	width: 40%;
}
.settingsSide {
	text-align: center;
	width: 20%;
}
.settingsDiv {
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	left: 350px;
	right: 0;
	width: 25px;
	height: 50px;
	bottom: 0;
	top: 70px;
}
#menuContainer {
	display: none;
}
.settingsButton {
	color: #ffffff;
	font-family: monospace;
	border-color: #404040;
	background-color: #706f6f;
	margin-right: 20px;
	cursor:pointer;
}
.settingsButton:disabled {
	color: #b0b0b0;
	font-family: monospace;
	border-color: #292929;
	background-color: #404040;
	margin-right: 20px;
	cursor:default;
}

/* Settings Switch */
.fadeBoxContainer .boxSwitch {
    appearance: none;
    background-color: #9e9d9d;
    border-radius: 72px;
    border-style: none;
    flex-shrink: 0;
    height: 20px;
    margin: 0;
    position: relative;
    width: 30px;
 }
 .fadeBoxContainer .boxSwitch::before {
    bottom: -6px;
    content: "";
    left: -6px;
    position: absolute;
    right: -6px;
    top: -6px;
 }
 .fadeBoxContainer .boxSwitch,
 .fadeBoxContainer .boxSwitch::after {
    transition: all 100ms ease-out;
 }
 .fadeBoxContainer .boxSwitch::after {
    background-color: #4a4949;
    border-radius: 50%;
    content: "";
    height: 14px;
    left: 3px;
    position: absolute;
    top: 3px;
    width: 14px;
 }
 .fadeBoxContainer input[type=checkbox] {
    cursor: default;
 }
 .fadeBoxContainer .boxSwitch:hover {
    background-color: ;
    transition-duration: 0s;
 }
 .fadeBoxContainer .boxSwitch:checked {
    background-color: #4a4949;
 }
 .fadeBoxContainer .boxSwitch:checked::after {
    background-color: #fff;
    left: 13px;
 }
 .fadeBoxContainer :focus:not(.focus-visible) {
    outline: 0;
 }
 .fadeBoxContainer .boxSwitch:checked:hover {
    background-color: #696969; /*lole*/
 }
 
 /* Settings Slider */
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 33%;
  height: 8px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}
.slider:hover:enabled {
  opacity: 1;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #636363;
  cursor: pointer;
  border-radius: 40%;
}
.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #636363;
  cursor: pointer;
  border-radius: 40%;
}
.slider:disabled {
	background: #999999;
}

/* Settings Input Field */
input[type=text] {
	color: #ffffff;
	border: solid #000;
	border-width: 2;
	border-color: #636363;
	border-radius: 2%;
	background-color: #807e7e;
}
input[type=text]:disabled {
	color: #b0b0b0;
	border: solid #000;
	border-width: 2;
	border-color: #4f4f4f;
	border-radius: 2%;
	background-color: #636363;
}

/* ASKL Buttons */
.buttons {
	font-family: "Lucida Console", "Courier New", monospace;
	height: 60px;
	width: 60px;
	font-size: 2em;
	background-color: #d9d9d7;
	color: #000000000000;
	border-radius: 50%;
	margin: auto;
}
.buttonDiv {
	z-index: 2;
	top: 500px;
	position: relative;
	border: 2px;
	border-style: none solid solid solid;
	display: flex;
	align-items: center;
	width: 300px;
	margin: auto;
	border-color: #404040;
	background-color: #706f6f;
}

/* Left Side of Screen */
.uiDiv {
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	height: 500px;
	right: 440px;
	width: 100px;
	text-align: center;
}
.uiButtons {
	width: 100px;
	margin: 2px;
	color: #ffffff;
	font-family: monospace;
	border-color: #404040;
	background-color: #706f6f;
	cursor:pointer;
}
.uiHeader {
	margin-bottom:20px;
	margin-top:20px;
	font-size: 25;
	font-weight: bold;
	color: #000000;
}
.uiScore {
	margin: 2px;
	font-size: 17px;
	font-weight: bold;
	color: #000000;
}
#practiceButton {
	margin-top: 10px;
}

/* Accuracy Bar */
.accuracyContainer {
	z-index: 85;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	right: 3px;
	left: 0;
	width: 165px;
	top: 585px;
	height: 6px;
	text-align: center;
}
#accuracyLine {
	display:none;
	z-index: 85;
	position: absolute;
	width: 1px;
	top: 50%;
	left: 50%;
	transform: translateY(-50%);
	height:20px;
	background-color: #404040;
}
.accuracyBar {
	z-index: 85;
	position:absolute;
	height: 100%;
	width: 100%;
	border: solid #000;
	border-width: 1px;
	border-color: #404040;
}
#barOne {
	z-index: 85;
	position: absolute;
	background-color: #ffd454;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	height: 100%;
	width: 100%;
}
#barTwo {
	z-index: 85;
	position: absolute;
	background-color: #19ff5b;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	height: 100%;
	width: 60%;
}
#barThree {
	z-index: 85;
	position: absolute;
	background-color: #53c4fc;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	height: 100%;
	width: 30%;
}
.line {
	z-index: 86;
	position: absolute;
	width: 1px;
	top: 50%;
	left: 0%;
	transform: translateY(-50%);
	height:20px;
	background-color: #404040;
	animation-name: fadeOut;
	animation-timing-function: linear;
	animation-duration:1s;
	animation-iteration-count: 1;
	animation-fill-mode:forwards;
}

/* Lives */
.livesContainer {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	left: 175px;
	right: 0;
	width: 20px;
	top: 50px;
	height: 450px;
	text-align: center;
}
.livesDiv {
	position: absolute;
	bottom: 0;
}
.lives {
	margin: 2px;
	font-size: 25;
	font-weight: bold;
	color: #000000;
	font-family: monospace;
}

/* Chart */
.chartDisplayDiv {
	z-index: 1;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	top: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	height: 450px;
	width: 300px;
	border: 2px;
	border-color: #404040;
	border-style: solid solid none solid;
	background-color: #706f6f;
}
.chartDisplayTopDiv {
	z-index: 20;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	height: 60px;
	width: 300px;
	border: 2px;
	border-color: #404040;
	background-color: #d6d6d4;
}
.fullDiv {
	background-color: #d6d6d4;
	font-family: monospace;
	user-select: none;
}
.chartDiv {
	z-index: 10;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 800px;
	width: 300px;
}
.laneDiv {
	position:relative;
	z-index: 10;
	float: left;
	height: 100%;
	width: 25%;
}

/* Notes */
.note {
	z-index: 15;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	position: absolute;
	background-color: var(--noteColor);
	animation-name: mover;
	animation-timing-function: linear;
	animation-duration:var(--scrollSpeed);
	animation-iteration-count: 1;
	animation-fill-mode:forwards;
}

/* Center Display */
.judgeDiv {
	position: absolute;
	z-index: 80;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	top: 170px;
	width: 200px;
	display: block;
	text-align: center;
	align-items: center;
	justify-content: center;
}
#judge {
	font-size: 20;
	color: #ffffff;
}
#combo {
	font-size: 35;
	color: #ffffff;
}
#nextStage {
	font-size: 25;
	font-weight: bold;
	color: #ffffff;
	text-shadow: 0 0 1px #ffffff, 0 0 3px #ffffff;
}
.stageUpContainer {
	position: absolute;
	z-index: 80;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	top: 130px;
	width: 200px;
	display: block;
	text-align: center;
	align-items: center;
	justify-content: center;
}
.stageAnim {
	animation-delay: 0s, 0s, .3s, .8s, .8s;
	animation-name: shift, spin, bouncer, bouncer, fadeOut;
	animation-duration: 1s, .3s, .5s, .5s, 3s;
	animation-iteration-count: infinite, 1, 1, 1, 1;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
}

/* Gameover Display */
#gameOverContainer {
	display:none;
	position: absolute;
	z-index: 81;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	width: 250px;
	text-align: center;
	align-items: center;
	justify-content: center;
}
#gameOverDisplay {
	font-size: 50;
	font-weight: bold;
	color: #bf0a18;
	text-shadow: 0 0 3px #ed2d3c, 0 0 5px #ed2d3c;
}
#overQuote {
	opacity: 0;
	margin-top: -10px;
	font-size: 16;
	font-weight: bold;
	color: #bf0a18;
	text-shadow: 0 0 3px #ed2d3c, 0 0 5px #ed2d3c;
}
#gameOverAcc {
	opacity: 0;
	margin-top: 210px;
	font-size: 25;
	font-weight: bold;
	color: #ffffff;
	text-shadow: 0 0 3px #ffffff, 0 0 5px #ffffff;
}
#gameOverScore {
	opacity: 0;
	margin-top: 20px;
	font-size: 25;
	font-weight: bold;
	color: #ffffff;
	text-shadow: 0 0 3px #ffffff, 0 0 5px #ffffff;
}
#gameOverStage {
	opacity: 0;
	margin-top: 20px;
	font-size: 25;
	font-weight: bold;
	color: #ffffff;
	text-shadow: 0 0 3px #ffffff, 0 0 5px #ffffff;
}
.overFade1 {
	animation-name: fadeIn;
	animation-duration: 3s;
	animation-delay: .5s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-fill-mode:forwards;
}
.overFade2 {
	animation-name: fadeIn;
	animation-duration: 3s;
	animation-delay: 1s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-fill-mode:forwards;
}
.overFade3 {
	animation-name: fadeIn;
	animation-duration: 3s;
	animation-delay: 1.5s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-fill-mode:forwards;
}
.gameOverAnim {
	position: absolute;
	top: 120px;
	animation-name: fall, wobble;
	animation-duration: .5s, .175s;
	animation-delay: 0s, .5s;
	animation-timing-function: ease-in, linear;
	animation-iteration-count: 1, 1;
}
.gameOverOut {
	animation-name: fadeOut;
	animation-duration: 3s;
	animation-delay: 10s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-fill-mode:forwards;
}

/* Extra Coloring */
#keySetting5 {
	color: #34d8eb;
}
#startButtonDisplay {
	color: #34d8eb;
}
#keySetting6 {
	color: #ed687c;
}
#stopButtonDisplay {
	color: #ed687c;
}

/* Animations */
.bounce {
	animation: bouncer 0.1s, fadeOut 3s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-fill-mode:forwards;
}
@keyframes wobble {
	0% {transform:rotate(0deg)}
	19% {transform:rotate(30deg)}
	35% {transform:rotate(0deg)}
	51% {transform:rotate(-30deg)}
	67% {transform:rotate(0deg)}
	83% {transform:rotate(30deg)}
	100% {transform:rotate(0deg)}
}
@keyframes fall {
	0% {top: -400px;}
	100% {top: 120px;}
}
@keyframes shift {
	0% {color:var(--fadeColor);}
	50% {color:var(--noteColor);}
	100% {color:var(--fadeColor);}
}
@keyframes mover {
	0%	 {left:0px; top:0px;}
	100% {background-color:var(--fadeColor); left:0px; top:600px;}
}
@keyframes bouncer {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1.2);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes fadeIn {
    0% { opacity: 0;}
    99% { opacity: 0.99;}
    100% { opacity: 1;}
}
@keyframes fadeOut {
    0% { opacity: 1;}
    99% { opacity: 0.01;}
    100% { opacity: 0;}
}
@keyframes spin {
    from {
        transform:rotate(0deg) scale(1.8, 1.8);
    }
    to {
        transform:rotate(360deg) scale(1, 1);
    }
}