:root {
	--orange: hsla(32, 100%, 50%, 1);
	--yellow: hsla(49, 99%, 50%, 1);
	--lime: hsla(82, 90%, 45%, 1);
	--green: hsla(127, 81%, 41%, 1);
	--red: hsla(342, 93%, 53%, 1);
	--pink: hsla(314, 85%, 45%, 1);
	--blue: hsla(211, 92%, 52%, 1);
	--purple: hsla(283, 92%, 44%, 1);
	--cyan: hsla(195, 98%, 55%, 1);
	--white: hsla(0, 0%, 95%, 1);
	--black: hsla(0, 0%, 10%, 1);

	/* abstract our colours */
	--boxMain: var(--green);
	--boxSecond: var(--lime);
	--boxHigh: var(--red);

	--border: 6px solid var(--black);
	--borderRad: 2px;

	/* dimensions */
	--boxWidth: 800px;
	--boxHeight: 440px;
	--boxDepth: 200px;

}
@media screen and (max-width: 800px) {
	:root {
		--boxWidth: 460px;
		--boxHeight: 600px;
	}
}
* {box-sizing: border-box;}

/* everything has to be pixels for 3D reasons */
body {
	background-color: var(--white);
	min-height: 90vh; padding: 4vmax; margin:0px;
	font-family: sans-serif, system-ui; color: var(--black);
}

#boombox {
	width: var(--boxWidth); height: var(--boxHeight);
	margin: 0px auto;
	perspective: 1000px;
	perspective-origin: 50% 100px;
	transform-style: preserve-3d;
}
.boombox-body {
	position: relative;
	width: var(--boxWidth); height: var(--boxHeight);
	transform-style: preserve-3d;
	transform: scale(0.8);
}

[class^="bb"] {
	position: absolute;
	transform-style: preserve-3d;
	background-color: var(--green);
	border: var(--border);
}
.bb-top {
	width: var(--boxWidth); height: var(--boxDepth);
	transform: rotateX( -90deg);
	transform-origin: top right;
}
.bb-right {
	width: var(--boxDepth); height: var(--boxHeight);
	right:0px;
	transform: rotateY(-90deg);
	transform-origin: top right;
}
.bb-bottom {
	width: var(--boxWidth); height: var(--boxDepth);
	bottom: 0px;
	transform: rotateX(90deg);
	transform-origin: bottom left;
}
.bb-left {
	width: var(--boxDepth); height: var(--boxHeight);
	transform: rotateY(90deg);
	transform-origin: top left;
}
.bb-back {
	width: var(--boxWidth); height: var(--boxHeight);
	transform: translateZ(-200px) rotateY(180deg);
}

.bb-front {
	/*gradient with two circles for speakers*/
	width: var(--boxWidth); height: var(--boxHeight);
	background: var(--boxMain) repeat-x bottom left;
	background-image:
		radial-gradient(circle,
			var(--boxMain) 2vmin,
			var(--black) 2vmin,
			var(--black) 3vmin,
			var(--boxSecond) 3vmin,
			var(--boxSecond) 9vmin,
			var(--black) 9vmin,
			var(--black) 9.5vmin,
			var(--boxSecond) 9.5vmin,
			var(--boxSecond) 12vmin,
			var(--black) 12vmin,
			var(--black) 13vmin,
			var(--boxMain) 13vmin);
	background-size: 33.3% 70%;
	border: 6px solid var(--black);
	border-radius: var(--borderRad);
}
/*small screen with one circle*/
@media screen and (max-width: 800px) {
	.bb-front {
		background-repeat: no-repeat;
		background-position: center top;
		background-size: 100% 70%;
		background-image:
		radial-gradient(circle,
			var(--boxMain) 4vmin,
			var(--black) 4vmin,
			var(--black) 5vmin,
			var(--boxSecond) 5vmin,
			var(--boxSecond) 21vmin,
			var(--black) 21vmin,
			var(--black) 21.5vmin,
			var(--boxSecond) 21.5vmin,
			var(--boxSecond) 24vmin,
			var(--black) 24vmin,
			var(--black) 25vmin,
			var(--boxMain) 25vmin);
	}
}

