@import "https://fonts.googleapis.com/css?family=Loved+by+the+King";
@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(80deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(192deg);
  }
}
@keyframes spin-art {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
main {
  max-height: 385px;
  overflow: hidden;
}

.record-player {
  height:250px;
  width:350px;
  background: #C0C0C0;
  position: relative;
  margin: 10px auto;
  z-index: 0;
  border-radius: 10px;
  box-shadow: inset 0 0 35px 2px rgba(0, 0, 0, 0.45), inset 0 0 2px 5px white, 2px 2px 20px 10px rgba(0, 0, 0, 0.8);
}
.record-player .arm-assembly {
  position: relative;
  z-index: 200;
  height:65%;
  top:30px;
  left:80px;
}
.record-player .arm-assembly .center {
  width: 60px;
  height: 60px;
  background: #969BA0;
  position: absolute;
  left: -57px;
  top: -12px;
  z-index: 199;
  border-radius: 50%;
  box-shadow: 0 0 3px 1px rgba(33, 33, 33, 0.3), inset 0 0 0 0 #969BA0, inset 0 0 0 2px rgba(180, 180, 180, 0.7), inset 0 0 0 3px rgba(33, 33, 33, 0.3), inset 0 0 0 8px #969BA0, inset 0 0 0 10px rgba(180, 180, 180, 0.7), inset 0 0 0 11px rgba(33, 33, 33, 0.3), inset 0 0 0 18px #969BA0, inset 0 0 0 20px rgba(180, 180, 180, 0.7), inset 0 0 0 21px rgba(33, 33, 33, 0.3);
}
.record-player .arm {
  position: absolute;
  z-index: 200;
  height: 100%;
  left: 22px;
  transform: rotate(-45deg);
}
.record-player .arm div {
  background: #969BA0;
  width: 5px;
  position: absolute;
}
.record-player .arm .long {
  height: 60%;
  transform: rotate(10deg);
  border-radius: 35% 35% 0 10%;
  box-shadow: 0 0 5px 2px rgba(33, 33, 33, 0.35);
}
.record-player .arm .short {
  height: 45%;
  top: 58%;
  left: 2px;
  transform: rotate(-20deg);
  border-radius: 0 10% 40% 40%;
}
.record-player .controls {
  margin-top:20px;
}
.record-player .controls .small .control {
  font-size: 1.6em;
  margin: 10px 0 0 13px;
}
.record-player .controls .control {
  font-size: 2em;
  padding: 4px 1%;
  margin: 13px 0 0 25px;
  cursor: pointer;
  transition: box-shadow 0.25s ease, text-shadow 0.25s ease, color 0.25s ease;
}
.record-player .controls .control.on {
  color: #3EA39F;
  text-shadow: 0 0 2px #89D2D0, 0 0 5px #E1F4F3;
}
.record-player .controls .control.disabled {
  opacity: 0.2;
  cursor: default;
}
.record-player .deck {
  position: absolute;
  top: 25px;
  left: 130px;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(230, 230, 230, 0.4), 1px 1px 5px 2px rgba(0, 0, 0, 0.9), -1px -1px 5px 2px rgba(0, 0, 0, 0.9);
}
.record-player .deck .needle {
  height: 1.6%;
  width: 1.6%;
  border-radius: 50%;
  position: absolute;
  top: 49.2%;
  left: 49.2%;
  background: #e1e1e1;
  z-index: 105;
  box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.4);
}

.record {
  background: #222;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  position: relative;
  z-index: 100;
  box-shadow: inset 0 0 50px 15px rgba(33, 33, 33, 0.5);
  left: 50%;
  top: 50%;
  transform-origin: 50% 50%;
  animation: spin-art 3000ms linear infinite;
}
.record.off, .record.off .grooves div {
  animation: none;
  transform: translate(-50%, -50%) rotate(80deg);
}
.record .label {
  background: #aaa;
  height: 24%;
  width: 24%;
  position: absolute;
  z-index: 200;
  top: 38%;
  left: 38%;
  border-radius: 50%;
  box-shadow: inset 0 0 20px 3px rgba(33, 33, 33, 0.5), 0 0 7px 1px rgba(255, 255, 255, 0.1);
}
.record .label .hole {
  background: #000;
  height: 10%;
  width: 10%;
  position: absolute;
  top: 45%;
  left: 45%;
  border-radius: 50%;
}
.record .reflection {
  position: absolute;
  left: 32%;
  height: 100%;
  width: 36%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 35%;
  transform: rotate(40deg);
  box-shadow: 0 0 40px 5px rgba(255, 255, 255, 0.15);
}
.record .grooves {
  position: absolute;
  z-index: 150;
  left: 50%;
  top: 50%;
  height: .5%;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  width: 0.5%;
}
.record .grooves div {
  animation: spin 10000ms linear infinite;
  border: 0px solid transparent;
  border-top: 3px solid black;
  border-radius: 50%;
  box-shadow: 0 0 100px rgba(0, 0, 0, 0.25);
  height: 140%;
  width: 140%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 50% 50%;
}


#radio {
	width:530px;
	height:270px;
}

/*#radio-con {
	width:300px;
	height:40px;
	color:white;
	font-size:12px;
	display:flex;
	margin:0 auto;
}

#play {
	width:32px;
	height:32px;
	background:url(../play.png) no-repeat center center;
	border:none;
	margin:5px 2px 5px 10px;
	cursor:pointer;
	margin-right:10px;
}

#mute {
	width:32px;
	height:32px;
	background:url(../sound.png) no-repeat center center;
	border:none;
	margin-bottom:5px;
	cursor:pointer;
	margin-right:10px;
	margin-top:5px;
}

#play:active, #mute:active {
	position:relative;
	top:2px;
}

#vol {
	width:200px;
	height:10px;
	margin-top:15px;
	margin-left:-50px;
}*/