*{
	margin: 0;
	padding: 0;
	font-family: 'Poppins', sans-serif;
	box-sizing: border-box;
}
.container{
	width: 100vw;
	
	background: #242424;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
* {
    -webkit-tap-highlight-color: transparent;
}
.music-player {
	background-image: linear-gradient(to top, rgb(191, 191, 191) 10%, rgb(207, 207, 207) 15%, rgb(207, 207, 207) 72%, rgb(191, 191, 191) 80%);
	
	
	max-width: 1600px;
	width: 100%;
	height: 100vh;
	min-height: 600px;
	padding: 15px 10px;
	text-align: center; 
}
nav{
	
	display: flex;
	justify-content: space-between;
	margin-bottom: 0px;
}
#left {
	margin-top: 35%;
	scale: 200%;
}
#bars { 
	scale: 200%;
	margin-top: 35%;
}


nav .circle{
	border-radius: 50%;
	width: 10vw;
	height: 10vw;
	max-width: 40px;
	max-height: 40px;
	line-height: 40px;
	background: #808080;
	color: #fff;
	box-shadow: 0 5px 10px rgba(10, 10, 10, 0.5);
}

#shufflyParent{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	user-select: none;
}

#shufflySpacer{
	height: 200px;
	height: 20vh;
	min-height: 80px;
}

#Head{
	position: absolute; 
	top: -17%;
	left: 25%;
	rotate: 0deg;
	min-height: 80px;
	height: 20vh;
	z-index: 5;
}

#ArmL{
	position: absolute; 
	top: -7%;
	left: 24%;
	rotate: 0deg;
	min-height: 80px;
	height: 20vh;
	z-index: 10;
}

#ArmR{
	position: absolute; 
	top: -7%;
	left: 47%;
	min-height: 80px;
	height: 20vh;
	transform: scale(-1, 1);
	z-index: 9;
	rotate: 0deg;
}

#LegL{
	position: absolute; 
	top: 9%;
	left: 25%;
	min-height: 80px;
	height: 20vh;
	transform: scale(-1, 1);
	z-index: 2;
}


#LegR{
	position: absolute; 
	top: 8%;
	left: 36%;
	min-height: 80px;
	height: 20vh;
	z-index: 3;
	
}
.song-img{
	height: 20vh;
	min-height: 80px;
	
	
	
}
.song-info{
	
	justify-content: center;
	align-items: center;
	background: transparent;
	margin: 0px 15% 0px 15%;
}
.song-info h1{
	
	font-size: 1.5rem;
	
	font-weight: 600;
	
	text-align: center;
	color: #747474;
	margin-top: 5px;
}
.song-info p{
	font-size: 1rem;
	color: #747474;
	text-align: center;
}
#progress{
	-webkit-appearance: none;
	width: 100%;
	height: 10px;
	background: rgba(10, 10, 10, 0.5);
	border-radius: 4px;
	cursor: pointer;
	margin: 40px 0;

}



#progress::-webkit-slider-thumb {
	-webkit-appearance: none;
	
	width: 20px;
	height: 20px;
	border-radius: 50%;
	
}
.controls{
	display: flex;
	justify-content: center;
	align-items: center;
	
	
}
.controls div{
	width: 100%;
	height: 60px;
	gap: 5px;
	background: rgb(207, 207, 207);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	
	color: #808080;
	
	cursor: pointer;
}

#shufflebutton{
	
	background: rgb(0, 184,193);
	color: #000000;
	outline: none;
	border-radius: 10px;
	width: calc(25% - 7.5px);
	
}
#shufflebutton:active{
	outline: none;
	
	background: white;
	color: #000000;
}
#divideplay{
	width: 10px;
	
	
}
#ffbutton{
	width: calc(25% - 7.5px);
	border-radius: 10px;
	background: rgb(67, 69, 76);
	color: black;
	
}
#ffbutton:active{
	background: white;
}
#ff{
	scale: 200%;
	color: rgb(0, 184, 193);
	pointer-events: none;
}
#playsection{
	width: calc(50% - 7.5px);
	border-radius: 10px;
	background:  rgb(67, 69, 76);
}
#playcont{
	background: transparent;
	width: 80px;
}
#cntrlIcon{
	color: black;
}
#seedcontainer{
	background: transparent;
}
#playlist{
	list-style: none;
}
#playlist li a{
	color:black;
	text-decoration: none;
}
#playlist .current-song a{
	color:white;
}

#gap{
	justify-content: center;
	height: 60px;
	align-items: center;
}
#SP {
	width: 50px;
	height: 50px;
	align-items: center;
	pointer-events: none;
	user-select: none;
}
#ctrlIcon {
	transform: scale(2);
	color: rgb(0, 184, 193);
	align-items: center;
}


#g5positionbar-gap.g5positionbar {
	display: none;
}
#g5inside-gap.g5inside {
	background: transparent;
	justify-content: center;
	align-items: center;
	height: 60px;
	
}
.g5buttons {
	display: none;
}
#seedList {
	background: rgb(85, 85, 85);
	margin-right: 10px;
	
	font-size: 16px;
	font-weight: bold;
	color: rgb(190, 190, 190);
	width: 100%;
	height: 30px;
}