.master-controls {
	display: grid;
	grid-template-rows: repeat(2, auto);
	grid-template-columns: repeat(2, 1fr) 12%;
	/*name our grid areas so they are more manipulative later*/
	grid-template-areas:
		"volin panin power"
		"vollab panlab power";
	justify-items: center; align-items: center;
	padding: 30px; height: 120px;
	background-color: var(--boxSecond);
	border-bottom: var(--border);
}
/* change control grid areas for smaller boom box */
@media screen and (max-width: 800px) {
	.master-controls {
		/*grid-gap: 10px;*/
		grid-template-columns: 16% 1fr 12%;
		grid-template-areas:
			"vollab volin power"
			"panlab panin power";
	}
}
.master-controls input, .master-controls label {display: block;}
.master-controls label {padding-top:20px;}
@media screen and (max-width: 800px) {
	.master-controls label {padding-top: 6px;}
}
.master-controls input::before, .master-controls input::after {
	line-height: 2; color: var(--black);
}
.master-controls input::before {padding-right: 1vw;}
.master-controls input::after {padding-left: 1vw;}

.control-volume {grid-area: volin;}
.control-volume::before {content: 'min';}
.control-volume::after {content: 'max';}
label[for="volume"] {grid-area: vollab; margin-top:10px;}
.control-panner {grid-area: panin;}
.control-panner::before {content: 'left';}
.control-panner::after {content: 'right';}
label[for="panner"] {grid-area: panlab; margin-top: 10px;}

@media screen and (max-width: 800px) {
	label[for="volume"], label[for="panner"] {margin-top: 0px;}
	.control-volume {margin-bottom: 20px;}
}

.control-power {
	grid-area: power; align-self: center;
	width: 40px; height: 40px;
	border: 3px solid var(--black); border-radius: 20px;
	cursor: pointer;
}
.control-power span {display: none;}

/* tape area ~~~~~~~~~~~~~~~~~~~~~*/
.tape {
	display: grid;
	grid-template-rows: 222px 80px;
	grid-template-columns: repeat(5, 1fr);
	grid-template-areas: "tape tape tape tape tape"
		"back play play play next";

	width: 300px; margin: 0px auto;
	background: var(--boxMain) no-repeat center center;
	background-image:
		radial-gradient(circle at 80px,
			var(--boxSecond) 20px,
			var(--black) 20px,
			var(--black) 25px,
			transparent 25px),
		radial-gradient(circle at 210px,
			var(--boxSecond) 20px,
			var(--black) 20px,
			var(--black) 25px,
			transparent 25px),
		linear-gradient(180deg,
			transparent 93px,
			var(--black) 93px,
			var(--black) 101px,
			var(--boxHigh) 101px,
			var(--boxHigh) 201px,
			var(--black) 201px,
			var(--black) 209px,
			transparent 209px),
		radial-gradient(circle at 80px,
			var(--boxHigh) 50px,
			var(--black) 50px,
			var(--black) 58px,
			transparent 58px),
		radial-gradient(circle at 210px,
			var(--boxHigh) 50px,
			var(--black) 50px,
			var(--black) 58px,
			transparent 58px);
	background-size: 100% 100%, 100% 100%, 42% 100%, 100% 100%, 100% 100%;
	border: var(--border); border-bottom-width: 0px;
	border-radius: var(--borderRad);
}
@media screen and (max-width: 800px) {
	.tape {
		/*width: 80%; margin-top: 30vh;*/
		margin-top: 220px;
		grid-template-rows: 168px 74px;
		background-image:
			radial-gradient(circle at 80px,
				var(--boxSecond) 20px,
				var(--black) 20px,
				var(--black) 25px,
				transparent 25px),
			radial-gradient(circle at 210px,
				var(--boxSecond) 20px,
				var(--black) 20px,
				var(--black) 25px,
				transparent 25px),
			linear-gradient(180deg,
				transparent 63px,
				var(--black) 63px,
				var(--black) 71px,
				var(--boxHigh) 71px,
				var(--boxHigh) 171px,
				var(--black) 171px,
				var(--black) 179px,
				transparent 179px),
			radial-gradient(circle at 80px,
				var(--boxHigh) 50px,
				var(--black) 50px,
				var(--black) 58px,
				transparent 58px),
			radial-gradient(circle at 210px,
				var(--boxHigh) 50px,
				var(--black) 50px,
				var(--black) 58px,
				transparent 58px);
	}
}
audio {
	grid-area: tape;
}
[class^="tape-controls"] {
	border: none;
}
[class^="tape-controls"] span {display: none;}
.tape-controls-play {grid-area: play;}

