@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200&family=Montserrat:wght@300&family=Nunito+Sans:wght@200&family=Poppins:ital,wght@0,100;0,200;1,100&family=Roboto:wght@100;400&display=swap');


*{
    padding: 0;
    margin: 0;
    scale: 1.03;
}

body {

font-family: 'Montserrat' , sans-serif;
color : #ffffff;
user-select: none;

}

.container {

    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;

}

.metronome {
    
    display: flex;
    flex-direction: column;
    width: 300px;
    height:290px;
    justify-content: space-between;
    
}

.but{
    width: 20px;
    height: 20px;
    font-size: 1em;
    border-radius: 50%;
    text-align: center;
    background : #540043;
    line-height:50px;
    margin: 0 auto;
    cursor: pointer;
}




.bpmDisp {
    
    width: 100%;
    text-align: center;
    color : #ffffff;
}

.bpmDisp .tempo {
    
    font-size: 4em;
    
}




.tempoSettings {
   
    display: flex;
    justify-content: space-between;
}


.tempoSettings .ajustTempoBtn {
    
    width: 30px;;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #231d3e;
    font-size: 40px;
    text-align: center;
    cursor: pointer;

}

.tempoSettings .ajustTempoBtn:hover{
    background: #ffffff;
    color: #000;

}

.tempoSettings .decreaseTempo{
    line-height: 23px;
}
.tempoSettings .increaseTempo{
    line-height: 31px;
    font-size: 35px;
}




input[type=range] {
    -webkit-appearance: none;
    background-color: transparent;
    width: 67%;
}

input[type=range]::-webkit-slider-thumb{
    -webkit-appearance: none;
}
input[type=range]::focus{
    -outline: none;
}

input[type=range]::-webkit-slider-thumb{
    -webkit-appearance: none;
    width:16px;
    height:16px;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    margin-top: -7px;
}

input[type=range]::-moz-range-thumb{
    -webkit-appearance: none;
    width:16px;
    height:16px;
    border-radius: 50%;
    background: #ffffff;
    cursor :pointer;
    border: none;
}

input[type=range]::-webkit-slider-runnable-track{
    width: 100%;
    height: 2px;
    background: grey;
}









.para {
   
    width: 50px;
    height: 50px;
    font-size: 1em;
    text-align: center;
    background : #39038b;
    border-radius: 50%;
    line-height:50px;
    margin: 0 auto;
    cursor: pointer;

}

.para:hover {
    background-color: rgb(4, 115, 76);
}

.measures{
    
    display: flex;
    justify-content: center;
    font-size: 1.5em;
    
}
.measures .stepper {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #231d3e;
    text-align: center;
    margin:0 9px 0 9px;
    cursor: pointer;
}

.measures .stepper:hover{
    background-color: #ffffff;
    color: #000;
}

.measures .stepper .addBeats{
    line-height: 30px;
}