
body {
  margin: 0;
  padding: 0;
  background-color: lightblue;
  overflow: hidden;
}

.project {

    padding: 0;
    margin: auto;
    display: block;
    width: 1000px;


}

.instructions {
  position: absolute;
  width: 270px;
  display: none;
  z-index: 10;
  border: 6px solid #3f00ff;
  border-left: 0;
  font-family: Helvetica;
  font-size: 16px;
  color: blue;
  font-weight: 900;
  list-style: none;
  padding: 0;


}

.instructions li {
  padding: 10px;
  width: 250px;
}

.i1 {
  background-color: green;
}

.i2 {
  background-color: orange;
}

.i3 {
  background-color: yellow;
}

.i4 {
  background-color: beige;
}

.inst-button-div {
  position: relative;
}

.inst-button {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 240px;
  left: 442px;
  cursor: pointer;
  font-family: Helvetica;
  font-size: 16px;
  color: blue;
  background-color: yellow;
  border: 5px solid blue;
  font-weight: 900;
  outline: none;
}


#app-canvas {
  display: block;
}


.title {
  font-family: 'Great Vibes', cursive;
  position: absolute;
  background: transparent;
  font-size: 70px;
  width: 1000px;
  text-align: center;
  height: 0;
  top: 70px;
  color: #3f00ff;
}

.drum-heading {
  display: block;
  width: 150px;
  font-family: Helvetica;
  font-size: 16px;
  color: blue;
  position: relative;
  top: 300px;
  left: 30px;

}

.bass-heading {
  width: 200px;
  font-family: Helvetica;
  font-size: 16px;
  color: blue;
  position: relative;
  top: 270px;
  left: 427px;

}

.keys-heading {
  width: 200px;
  font-family: Helvetica;
  font-size: 16px;
  color: blue;
  position: relative;
  top: 240px;
  left: 782px;
}

.controls {
  position: relative;
  bottom: 240px;
  left: 35px;
}

.tempo {
  width: 100px;
  position: relative;
  top: 35px;

}

.controls h2{
  font-family: Helvetica;
  font-size: 16px;
  color: blue;
}

.slider {
  -moz-appearance: none;
  -webkit-appearance: none;
    appearance: none;
    width: 125px;
    height: 15px;
    background-color: yellow;
    border: 5px solid blue;
    outline: none;


}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 15px;
    background-color: green;
    cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 15px;
  background-color: green;
  cursor: pointer;
}

.slider::-moz-range-track {
  background:transparent;
  border:0px;
}

.stop {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  left: 410px;
  cursor: pointer;
  font-family: Helvetica;
  font-size: 16px;
  color: blue;
  background-color: yellow;
  border: 5px solid blue;
  font-weight: 900;
  outline: none;
}

.stop:active {
  background-color: green;
}

.bass-mute {
  position: absolute;
  bottom: 55px;
  left: 485px;
  cursor: pointer;
}


.bass-mute-label {
  position: absolute;
  bottom: 55px;
  left: 445px;
  font-family: Helvetica;
  font-size: 16px;
  color: blue;
  font-weight: 900;
}


.keys-mute {
  position: absolute;
  bottom: 55px;
  left: 830px;
  cursor: pointer;

}


.keys-mute-label {
  position: absolute;
  bottom: 55px;
  left: 790px;
  font-family: Helvetica;
  font-size: 16px;
  color: blue;
  font-weight: 900;
}

.drums-mute {
  position: absolute;
  bottom: 55px;
  left: 80px;
  cursor: pointer;
}


.drums-mute-label {
  position: absolute;
  bottom: 55px;
  left: 40px;
  font-family: Helvetica;
  font-size: 16px;
  color: blue;
  font-weight: 900;
}

.credits {
  display: flex;
  width: 350px;
  justify-content: space-around;
  font-family: 'Great Vibes', cursive;
  font-size: 30px;
  color: blue;
  position: relative;
  bottom: 120px;
  left: 325px;
}

.credits a  {
  text-decoration: none;
  color: blue;

}

.credits a:hover {
  color: orange;


}

.demo {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  left: 780px;
  font-family: Helvetica;
  font-size: 16px;
  color: blue;
  background-color: yellow;
  border: 5px solid blue;
  font-weight: 900;
  outline: none;
  cursor: pointer;
}

.demo:active {
  background-color: green;
}