/* ~~~~~~~~~~~~~~~~ All the crazy range styling */
input[type=range] {
  -webkit-appearance: none;
	width: 30vw;
  background: transparent;
}
/* set min & max for different screen sizes */
@media screen and (min-width: 1100px) {
	input[type=range] {width: 270px;}
}
@media(max-width: 680px) {
	input[type=range] {
		width: 180px;
	}
}
@media(max-width: 380px) {
	input[type=range] {
		width: 130px;
	}
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -1vh;
	height: 4vh; width: 2vw;
	border: 0.5vmin solid var(--black);
  border-radius: var(--borderRad);
  background-color: var(--boxMain);
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  height: 4vh; width: 2vw;
	border: 0.5vmin solid var(--black);
  border-radius: var(--borderRad);
  background-color: var(--boxMain);
  cursor: pointer;
}
input[type=range]::-ms-thumb {
  height: 4vh; width: 2vw;
	border: 0.5vmin solid var(--black);
  border-radius: var(--borderRad);
  background-color: var(--boxMain);
  cursor: pointer;
}

input[type=range]::-webkit-slider-runnable-track {
  height: 2vh;
  cursor: pointer;
  background-color: var(--black);
  border-radius: var(--borderRad);
}
input[type=range]::-moz-range-track {
  height: 2vh;
  cursor: pointer;
  background-color: var(--black);
  border-radius: var(--borderRad);
}
input[type=range]::-ms-track {
  height: 2vh;
  cursor: pointer;
  background-color: var(--black);
  border-radius: var(--borderRad);
}

input[type=range]:focus {
  outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: var(--boxMain);
}


/*~~~~~~~~~~~~~~~~ the play pause & power icons*/
[data-playing] {
		background: transparent url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z" fill="black" /></svg>') no-repeat center center;
		background-size: 60% 60%;
		cursor: pointer;
}
[data-playing]:hover {
	background: transparent url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z" fill="hsla(32, 100%, 50%, 1)" /></svg>') no-repeat center center;
	background-size: 60% 60%;
}
[data-playing="true"] {
	background: transparent url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z" fill="black" /></svg>') no-repeat center center;
	background-size: 60% 60%;
}
[data-playing="true"]:hover {
				background: transparent url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z" fill="hsla(32, 100%, 50%, 1)" /></svg>') no-repeat center center;
			background-size: 60% 60%;
}
[data-power] {
	background: var(--boxSecond) url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M400 54.1c63 45 104 118.6 104 201.9 0 136.8-110.8 247.7-247.5 248C120 504.3 8.2 393 8 256.4 7.9 173.1 48.9 99.3 111.8 54.2c11.7-8.3 28-4.8 35 7.7L162.6 90c5.9 10.5 3.1 23.8-6.6 31-41.5 30.8-68 79.6-68 134.9-.1 92.3 74.5 168.1 168 168.1 91.6 0 168.6-74.2 168-169.1-.3-51.8-24.7-101.8-68.1-134-9.7-7.2-12.4-20.5-6.5-30.9l15.8-28.1c7-12.4 23.2-16.1 34.8-7.8zM296 264V24c0-13.3-10.7-24-24-24h-32c-13.3 0-24 10.7-24 24v240c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24z" fill="black" /></svg>') no-repeat center center;
	background-size: 60% 60%;
}
[data-power]:hover, [data-power="on"] {
	background: var(--boxHigh) url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M400 54.1c63 45 104 118.6 104 201.9 0 136.8-110.8 247.7-247.5 248C120 504.3 8.2 393 8 256.4 7.9 173.1 48.9 99.3 111.8 54.2c11.7-8.3 28-4.8 35 7.7L162.6 90c5.9 10.5 3.1 23.8-6.6 31-41.5 30.8-68 79.6-68 134.9-.1 92.3 74.5 168.1 168 168.1 91.6 0 168.6-74.2 168-169.1-.3-51.8-24.7-101.8-68.1-134-9.7-7.2-12.4-20.5-6.5-30.9l15.8-28.1c7-12.4 23.2-16.1 34.8-7.8zM296 264V24c0-13.3-10.7-24-24-24h-32c-13.3 0-24 10.7-24 24v240c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24z" fill="black" /></svg>') no-repeat center center;
	background-size: 60% 60%;
}


