@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:50px;

    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:5px;
}

.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;
    height:auto;
    margin:0 auto;
}

/* =========================
   DESKTOP 2K / 4K
========================= */

@media (min-width:1600px){

    .meditation-title{
        font-size:72px;
        margin-bottom:12px;
    }

    .breath-wave{
        width:340px;
        margin:0 auto 10px auto;
    }

    .meditation-times{
        margin-top:8px;
    }

    .timer-circle{
        width:650px;
    }

    .time-main{
        font-size:130px;
    }

    .time-seconds{
        font-size:70px;
    }

    .move-btn{
        font-size:28px;
        padding:16px 45px;
    }

    .meditation-mantra{
        font-size:22px;
    }

}

/* =========================
   DESKTOP
========================= */

@media (min-width:1401px) and (max-width:1599px){

    .meditation-title{
        font-size:64px;
        margin-bottom:12px;
    }

    .breath-wave{
        width:300px;
        margin:0 auto 10px auto;
    }

    .meditation-times{
        margin-top:8px;
    }

    .timer-circle{
        width:580px;
    }

}

/* =========================
   PORTATIL
========================= */

@media (min-width:1025px) and (max-width:1400px){

    .meditation-title{
        font-size:56px;
        margin-bottom:12px;
    }

    .breath-wave{
        width:270px;
        margin:0 auto 8px auto;
    }

    .meditation-times{
        margin-top:8px;
    }

    .timer-circle{
        width:500px;
    }

}

/* =========================
   IPAD PRO
========================= */

@media (min-width:1000px) and (max-width:1024px){

    .meditation-title{
        font-size:58px;
        margin-bottom:12px;
    }

    .breath-wave{
        width:260px;
        margin:0 auto 8px auto;
    }

    .meditation-times{
        margin-top:8px;
        margin-bottom:10px;
    }

    .timer-circle{
        width:520px;
    }

    .time-main{
        font-size:100px;
    }

    .time-seconds{
        font-size:54px;
    }

}

/* =========================
   IPAD AIR
========================= */

@media (min-width:901px) and (max-width:999px){

    .meditation-title{
        font-size:56px;
        margin-bottom:12px;
    }

    .breath-wave{
        width:250px;
        margin:0 auto 8px auto;
    }

    .meditation-times{
        margin-top:8px;
        margin-bottom:10px;
    }

    .timer-circle{
        width:500px;
    }

    .time-main{
        font-size:95px;
    }

    .time-seconds{
        font-size:52px;
    }

}

/* =========================
   IPAD MINI
========================= */

@media (min-width:769px) and (max-width:900px){

    .timer-panel{
        padding-top:15px;
    }

    .meditation-title{
        font-size:54px;
        margin-bottom:12px;
    }

    .breath-wave{
        width:230px;
        margin:0 auto 8px auto;
    }

    .meditation-times{
        margin-top:8px;
        margin-bottom:10px;
        gap:8px;
    }

    .meditation-btn{
        font-size:14px;
        padding:10px 16px;
        white-space:nowrap;
    }

    .timer-circle{
        width:470px;
    }

    .time-main{
        font-size:90px;
    }

    .time-seconds{
        font-size:48px;
    }

}

/* =========================
   TABLET ANDROID
========================= */

@media (min-width:601px) and (max-width:768px){

    .timer-panel{
        padding-top:15px;
    }

    .meditation-title{
        font-size:42px;
        margin-bottom:10px;
    }

    .breath-wave{
        width:180px;
        margin:0 auto 6px auto;
    }

    .meditation-times{
        flex-wrap:nowrap;
        justify-content:center;
        gap:6px;
        margin-top:6px;
        margin-bottom:10px;
    }

    .meditation-btn{
        padding:8px 10px;
        font-size:13px;
        white-space:nowrap;
    }

    .timer-circle{
        width:380px;
    }

    .time-main{
        font-size:70px;
    }

    .time-seconds{
        font-size:38px;
    }

}

/* =========================
   IPHONE PRO MAX / XR
========================= */

@media (min-width:431px) and (max-width:600px){

    .meditation-title{
        font-size:38px;
        margin-bottom:10px;
    }

    .breath-wave{
        width:155px;
        margin:0 auto 6px auto;
    }

    .meditation-times{
        flex-wrap:nowrap;
        justify-content:center;
        gap:6px;
        margin-top:6px;
        margin-bottom:10px;
    }

    .meditation-btn{
        padding:8px 10px;
        font-size:13px;
        white-space:nowrap;
    }

    .timer-circle{
        width:min(90vw,360px);
    }

    .time-main{
        font-size:64px;
    }

    .time-seconds{
        font-size:34px;
    }

}

/* =========================
   IPHONE NORMAL
========================= */

@media (min-width:376px) and (max-width:430px){

    .meditation-title{
        font-size:34px;
        margin-bottom:10px;
    }

    .breath-wave{
        width:145px;
        margin:0 auto 5px auto;
    }

    .meditation-times{
        flex-wrap:nowrap;
        justify-content:center;
        gap:5px;
        margin-top:5px;
        margin-bottom:10px;
    }

    .timer-circle{
        width:min(90vw,330px);
    }

    .time-main{
        font-size:60px;
    }

    .time-seconds{
        font-size:32px;
    }

}

/* =========================
   IPHONE PEQUEÑO
========================= */

@media (min-width:361px) and (max-width:375px){

    .meditation-title{
        font-size:32px;
        margin-bottom:10px;
    }

    .breath-wave{
        width:135px;
        margin:0 auto 5px auto;
    }

    .meditation-times{
        flex-wrap:nowrap;
        gap:4px;
        margin-top:5px;
    }

    .timer-circle{
        width:300px;
    }

    .time-main{
        font-size:56px;
    }

    .time-seconds{
        font-size:30px;
    }

}

/* =========================
   IPHONE SE
========================= */

@media (max-width:360px){

    .meditation-title{
        font-size:28px;
        margin-bottom:8px;
    }

    .breath-wave{
        width:120px;
        margin:0 auto 4px auto;
    }

    .meditation-times{
        flex-wrap:nowrap;
        gap:4px;
        margin-top:4px;
    }

    .timer-circle{
        width:260px;
    }

    .time-main{
        font-size:50px;
    }

    .time-seconds{
        font-size:26px;
    }

    .move-btn{
        font-size:18px;
        padding:10px 25px;
    }

}

/* *========================
   IPHONE*XR / 15 / 16 / 17
================*======== */

@media (min-width:376*x) and (max-width:600px){

    .me*itation-title{
        font-size:3*px;
        margin-bottom:8px;
   *}

    .breath-wave{
        width*150px;
        margin:0 auto;
    *

    .meditation-times{
        f*ex-wrap:nowrap;
        justify-co*tent:center;
        gap:6px;
    *   margin-top:6px;
        margin-*ottom:10px;
    }

    .meditation*btn{
        padding:8px 10px;
   *    font-size:13px;
        white-*pace:nowrap;
    }

    .timer-cir*le{
        width:min(90vw,360px);*    }

    .time-main{
        fon*-size:64px;
    }

    .time-secon*s{
        font-size:34px;
    }

*