h1{
    color: aqua;
    
}
.playStop{
    position: relative;
    left: 85px;
    bottom: 110px;;
}
.countSection{
    position: relative;
    top: -42px;
    left: 55px;
}
.counter{
    width: 50px;
    height: 30px;
    border: solid black 1px;
    text-align: center;
    vertical-align: middle;
    line-height: 29px;
}
.reset{
    display: inline;
    /* float: right; */
    position: relative;
    color: #2bd434;
    right: -4px;
    bottom: 0px;
}
.speedSection{
    /* border: #2bd434 1px solid; */
    position: relative;
    top: -20px;
}
.tempoSlider{
    position: relative;
    bottom: 25px;
}
p{
    font-size: 50px;
    /* display: inline; */
    /* cursor: pointer; */
}
#minus{
    display: inline;
    cursor: pointer;
}
#myRange{
    display: inline;
    position: relative;
    bottom: 36px;
    left: 24px;
}
#plus{
    display: inline;
    position: relative;
    left: 147px;
    cursor: pointer;
    bottom: -5px;
}
.bpmScreen{
    position: relative;
    bottom: 73px
}
#bpm{
    position: relative;
    bottom: 71px;
    left: 2px;
}
.volumeSection{
    position: relative;
    bottom: 50px;
}
.volumeSlider{
    display: inline;
    position: relative;
    bottom: 44px;
    left: 92px;
}
.volumeSlider::-webkit-slider-thumb{
    cursor: pointer;
    background-color: #2bd434
}
.mute{
    position: relative;
    bottom: 24px;
}
.accentSection{
    display: inline;
    position: relative;
    left: 117px;
    bottom: 85px;
}
.functions{
    position: relative;
    bottom: 60px;
}
.stop{
    display: none;
    cursor: pointer;
    width: 74px;
    height: 74px;
    background-color: white;
    /* border-style: solid; */
    /* border-width: 37px; */
    /* border-color: #202020; */
    border-style: double;
    /* border-width: 0px 37px 0px 37px; */
    border-width: 0px 0px 0px 37px;
    border-color: #e79833;
}
.play{
    display: inline;
    background-color: white;
    border-style: solid;
    box-sizing: border-box;   
    border-width: 37px 0px 37px 74px;
    border-color: transparent transparent transparent #2bd434;
    cursor: pointer;
}
.slidecontainer {width: 50%;} /* Width of the outside container
    
/* 
/* The slider itself */
/* .slider { */
    /* -webkit-appearance: none;  Override default CSS styles */ */
    /* appearance: none; */
    /* width: 100%; Full-width */
    /* height: 25px/; Specified height */
    /* background: #d3d3d3; /* Grey background */
    /* outline: none; Remove outline */
    /* opacity: 0.7; Set transparency (for mouse-over effects on hover) */
    /* -webkit-transition: .2s; 0.2 seconds transition on hover */
    /* transition: opacity .2s; */
/* } */ 

/* Mouse-over effects */
.slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ 
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #4CAF50; /* Green background */
    cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #4CAF50; /* Green background */
    cursor: pointer; /* Cursor on hover */
} 

.light{
    width: 50px;
    height: 50px;
    border: solid 1px green;
    background: yellow;
    border-radius: 50px; 
    transition: .5s
}

.blue{
    width: 50px;
    height: 50px;
    border: solid 1px green;
    background: blue;
    border-radius: 20px; 
    position: relative;
    left: 108px;
}


.metronome{
    position: relative;
    width: 500px;
    left: 40%;
}