/* controls ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#move-controls {
	position: fixed; bottom: 0px; right: 0px;
	display: flex;
	justify-content: flex-end;
	background: hsla(0, 0%, 100%, 0.5);
	border: var(--border);
}
/* little hack for small screens to make sure you can press play */
@media screen and (max-width: 800px) {
	body {padding-bottom: 70px;}
}
#move-controls h3 {display: none;}
.move-controls_xy, .move-controls_rotate {
	display: grid;
	grid-template-rows: repeat(3, auto);
	grid-template-columns: repeat(3, 10vmin);
	margin: 3vmin;
}
.move-controls_xy button:nth-of-type(1),
.move-controls_rotate button:nth-of-type(1)
	{grid-area: 2 / 1 / 3 / 2;}
.move-controls_xy button:nth-of-type(2),
.move-controls_rotate button:nth-of-type(2)
	{grid-area: 1 / 2 / 2 / 3;}
.move-controls_xy button:nth-of-type(3),
.move-controls_rotate button:nth-of-type(3)
	{grid-area: 2 / 3 / 3 / 4;}
.move-controls_xy button:nth-of-type(4),
.move-controls_rotate button:nth-of-type(4)
	{grid-area: 3 / 2 / 4 / 3;}

.move-controls_z { display: grid; justify-items: center;}
.move-controls_z button:nth-of-type(1) {align-self: end;}
.move-controls_z button:nth-of-type(2) {align-self: start;}

#move-controls button {
	display: inline-block;
	margin: 0px; padding: 3vmin 4vmin;
	background-color: var(--green);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 70% 70%;
	border: var(--border); border-radius: var(--borderRad);
	cursor: pointer;
}
@media screen and (max-width: 800px) {
	#move-controls button {
		padding: 2vmin 3vmin;
	}
}

#move-controls button:hover {background-color: var(--lime);}
#move-controls button span {display:none;}

/* control icons */
#move-controls button[data-control="left"] {
	background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.43 198.43"><path d="M187.297,67.908h-82.468V17.505c0-7.606-9.242-11.446-14.575-6.044L8.995,93.147c-3.34,3.341-3.34,8.674,0,12.016 l81.259,81.685c5.402,5.404,14.575,1.564,14.575-6.041v-50.334h82.468c4.691,0,8.53-3.839,8.53-8.531V76.44C195.827,71.747,191.988,67.908,187.297,67.908z"/></svg>');
}
#move-controls button[data-control="up"] {
	background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.43 198.43"><path d="M132.405,185.293v-82.468h50.403c7.606,0,11.446-9.242,6.044-14.575L107.167,6.991c-3.341-3.34-8.674-3.34-12.016,0 L13.467,88.25c-5.404,5.402-1.564,14.575,6.041,14.575h50.334v82.468c0,4.691,3.839,8.53,8.531,8.53h45.501 C128.566,193.823,132.405,189.985,132.405,185.293z"/></svg>');
}
#move-controls button[data-control="right"] {
	background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.43 198.43"><path d="M15.021,130.402h82.468v50.403c0,7.606,9.242,11.446,14.575,6.044l81.259-81.686c3.34-3.341,3.34-8.673,0-12.015 l-81.259-81.685c-5.402-5.404-14.575-1.564-14.575,6.041v50.334H15.021c-4.691,0-8.53,3.839-8.53,8.531v45.5 C6.491,126.563,10.33,130.402,15.021,130.402z"/></svg>');
}
#move-controls button[data-control="down"] {
	background-image: url('data:image/svg+xml; charset=utf8,<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.43 198.43"><path d="M69.913,13.018v82.468H19.509c-7.606,0-11.446,9.241-6.043,14.574l81.685,81.259c3.341,3.34,8.673,3.34,12.015,0 l81.685-81.259c5.404-5.402,1.564-14.574-6.041-14.574h-50.334V13.018c0-4.691-3.839-8.53-8.531-8.53h-45.5 C73.752,4.488,69.913,8.326,69.913,13.018z"/></svg>');
}

