*{
	font-family: "Arial";
	-webkit-tap-highlight-color: transparent; /*Prevents button from being highlighted when tapped on mobile device*/
	scroll-behavior: smooth;
}
*:focus {
	outline: none !important;
}

body {
	background-color: #080808;
}

label {
	font-size: 50px;
}
nav { padding-right:0; }

#container {
	position:relative;
	width: 900px;
	height: 1600px;
	margin:0 auto;
	padding:20px;
	border: 1px solid black;
	background-color:black;
	background-image: linear-gradient(-60deg, black,black,black,black,black,#040404,#121212,#040404,black,black,black,black);
	color: #eef;
}

.slider {
	margin: 20px auto;
	width: 900px;
	transform: scaleY(2)
}
.slider::-webkit-slider-thumb {
	transform: scaleX(2);
}

.dropdown {
	font-size: 40pt;
	text-align-last: center;
	color: #eef;
	background-color: black;
	margin: 8px 0;
	border-radius: 20px;
	border: 2px solid #666;
	cursor: pointer;
}

.hoverIcon {
	cursor:pointer;
	opacity: 0.7;
}
.hoverIcon:hover {opacity: 0.9;}

#modes {
	font-size: 35px;
}

#seventhsDiv {
	position: relative;
	top: 15px;
	left: 30px;
	font-size: 30px;
	cursor: pointer;
}
#sevenths{
	position: relative;
	top: 2px;
}
.check {
	width: 2em;
	height: 2em;	
}

#theme {
	position:absolute;
	top: 162px;
	right: 20px;
	z-index: 3;
}

#generateButton {
	position: absolute;
	top: 320px;
	height: 300px;
	width: 300px;
	left: 50%;
	margin: 0 -150px;
	font-size: 50px;
	color: #eef;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	outline: none;
	background-image: url("../images/concave_round_button3.png");
	background-size: cover;
	background-color: #222;
	border: none;
	border-radius:50%;
	box-shadow: none;
}

#generateButton:active {
	transform: scale(0.99);
	opacity: 0.97;
}

#keySelect {
	position: absolute;
	right: 20px;
	top: 618px;
	text-align: right;
}

#undoButton {
	position: absolute;
	top: 618px;
	font-size: 48px;
	height: 140px;
	width: 140px;
	background-image: url("../images/concave_round_button2.png");
	background-size: cover;
	background-color: #222;
	border: 1px solid #222;
	border-radius: 50%;
	color: #dde;
	visibility: hidden;
}
#undoButton:hover {
	color: #eef;
	/*border-color: #eef;*/
	cursor: pointer;
}
#undoButton:active {
	transform: scale(0.99);
	opacity: 0.97;
}

#displayContainer {
	position:absolute;
	top:835px;
	width: 95%;
	display:table;
	text-align: center;
}
#display1 {
	font-size: 35px;
	color: #dde;
}

#display2 {
	font-size: 50px;
}

#display2cover {
	position:absolute;
	font-size: 50px;
	z-index: 1;
	text-align: center;
	color: #ffe800;
}
#display2cover span {
	opacity: 0;
}
.comma { opacity:0;}

#copy {
	position: absolute;
	top: 1225px;
	right:112px;
	height: 50px;
	visibility: hidden;
	z-index:1;
}
#midiDL {
	position: absolute;
	top: 1223px;
	right:42px;
	height: 54px;
	visibility: hidden;
}

#popupPrompt {
	position:absolute;
	font-size: 20pt;
	right: 0px;
	top: 1290px;
	height: 50px;
	text-align: left;
}

#copySuccessMsgContainer {
	position:absolute;
	bottom:260px;
	left:27%;
}
#copySuccessMsg {
	transition: opacity 0.2s;
	position: relative;
	left: 0;
	width:auto;
	font-size: 50px;
	text-align: center;
	background-color: #333;
	border-radius: 15px;
	border:none;
	padding: 10px 15px;
	opacity: 0;
}

#notes {
	display:block;
	overflow: scroll;
	resize:none;
	font-size: 40px;
	position: absolute;
	width: 95%;
	margin: 0 auto;
	/*display:table;*/
	bottom: 30px;
	height: 230px;
	color: #eef;
	background-color:black;
	border: 2px solid #eef;
	border-radius: 4px;
}
#notes::-webkit-scrollbar {
   display: none;
 }
  
#playButton {
	position: absolute;
	bottom: 300px;
	font-size: 48px;
	height: 140px;
	width: 140px;
	background-image: url("../images/concave_round_button2.png");
	background-size: cover;
	background-color: #222;
	border: 1px solid #222;
	border-radius: 50%;
	color: #dde;
	visibility: hidden;
}
#playButton:hover {
	color: #eef;
	/*border-color: #eef;*/
	cursor: pointer;
}
#playButton:active {
	transform: scale(0.99);
	opacity: 0.97;
}

@media all and (orientation:landscape) {
	body{
		transform:scale(0.54);
		transform-origin:top center;
	}
	html{height:55%;}
}

/*
#nowPlaying {
	width: 100px;
	height: 140px;
	position: absolute;
	bottom: 265px;
	left: 180px;
	font-size: 50px;
	line-height: 140px;
	text-align: left;
	vertical-align: middle;
}
*/