#mymeter{
	margin-left: 5vw;
	width: 500px;
	height: 5px;
	background: white;
	
}
#bottomstuff{
	height: 40%;
	min-height: 50px;
	width: 100%;
	display: inline-flex;
	margin-top: 10px;
	color: rgb(207, 207, 207);
	
}
#leftbot{
	
	width: 50%;
	border-radius: 10px;
	background: rgb(229, 229, 229);
}	

#eyeicon{
	margin-top: 100px;
	scale: 500%;
	color: rgb(190, 190, 190);
	
}
#eyetext{
	margin-top: 30px;
	color: rgb(190, 190, 190);
	font-weight: bold;
	user-select: none;
}
#trackOrder{
	margin-top: 10px;
	color: grey;
	font-size: 16px;
	height: 80%;
	overflow-y: auto;
	user-select: none;
}
#trackOrder li{
	 list-style-type: none;
}
li.highlight {
	font-size: 24px;
	color:black;
}
#divideinfo{
	width: 10px;
	background: rgb(207, 207, 207);
}
#rightbot{
	
	width: 50%;
	border-radius: 10px;
	background: rgb(229, 229, 229);
}
#songpieces{
	color: rgb(91, 91, 91);
	font-size: 20px;
	margin-top: 10px;
	user-select: none;
}
#infosong{
	margin-top: 10px;
	font-size: 20px;
	color:rgb(91, 91, 91);
	user-select: none;
}
#infotext{
	margin-top: 10px;
	margin-left: 5px;
	margin-right: 5px;
	
	color:rgb(91, 91, 91);
	height: 70%;
	overflow-y: auto;
	user-select: none;
}
#contactinfo{
	margin-top: 10px;
	color: rgb(130, 130, 130);
	
}

#songtitle{
	color: rgb(20, 20, 20);
	user-select: none;
}

#artist{
	user-select: none;
}

#Image{
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
}

  #unselectable-part {
        -webkit-user-select: none; /* Safari */
        -moz-user-select: none;    /* Firefox */
        -ms-user-select: none;     /* Internet Explorer/Edge */
        user-select: none;         /* Standard syntax */
    }

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
  display: none; /* Hidden by default */
  z-index: 999; /* Ensure it's above other content */
}

.popup-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the popup */
  max-height: 90%;
  width: 80%;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  display: none; /* Hidden by default */
  z-index: 1000; /* Ensure it's above the overlay */
  overflow-y: auto;
  justify-content: center;
}

#tutPageA{
	
	transform: translate(0%, 20vh);
	width: 50%;
}

#tutPageB{
	
	transform: translate(2%, 50vh);
	width: 48%;
}

#tutPageC{
	transform: translate(-102%, 30vh);
	width: 48%;
}

#tutPageD{
	transform: translate(-50%, 10vh);
	width: 80%;
}
.tut-container {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the popup */
  max-height: 100vh;
  width: 50%;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  display: none; /* Hidden by default */
  z-index: 10000; /* Ensure it's above the overlay */
  overflow-y: auto;
  justify-content: center;
}
/* Class to show the popup */
.show-popup {
  display: block;
}



#contactReadMore{

	align-items: center;
	width: 100%;
	display: inline-flex;
}

#contactDiv{
	width: 75%;
	text-align: left;
	
}


#readMoreDiv{
	width: 25%;
}

#openPopupBtn{
	
	width: 25%;
	border-radius: 5px;
	background-color: rgb(84, 84, 84);
	box-shadow: none !important;
	text-shadow: none;
	outline: none;
	align-items: center;
	
}

button:focus {
  outline: none;
}

#openPopupText{
	color: rgb(232, 232, 232);
	user-select: none;
	align-self: center;
	pointer-events: none;

}

#closePopupBtn{
	margin-top: 10px;
	width: 30%;
	transform: translate(115%, 0%);
	border-radius: 5px;
	background-color: rgb(134, 134, 134);
	
}

#closePopupText{
	color: rgb(232, 232, 232);
	user-select: none;

}

.RMT{ 
	white-space: pre-wrap;
}

#tutButton{
	position: relative;
	top: 0px;
	left: 0%;
	height: 40px;
	width: 40px;
	border-radius: 40px;
	
	 background-color: rgb(64, 64, 64);
	
}

#questionMark{
	color: white;
	font-size: 35px;
	user-select: none;
}



#tut_A{
	width: 50vh;
	z-index: 1002;
	
}

#tutOverlay{
	background-color: rgba(0, 0, 0, 0.8);
}

#tutDiv{
	height: 0px;
}

#tutOverlayTop{
	background-color: rgba(0, 0, 0, 0);
	z-index: 10000;
}

#tutPageContainer{
	height: 0px;
}

#tutPageText{
	font-size: 1.1rem;
}