#move-controls button[data-control="back"] {
	background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.43 198.43"><path d="M142.706,182.798l-13.872-81.329l37.906-0.012c5.721-0.002,3.264-9.116-3.361-14.374l-53.61-80.126 c-0.319-3.294-0.823-3.294-1.402,0l-59.94,80.16c-7.087,5.331-10.219,14.378-4.5,14.377l37.855-0.012l-20.336,81.342 c-1.157,4.628,3.1,8.411,9.46,8.409l61.672-0.02C138.938,191.212,143.495,187.426,142.706,182.798z"/></svg>');
}
#move-controls button[data-control="forward"] {
	background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.43 198.43"><path d="M90.711,12.843L74.096,93.626H28.482c-6.883,0-15.651,9.053-13.343,14.278l77.002,79.599 c4.844,3.271,12.844,3.271,17.784,0l79.272-79.599c2.421-5.293-6.051-14.278-12.933-14.278h-45.551l-14.347-80.783 c-0.815-4.596-2.861-8.356-4.545-8.356H95.492C93.808,4.487,91.656,8.247,90.711,12.843z"/></svg>');
}

#move-controls button[data-control="rotate-left"] {
	background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="3.101 111.617 190.645 83.712"><path d="M12.402,114.717h51.956c8.287,0,12.437,10.02,6.577,15.879l-16.18,16.181c12.116,11.345,27.84,17.563,44.521,17.549 c30.004-0.027,55.93-20.597,63.09-49.161c0.521-2.079,2.372-3.547,4.516-3.547h22.208c2.905,0,5.113,2.639,4.575,5.494 c-8.385,44.53-47.482,78.218-94.449,78.218c-25.752,0-49.139-10.129-66.395-26.619l-13.842,13.842 c-5.859,5.859-15.878,1.709-15.878-6.577v-51.956C3.101,118.882,7.265,114.717,12.402,114.717z"/></svg>');
}
#move-controls button[data-control="rotate-up"] {
	background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="56.567 58.151 83.712 190.644"><path d="M137.18,67.453v51.955c0,8.287-10.02,12.438-15.879,6.577l-16.182-16.181c-11.344,12.116-17.562,27.84-17.548,44.521 c0.027,30.004,20.597,55.93,49.161,63.09c2.078,0.521,3.547,2.372,3.547,4.516v22.208c0,2.905-2.639,5.113-5.494,4.575 c-44.53-8.385-78.218-47.482-78.218-94.449c0-25.752,10.129-49.139,26.619-66.394L69.345,74.029 c-5.859-5.859-1.709-15.878,6.577-15.878h51.955C133.014,58.151,137.18,62.315,137.18,67.453z"/></svg>');
}
#move-controls button[data-control="rotate-right"] {
	background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="3.101 111.617 190.645 83.712"><path d="M193.745,124.019v51.956c0,8.286-10.019,12.437-15.878,6.577l-13.842-13.842c-17.256,16.49-40.643,26.619-66.395,26.619 c-46.967,0-86.064-33.688-94.449-78.218c-0.538-2.855,1.67-5.494,4.575-5.494h22.208c2.144,0,3.995,1.468,4.516,3.547 c7.16,28.564,33.086,49.134,63.09,49.161c16.682,0.015,32.405-6.204,44.521-17.549l-16.181-16.181 c-5.86-5.859-1.71-15.879,6.577-15.879h51.955C189.581,114.717,193.745,118.882,193.745,124.019z"/></svg>');
}
#move-controls button[data-control="rotate-down"] {
	background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="56.567 58.151 83.712 190.645"><path d="M127.877,248.795H75.922c-8.286,0-12.437-10.02-6.577-15.879l13.842-13.842c-16.49-17.255-26.619-40.642-26.619-66.394 c0-46.967,33.688-86.064,78.218-94.449c2.855-0.538,5.494,1.67,5.494,4.575v22.208c0,2.144-1.469,3.995-3.547,4.516 c-28.564,7.16-49.134,33.086-49.161,63.09c-0.015,16.682,6.204,32.405,17.548,44.521l16.182-16.181 c5.859-5.86,15.879-1.71,15.879,6.577v51.954C137.18,244.631,133.014,248.795,127.877,248.795z"/></svg>');
}