@font-face {
    font-family: 'digital-7';
    src: url('../assets/fonts/digital-7.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face{
    font-family:"Nunito";
    src:url("../assets/fonts/Nunito-VariableFont_wght.ttf")
    format("truetype");
}

@font-face{
    font-family:"Oxanium";
    src:url("../assets/fonts/Oxanium-VariableFont_wght.ttf")
    format("truetype");
}

.meditation-title{

    font-family:"Nunito", sans-serif;

    font-weight:500;

    color:#17445c;

    font-size:clamp(
        44px,
        5vw,
        64px
    );

    letter-spacing:1px;

}

.meditation-btn,
.move-btn{

    font-family:"Nunito", sans-serif;

    font-weight:500;

}

.meditation-mantra{

    width:100%;

    margin-top:30px;

    text-align:center;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    color:#17445c;

    font-weight:500;

    font-size:clamp(
        16px,
        4vw,
        20px
    );

}

.timer-panel{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    width:100%;
    text-align:center;
    padding-bottom:20px;
}

.timer-circle{
    width:min(85vw,550px);
    aspect-ratio:1/1;
    height:auto;
    position:relative;
    transform-origin:center center;
}

.timer-value{
    position:absolute;
    inset:0;
    z-index:20;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.time-display{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:10px;
    user-select:none;
}

.time-main{
    font-family:"Oxanium", sans-serif;

    font-size:clamp(
        100px,
        14vw,
        110px
    );

    font-weight:500;

    line-height:1;

    letter-spacing:0;

    color:#17445c;
}

.time-seconds{
    font-family:"Oxanium", sans-serif;

    font-size:clamp(
        55px,
        7vw,
        60px
    );

    color:#17445c;

    opacity:.55;

    position:relative;

    top:0px;
}


#planned-time{

    font-family:"Nunito", sans-serif;

    margin-top:3px;

    font-size:clamp(
        18px,
        2vw,
        26px
    );

    font-weight:500;

    color:#17445c;

}

.percent-marker{
    display:none;
}

.timer-actions{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:25px;
    margin-top:15px;
}

.action-btn{

    width:clamp(
        50px,
        7vw,
        60px
    );

    height:clamp(
        50px,
        7vw,
        60px
    );

    overflow:hidden;

    background:transparent;

    border:none;

    padding:0;

    display:flex;

    justify-content:center;

    align-items:center;

}
.action-btn img{
    width:100%;
    height:100%;
    object-fit:contain;
    transform:scale(1.0);
}


.meditation-times{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    width:100%;
    margin-top:25px;
    margin-bottom:10px;
}

.meditation-btn{

    background:#e8f2f3;

    color:#17445c;

    border:none;

    border-radius:25px;

    padding:12px 18px;

    cursor:pointer;

    font-family:"Nunito", sans-serif;

    font-size:16px;

    font-weight:500;

    transition:.2s;

}
.meditation-btn.active{

    background:#63bec8;

    color:white;

}



.move-btn{

    margin-top:20px;

    background:#63bec8;

    color:white;

    border:none;

    border-radius:999px;

    padding:14px 40px;

    cursor:pointer;

    font-family:"Nunito", sans-serif;

    font-size:24px;

    font-weight:500;

}

.move-btn:hover{

    opacity:.9;

}

.movement-counter{

    margin-top:15px;

    text-align:center;

    min-height:24px;

    font-size:22px;

    letter-spacing:4px;

    color:#17445c;

}

#btn-fin{
    display:none;
}

.breath-wave{

    display:block;

    width:300px;

    height:auto;

    margin:-140px auto -140px auto;

}