TurtleWolfe/app.js

## app.js
function removeTransition(e) {
  if (e.propertyName !== "transform") return;
  e.target.classList.remove("playing");
}

const players = document.querySelectorAll("audio");
const volumeControl = document.getElementById("accent-control");
let globalVolume = 1;

volumeControl.addEventListener("change", function() {
  globalVolume = volumeControl.value / 100;

  players.forEach(function(player) {
    player.volume = globalVolume;
  });
});

function playSound(e) {
  //   const note = document.querySelector(`[data-sound-id="${keyName}"]`).play();
  const keyName = event.key;
  const audio = document.querySelector(`audio[data-sound-id="${keyName}"]`);
  const key = document.querySelector(`div[data-sound-id="${keyName}"]`);
  if (!audio) return;

  key.classList.add("playing");
  audio.currentTime = 0;
  audio.play();
}
// // Keypress
// //taskInput.addEventListener("keypress", runEvent);
// body.addEventListener("keypress", runEvent);
const keys = Array.from(document.querySelectorAll(".key"));
keys.forEach(key => key.addEventListener("transitionend", removeTransition));
window.addEventListener("keypress", playSound);

## index.html
<!DOCTYPE html>
<html class="no-js" lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>pianoMACHINE</title>
  <meta name="description" content="remember when we all skinned our music players?">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/normalize.css">
  <script src="js/vendor/modernizr-2.8.3.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
    crossorigin="anonymous">
  <link rel="stylesheet" href="main.css">
</head>

<body id="body">
  <!--[if lt IE 8]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
  <div>
    <audio data-sound-id="a" class="accent">
      <source type="audio/wav" src="javaScript30daysDRUM/clap.wav" />
      Your browser does not support the <code>audio</code> element.
    </audio>
    <audio data-sound-id="s" class="accent">
      <source type="audio/wav" src="javaScript30daysDRUM/hihat.wav" />
      Your browser does not support the <code>audio</code> element.
    </audio>
    <audio data-sound-id="d" class="accent">
      <source type="audio/wav" src="javaScript30daysDRUM/kick.wav" />
      Your browser does not support the <code>audio</code> element.
    </audio>
  </div><!-- audio tags -->
  <div class="keys">
    <div data-sound-id="a" class="key">
      <kbd>a</kbd>
      <span class="sound">clap</span>
    </div>
    <div data-sound-id="s" class="key">
      <kbd>s</kbd>
      <span class="sound">hihat</span>
    </div>
    <div data-sound-id="d" class="key">
      <kbd>d</kbd>
      <span class="sound">kick</span>
    </div>
  </div>

  <div class="keyz-loop">
    <div data-sound-id="7" class="key">
      <kbd>7</kbd>
      <span class="sound">backloop</span>
    </div>
    <div data-sound-id="8" class="key">
      <kbd>8</kbd>
      <span class="sound">backloop</span>
    </div>
  </div>
  <div class="container">
    <input id="accent-control" type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)">SetVolume</input>
    <input id="backloop-control" type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)"></input>
    <h5>
      press <code>[a,s,d] to play one of 3 DRUM sounds</code><br /><br />
      press <code>[7 or 8] to play a BACKING LOOP</code><br /><br /><br />

      <a href="https://freesound.org/people/TurtleWolfe/bookmarks/category/90037/" rel="link">freeSOUND.org</a><br />
      check out my bookmarks & then go link your own collections<br />
      by editing the url source of the audio tags.<br /><br />
      <code>
          &lt;audio data-sound-id="1"&gt;<br/>
          &lt;source type="audio/wav" src="https://github...wav?raw=true" /&gt;<br/>
          &lt;/audio&gt;<br/>
      </code><br />
      <a href="https://www.twitch.tv/videos/315409005" rel="link">window.addEventListener("keypress",
        playSound);</a><br />
      global volume slider<br />
      drop down selector for looping backbeat<br /><br />

      project inspired after first 33 videos which cover the fundamentals<br />
      <a href="https://www.udemy.com/share/10015YBEcTdV1aQQ==/" rel="link">Modern JavaScript From the Beginning</a><br />&
      the first of 30 tutorials<br />
      <a href="https://javascript30.com/" rel="link">https://javascript30.com/</a><br />
    </h5>

    <footer>
      <a href="https://github.com/TurtleWolf/pianoMACHINE" rel="link" class="yallow">source code on
        github.io</a><br />
      <a href="https://turtlewolfe.com/" rel="link" class="yallow">Copyright 2018, TurtleWolfe.com</a>
    </footer>
  </div><!-- backloops on the right collumn -->
  <audio data-sound-id="7" class="loop" loop>
    <source type="audio/wav" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/freeSound/435147__kickhat__ambient-drone-21-07-2018.wav?raw=true" />
    Your browser does not support the <code>audio</code> element.
  </audio>
  <audio data-sound-id="8" class="loop" loop>
    <source type="audio/wav" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/freeSound/440957__l-q__coin-3.wav?raw=true" />
    Your browser does not support the <code>audio</code> element.
  </audio>
  <audio data-sound-id="9" class="loop" loop>
    <source type="audio/wav" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/freeSound/441375__malinby__organ.wav?raw=true" />
    Your browser does not support the <code>audio</code> element.
  </audio>
  <script src="app.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
    crossorigin="anonymous"></script>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-125846162-4"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', 'UA-125846162-4');
  </script>
