@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root{
    --p:rgb(0, 136, 255);
    --p0:rgba(0, 136, 255, 0.242);

    --bg1: white;
    --bg2: rgb(245, 245, 245);
    --bg3: rgb(236, 236, 236);
    --bg4: rgb(225, 225, 225);
}

*{
    text-align: center;
    font-family: 'Inter', sans-serif;
}

.container{
    display: flex;
    flex-direction: column;

    gap:10px;
    align-items: center;
    justify-content: center;
}

.buttons{
    display: flex;
    gap:10px;
    justify-content: center;
}

button{
    background-color: var(--p);
    border:none;
    font-weight: 500;
    font-size:15px;
    color:white;
    padding: 13px;
    border-radius: 8px;
    outline:0 solid transparent;
    cursor: pointer;
}

button:hover{
    opacity: 0.8;
}

button:active{
    outline:4px solid var(--p0);
}

.close{
    background-color: transparent;
    color:black;
    position:absolute;
    left:5px;
    top:5px;
}

.metronome-container{
    width: min(100%, 400px);
    
    height:fit-content;
    padding: 10px;
}

.bar{
    height:100px;
    
    display: flex;
    justify-content: center;
}

.panel, .bar{
    background-color: var(--bg2);
    border-radius: 10px;

    margin:10px;
    width: calc(100% - 20px);
 
    outline:2px solid var(--bg4);

    padding: 10px;
    box-sizing: border-box;
}

#bpm, input[type='text']{
    padding: 10px;
    border:2px solid var(--bg4);
    margin:10px;
    border-radius: 10px;

    font-size: 20px;

    text-align: center;
}

#bpm:focus, input[type='text']:focus{
    outline:3px solid var(--p0);
}

.stick{
    border:2px solid rgba(0, 0, 0, 0.623);

    border-radius: 9px;

    position:absolute;
    bottom:0;

    height: calc(100% - 20px);

    transform-origin: bottom;

    z-index: 1;
}

.bg{
    content: "";
    position:absolute;
    height:calc(100% - 20px);
    width: 170px;
    padding: 5px;

    z-index: 0;

    border-top-left-radius: 300px;
    border-top-right-radius: 300px;


    background: conic-gradient(from 150deg at 50% 100%, #f9f9f9, #8b9d9b, #f9f9f9, #8b9d9b, #f9f9f9, #8b9d9b, #f9f9f9, #8b9d9b);
}

.stick.moving{
    animation: tick .9s linear infinite;
}

.bpm{
    display: flex;
    justify-content: center;
}

input[type='range']{
    border:none;
    accent-color:var(--p);
}

hr{
    border-top: 1px solid var(--bg3);
}

@keyframes tick{
    0%{
        transform:rotateZ(-90deg);
    }

    25%{
        transform:rotateZ(0deg);
    }

    50%{
        transform:rotateZ(90deg);
    }

    75%{
        transform:rotateZ(0deg);
    }

    100%{
        transform:rotateZ(-90deg);
    }
}

.error{
    background-color: rgba(255,0,0,0.3);
    color:rgb(119, 0, 0);

    border-radius: 10px;
    padding: 5px;
}