/* COLORS */
:root {
  --mainbodycolor: #96d4bf;
  --controlsbg: #86ccd4;
  --controlshover: #96d4bf;
  --buttons: #fff;
  --dropdowntext: #fff;
	
  --logobg: #86ccd4;		
  --logoborder: #c5e5b6;
  --logo: #fff;
  
  --windowlines: #86ccd4;
  --windowbg: #c5e5b6;
  --windowoutline: #fff;
  
  --circles: #86ccd4;
  --circlesbg: #fff;
  --gearteeth: #fff;
}
/* END COLORS*/

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; 
}


@font-face {
	font-family: Tapeman;
	src: url(fonts/tapeman/tapeman.ttf);
}

.walkman-logo {
	background-color: var(--logobg);
	border-top: solid 10px var(--logoborder);
	border-bottom: solid 10px var(--logoborder);
}

.walkman-logo h1 {
	font-family: Tapeman;
	color: var(--logo);
	width: 100%;
	
	text-align: center;
	font-size: 80px;
	
	margin: 0;
}

.walkman-window {
	margin-top: 20px;
	margin-left: 35px;
	
	background-color: var(--windowbg);
	
	width: 90%;
	height: 200px;
	
	border-radius: 150px 10px 10px 150px;
	border: 5px solid var(--windowoutline);
	overflow: hidden;
}

.diagonal {	
	-moz-transform: rotate(60deg);  
	-o-transform: rotate(60deg);  
	-webkit-transform: rotate(60deg);  
	-ms-transform: rotate(60deg);  
	transform: rotate(60deg); 
}

.first {
	position: relative;
	left: -150px;
	
	width: 500px;
	border-top: 50px solid var(--windowlines); 
}

.next {
	position: relative;
	
	width: 500px;
	border-top: 10px solid var(--windowlines); 
}

.circles {
	background-color: var(--circlesbg);
	width: 240px;
	height: 70px;
	
	margin-top: -65px;
	margin-left: 220px;
	
	border-radius: 5px;
	display: flex;
	justify-content: space-between;
	
	padding: 5px;
}

.circles div {
	background-color: var(--circles);
	border-radius: 360px;
	
	height: 70px;
	aspect-ratio: 1/1;
	
	margin: 0;
	padding: 0;
	
	
}

.circles div div {
	margin-top: -2px;
	padding: 0;
	
	width: 56px;
	height: 56px;

	border: dashed 10px var(--gearteeth);
}

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 6s linear infinite;
  -moz-animation: rotating 6s linear infinite;
  -ms-animation: rotating 6s linear infinite;
  -o-animation: rotating 6s linear infinite;
  animation: rotating 6s linear infinite;
}

.paused{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

.walkman-container {
	position: relative;
	
	background-color: var(--mainbodycolor);
	width: 600px;
	height: 400px;
	
	
	margin: auto;
	margin-top: 40px;
	
	border-radius: 10px;
	
	transform-origin: top left;
	transform: scale(0.83); /* SCALE TO FIT */
}

.walkman-controls {		
	position: relative;
	top: -40px;
	
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-content: flex-start;
}

.walkman-controls button:hover {
	background-color: var(--controlshover);
}

.playbtn-img {
	margin: auto;
    width: 0; 
    height: 0; 
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 25px solid var(--buttons);
}

.pausebtn-img {
	margin-left: 15px;
	
	width: 25px;
	height: 32px;
	border-width: 0px 0px 0px 25px;
    border-color: var(--buttons);
	border-style: double;
}

.skipbtn-img1 {
	margin: auto;
    width: 0; 
    height: 0; 
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 20px solid var(--buttons);
	
	display:inline-block;
}
.skipbtn-img2 {
	margin: auto;
    width: 0; 
    height: 32px; 
    border-left: 7px solid var(--buttons);
	
	display:inline-block;
}

.controlbtn {
	background-color: var(--controlsbg);
	border: none;
	margin-right: 10px;
	
	border-radius: 5px 5px 0 0;
}

.playbtn {
	padding: 2px;
	height: 40px;
	width: 60px;
}

.skipbtn {
	padding: 2px;
	height: 40px;
	width: 60px;
}

.selectdrpdwn {
	margin-right: 20px;
	color: var(--dropdowntext);
	font-size: 17px;
	font-weight: bold;
}

option {
	color: var(--dropdowntext);
	font-size: 14px;
	font-weight: initial;
}