body {
    /* background-color:rgb(25, 114, 120,0.85); */
    background-image: linear-gradient(to bottom, rgba(25, 114, 120,0.7), rgba(25, 114, 120,1));
    color: white;
    font-family: 'Heebo', sans-serif!important;
    height: 100vh;
    /* width: 100%; */
    text-align: center;
    
}
#header{
    padding: 1%;
}
/* #main{
    padding: 1%;
   
} */
#disp{
    justify-content: center;
    /* padding-bottom: 1%; */
    /* padding: 2%; */
    /* width: 100%; */
    
}
#dial{
    justify-content: center;
    /* padding: 1%; */
    /* width: 100%; */
}


#sld{
    /* padding: 1%; */
    vertical-align: middle;
    
    align-items: center;
    width: 90%;
}

#playback{
    
    padding: 4vh;
    
}

h1 {
    font-size: 18vh;
}
h2 {
    font-size: 4vh;
}
h4 {
    font-size: 3vh;
}


.slidecontainer {
    width: 90%; /* Width of the outside container */
    padding: 1%;
    
  }
  
/* The slider itself */
.slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 1vh; /* Specified height */
    
    background: #197278; 
    outline: none; /* Remove outline */
    opacity: 1; 
}


/* 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: 3vh; /* Set a specific slider handle width */
    height: 5vh; /* Slider handle height */
    border-radius: 12px; 
    background: #ffffff; /* Green background */
    cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
    width: 30px; /* Set a specific slider handle width */
    height: 50px; /* Slider handle height */
    border-radius: 12px; 
    background: #ffffff; /* Green background */
    cursor: pointer; /* Cursor on hover */
}



#btn-playback{
    padding: 2%;
    border: none;
    background-color: #fff;
    color: #197278;
    font-weight: 900;
    font-size: 3vh;
    border-radius: 12px;

}
#btn-playback:hover{
    background-color: #197278;
    color: #fff;
}
.bpm-btn{
    padding: 2%;
    padding-top: 3%;
    padding-left: 7%;
    padding-right: 7%;
    border: none;
    background-color: rgb(25, 114, 120,0);
    color: #fff;
    font-weight: 900;
    font-size: 3vh;
}
.bpm-btn:hover{
    background-color: #197278;
    color: #fff;
}
#beatsSettings{
    padding: 5%;
}