</body>

</html>

## main.css
* {
  box-sizing: border-box;
}
*:before,
*:after {
  box-sizing: border-box;
}
html,
.card-action {
  color: yellow;
  text-shadow: 4px 4px 10px rgba(0, 0, 0, 1);
  /* height: 100%;
  position: relative;
  background: url(https://github.com/TurtleWolf/pianoMACHINE/blob/master/images/ChattanoogaBridge.jpg?raw=true)
    no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; */
}
.collection .collection-item {
  background-color: rgba(117, 121, 39, 0.1); /* 50% transparent */
}

a {
  color: lightblue;
  text-shadow: 4px 4px 10px rgba(0, 0, 0, 1);
}
.yallow {
  color: yellow;
  text-shadow: 4px 4px 10px rgba(0, 0, 0, 1);
}
.container {
  margin-top: 7%;
}
#navbar {
  left: 0px;
  width: 49%;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  border: 1mm ridge rgb(333, 333, 333, 0.6);
} /* navbar */
header {
  font-size: 2.5em;
  text-align: right;
  float: right;
}

p {
  color: yellow;
  text-shadow: 4px 4px 10px rgba(0, 0, 0, 1);
  height: 100%;
  position: relative;
  background: url(https://github.com/TurtleWolf/pianoMACHINE/blob/master/ChattanoogaBridge.jpg?raw=true)
    no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

@media (max-width: 1250px) {
  /* @media (width <= 30em) {....}  */
} /* end of media query 1250px */
footer {
  z-index: 2;
  position: fixed;
  bottom: 0;
  background-color: black;
  border-radius: 13%;
}
html {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4c4c4c+0,595959+12,666666+25,474747+39,2c2c2c+50,000000+51,111111+60,2b2b2b+76,1c1c1c+91,131313+100;Black+Gloss+%231 */
  background: rgb(76, 76, 76); /* Old browsers */
  background: -moz-linear-gradient(
    top,
    rgba(76, 76, 76, 1) 0%,
    rgba(89, 89, 89, 1) 12%,
    rgba(102, 102, 102, 1) 25%,
    rgba(71, 71, 71, 1) 39%,
    rgba(44, 44, 44, 1) 50%,
    rgba(0, 0, 0, 1) 51%,
    rgba(17, 17, 17, 1) 60%,
    rgba(43, 43, 43, 1) 76%,
    rgba(28, 28, 28, 1) 91%,
    rgba(19, 19, 19, 1) 100%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    top,
    rgba(76, 76, 76, 1) 0%,
    rgba(89, 89, 89, 1) 12%,
    rgba(102, 102, 102, 1) 25%,
    rgba(71, 71, 71, 1) 39%,
    rgba(44, 44, 44, 1) 50%,
    rgba(0, 0, 0, 1) 51%,
    rgba(17, 17, 17, 1) 60%,
    rgba(43, 43, 43, 1) 76%,
    rgba(28, 28, 28, 1) 91%,
    rgba(19, 19, 19, 1) 100%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    to bottom,
    rgba(76, 76, 76, 1) 0%,
    rgba(89, 89, 89, 1) 12%,
    rgba(102, 102, 102, 1) 25%,
    rgba(71, 71, 71, 1) 39%,
    rgba(44, 44, 44, 1) 50%,
    rgba(0, 0, 0, 1) 51%,
    rgba(17, 17, 17, 1) 60%,
    rgba(43, 43, 43, 1) 76%,
    rgba(28, 28, 28, 1) 91%,
    rgba(19, 19, 19, 1) 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
  font-size: 10px;
  /* background: url(https://github.com/TurtleWolf/Responsive-Web-Design_-_Technical-Document/blob/master/800px-Joy_Oil_gas_station_blueprints.jpg?raw=true)
    bottom center; */
  background-size: cover;
}

body,
html {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
.keyz-loop {
  float: right;
  top: 0;
  clear: right;
}
.keyz {
  top: 0;
  position: fixed;
  z-index: 1;
}
.keys {
  top: 0;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 1;
}

.key {
  border: 0.4rem solid black;
  border-radius: 0.5rem;
  margin: 1rem;
  font-size: 1.5rem;
  padding: 1rem 0.5rem;
  transition: all 0.07s ease;
  width: 10rem;
  text-align: center;
  color: white;
  background: rgba(0, 0, 0, 0.4);
  text-shadow: 0 0 0.5rem black;
}

.playing {
  transform: scale(1.1);
  border-color: #ffc600;
  box-shadow: 0 0 1rem #ffc600;
}

kbd {
  display: block;
  font-size: 4rem;
}

.sound {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  color: #ffc600;
}
#accent-control,
#backloop-control {
  /*
  position: fixed;
  z-index: 1;
  */
}
#task-title {
  justify-content: right;
  margin-left: 7%;
}
.float-right {
  float: right;
  margin: 7%;
}
	function removeTransition(e) {
	if (e.propertyName !== "transform") return;
	e.target.classList.remove("playing");
	}

	const players = document.querySelectorAll("audio");
	const volumeControl = document.getElementById("accent-control");
	let globalVolume = 1;

	volumeControl.addEventListener("change", function() {
	globalVolume = volumeControl.value / 100;

	players.forEach(function(player) {
	player.volume = globalVolume;
	});
	});

	function playSound(e) {
	// const note = document.querySelector(`[data-sound-id="${keyName}"]`).play();
	const keyName = event.key;
	const audio = document.querySelector(`audio[data-sound-id="${keyName}"]`);
	const key = document.querySelector(`div[data-sound-id="${keyName}"]`);
	if (!audio) return;

	key.classList.add("playing");
	audio.currentTime = 0;
	audio.play();
	}
	// // Keypress
	// //taskInput.addEventListener("keypress", runEvent);
	// body.addEventListener("keypress", runEvent);
	const keys = Array.from(document.querySelectorAll(".key"));
	keys.forEach(key => key.addEventListener("transitionend", removeTransition));
	window.addEventListener("keypress", playSound);
	<!DOCTYPE html>
	<html class="no-js" lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>pianoMACHINE</title>
	<meta name="description" content="remember when we all skinned our music players?">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/normalize.css">
	<script src="js/vendor/modernizr-2.8.3.min.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
	crossorigin="anonymous">
	<link rel="stylesheet" href="main.css">
	</head>

	<body id="body">
	<!--[if lt IE 8]>
	<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
	<![endif]-->
	<div>
	<audio data-sound-id="a" class="accent">
	<source type="audio/wav" src="javaScript30daysDRUM/clap.wav" />
	Your browser does not support the <code>audio</code> element.
	</audio>
	<audio data-sound-id="s" class="accent">
	<source type="audio/wav" src="javaScript30daysDRUM/hihat.wav" />
	Your browser does not support the <code>audio</code> element.
	</audio>
	<audio data-sound-id="d" class="accent">
	<source type="audio/wav" src="javaScript30daysDRUM/kick.wav" />
	Your browser does not support the <code>audio</code> element.
	</audio>
	</div><!-- audio tags -->
	<div class="keys">
	<div data-sound-id="a" class="key">
	<kbd>a</kbd>
	<span class="sound">clap</span>
	</div>
	<div data-sound-id="s" class="key">
	<kbd>s</kbd>
	<span class="sound">hihat</span>
	</div>
	<div data-sound-id="d" class="key">
	<kbd>d</kbd>
	<span class="sound">kick</span>
	</div>
	</div>

	<div class="keyz-loop">
	<div data-sound-id="7" class="key">
	<kbd>7</kbd>
	<span class="sound">backloop</span>
	</div>
	<div data-sound-id="8" class="key">
	<kbd>8</kbd>
	<span class="sound">backloop</span>
	</div>
	</div>
	<div class="container">
	<input id="accent-control" type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)">SetVolume</input>
	<input id="backloop-control" type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)"></input>
	<h5>
	press <code>[a,s,d] to play one of 3 DRUM sounds</code><br /><br />
	press <code>[7 or 8] to play a BACKING LOOP</code><br /><br /><br />

	<a href="https://freesound.org/people/TurtleWolfe/bookmarks/category/90037/" rel="link">freeSOUND.org</a><br />
	check out my bookmarks & then go link your own collections<br />
	by editing the url source of the audio tags.<br /><br />
	<code>
	<audio data-sound-id="1"><br/>
	<source type="audio/wav" src="https://github...wav?raw=true" /><br/>
	</audio><br/>
	</code><br />
	<a href="https://www.twitch.tv/videos/315409005" rel="link">window.addEventListener("keypress",
	playSound);</a><br />
	global volume slider<br />
	drop down selector for looping backbeat<br /><br />

	project inspired after first 33 videos which cover the fundamentals<br />
	<a href="https://www.udemy.com/share/10015YBEcTdV1aQQ==/" rel="link">Modern JavaScript From the Beginning</a><br />&
	the first of 30 tutorials<br />
	<a href="https://javascript30.com/" rel="link">https://javascript30.com/</a><br />
	</h5>

	<footer>
	<a href="https://github.com/TurtleWolf/pianoMACHINE" rel="link" class="yallow">source code on
	github.io</a><br />
	<a href="https://turtlewolfe.com/" rel="link" class="yallow">Copyright 2018, TurtleWolfe.com</a>
	</footer>
	</div><!-- backloops on the right collumn -->
	<audio data-sound-id="7" class="loop" loop>
	<source type="audio/wav" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/freeSound/435147__kickhat__ambient-drone-21-07-2018.wav?raw=true" />
	Your browser does not support the <code>audio</code> element.
	</audio>
	<audio data-sound-id="8" class="loop" loop>
	<source type="audio/wav" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/freeSound/440957__l-q__coin-3.wav?raw=true" />
	Your browser does not support the <code>audio</code> element.
	</audio>
	<audio data-sound-id="9" class="loop" loop>
	<source type="audio/wav" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/freeSound/441375__malinby__organ.wav?raw=true" />
	Your browser does not support the <code>audio</code> element.
	</audio>
	<script src="app.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
	crossorigin="anonymous"></script>
	<!-- Global site tag (gtag.js) - Google Analytics -->
	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-125846162-4"></script>
	<script>
	window.dataLayer = window.dataLayer \|\| [];
	function gtag() { dataLayer.push(arguments); }
	gtag('js', new Date());
	gtag('config', 'UA-125846162-4');
	</script>
	</body>

	</html>
	* {
	box-sizing: border-box;
	}
	*:before,
	*:after {
	box-sizing: border-box;
	}
	html,
	.card-action {
	color: yellow;
	text-shadow: 4px 4px 10px rgba(0, 0, 0, 1);
	/* height: 100%;
	position: relative;
	background: url(https://github.com/TurtleWolf/pianoMACHINE/blob/master/images/ChattanoogaBridge.jpg?raw=true)
	no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover; */
	}
	.collection .collection-item {
	background-color: rgba(117, 121, 39, 0.1); /* 50% transparent */
	}

	a {
	color: lightblue;
	text-shadow: 4px 4px 10px rgba(0, 0, 0, 1);
	}
	.yallow {
	color: yellow;
	text-shadow: 4px 4px 10px rgba(0, 0, 0, 1);
	}
	.container {
	margin-top: 7%;
	}
	#navbar {
	left: 0px;
	width: 49%;
	position: fixed; /* Set the navbar to fixed position */
	top: 0; /* Position the navbar at the top of the page */
	border: 1mm ridge rgb(333, 333, 333, 0.6);
	} /* navbar */
	header {
	font-size: 2.5em;
	text-align: right;
	float: right;
	}

	p {
	color: yellow;
	text-shadow: 4px 4px 10px rgba(0, 0, 0, 1);
	height: 100%;
	position: relative;
	background: url(https://github.com/TurtleWolf/pianoMACHINE/blob/master/ChattanoogaBridge.jpg?raw=true)
	no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	}

	@media (max-width: 1250px) {
	/* @media (width <= 30em) {....} */
	} /* end of media query 1250px */
	footer {
	z-index: 2;
	position: fixed;
	bottom: 0;
	background-color: black;
	border-radius: 13%;
	}
	html {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4c4c4c+0,595959+12,666666+25,474747+39,2c2c2c+50,000000+51,111111+60,2b2b2b+76,1c1c1c+91,131313+100;Black+Gloss+%231 */
	background: rgb(76, 76, 76); /* Old browsers */
	background: -moz-linear-gradient(
	top,
	rgba(76, 76, 76, 1) 0%,
	rgba(89, 89, 89, 1) 12%,
	rgba(102, 102, 102, 1) 25%,
	rgba(71, 71, 71, 1) 39%,
	rgba(44, 44, 44, 1) 50%,
	rgba(0, 0, 0, 1) 51%,
	rgba(17, 17, 17, 1) 60%,
	rgba(43, 43, 43, 1) 76%,
	rgba(28, 28, 28, 1) 91%,
	rgba(19, 19, 19, 1) 100%
	); /* FF3.6-15 */
	background: -webkit-linear-gradient(
	top,
	rgba(76, 76, 76, 1) 0%,
	rgba(89, 89, 89, 1) 12%,
	rgba(102, 102, 102, 1) 25%,
	rgba(71, 71, 71, 1) 39%,
	rgba(44, 44, 44, 1) 50%,
	rgba(0, 0, 0, 1) 51%,
	rgba(17, 17, 17, 1) 60%,
	rgba(43, 43, 43, 1) 76%,
	rgba(28, 28, 28, 1) 91%,
	rgba(19, 19, 19, 1) 100%
	); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(
	to bottom,
	rgba(76, 76, 76, 1) 0%,
	rgba(89, 89, 89, 1) 12%,
	rgba(102, 102, 102, 1) 25%,
	rgba(71, 71, 71, 1) 39%,
	rgba(44, 44, 44, 1) 50%,
	rgba(0, 0, 0, 1) 51%,
	rgba(17, 17, 17, 1) 60%,
	rgba(43, 43, 43, 1) 76%,
	rgba(28, 28, 28, 1) 91%,
	rgba(19, 19, 19, 1) 100%
	); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
	font-size: 10px;
	/* background: url(https://github.com/TurtleWolf/Responsive-Web-Design_-_Technical-Document/blob/master/800px-Joy_Oil_gas_station_blueprints.jpg?raw=true)
	bottom center; */
	background-size: cover;
	}

	body,
	html {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	}
	.keyz-loop {
	float: right;
	top: 0;
	clear: right;
	}
	.keyz {
	top: 0;
	position: fixed;
	z-index: 1;
	}
	.keys {
	top: 0;
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	position: fixed;
	z-index: 1;
	}

	.key {
	border: 0.4rem solid black;
	border-radius: 0.5rem;
	margin: 1rem;
	font-size: 1.5rem;
	padding: 1rem 0.5rem;
	transition: all 0.07s ease;
	width: 10rem;
	text-align: center;
	color: white;
	background: rgba(0, 0, 0, 0.4);
	text-shadow: 0 0 0.5rem black;
	}

	.playing {
	transform: scale(1.1);
	border-color: #ffc600;
	box-shadow: 0 0 1rem #ffc600;
	}

	kbd {
	display: block;
	font-size: 4rem;
	}

	.sound {
	font-size: 1.2rem;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	color: #ffc600;
	}
	#accent-control,
	#backloop-control {
	/*
	position: fixed;
	z-index: 1;
	*/
	}
	#task-title {
	justify-content: right;
	margin-left: 7%;
	}
	.float-right {
	float: right;
	margin: 7%;
	}