/* =========================================
   Large Desktop (1600px and above)
========================================= */

@media (min-width:1600px){

    h1{
        font-size:5rem;
        max-width:15ch;
    }

    .currently{
        max-width:520px;
    }

    .enter{
        font-size:21px;
        padding:18px 40px;
    }

}

@media (max-width:1440px){

    h1{
        font-size:4.2rem;
    }

}


/* =========================================
   Desktop / Large Laptop
========================================= */

@media (max-width:1400px){

    h1{
        font-size:clamp(3.5rem,6vw,4.5rem);
    }

}


/* =========================================
   Laptop
========================================= */

@media (max-width:1200px){

    main{
        padding:28px;
    }

    .eyebrow{
        font-size:15px;
    }

    h1{
        max-width:13ch;
    }

    .currently{
        max-width:420px;
    }

}


/* =========================================
   Tablet
========================================= */

@media (max-width:992px){

    main{
        padding:24px;
    }

    .eyebrow{
        font-size:14px;
        letter-spacing:.18em;
    }

    h1{
        font-size:3.2rem;
        line-height:1.08;
    }

    .enter{
        font-size:18px;
        padding:15px 30px;
    }

    .currently{
        font-size:12px;
        max-width:380px;
    }

}


/* =========================================
   Mobile
========================================= */

@media (max-width:768px){

    .vitals{
        height:36px;
    }

    main{
        padding:22px;
    }

    .eyebrow{
        font-size:13px;
        letter-spacing:.16em;
    }

    h1{

        font-size:2.6rem;

        line-height:1.1;

        max-width:10ch;

        margin-bottom:24px;

    }

    .enter{

        width:100%;

        max-width:320px;

        justify-content:center;

        padding:16px 24px;

        font-size:18px;

        margin-bottom:36px;

    }

    .currently{

        width:100%;

        max-width:340px;

        font-size:12px;

        line-height:1.8;

    }

    footer{

        font-size:10px;

        padding:18px;

    }

}


/* =========================================
   Small Mobile
========================================= */

@media (max-width:480px){

    main{
        padding:18px;
    }

    .eyebrow{

        font-size:12px;

        letter-spacing:.15em;

    }

    h1{

        font-size:2.2rem;

        line-height:1.08;

        margin-bottom:22px;

    }

    .enter{

        width:100%;

        max-width:290px;

        font-size:17px;

        padding:15px 20px;

    }

    .currently{

        max-width:290px;

        font-size:11px;

        line-height:1.75;

    }

}


/* =========================================
   Extra Small Mobile
========================================= */

@media (max-width:360px){

    main{
        padding:16px;
    }

    .eyebrow{
        font-size:11px;
    }

    h1{

        font-size:1.9rem;

        line-height:1.1;

    }

    .enter{

        max-width:260px;

        font-size:16px;

        padding:14px 18px;

    }

    .currently{

        max-width:260px;

        font-size:10px;

    }

}


/* =========================================
   Reduced Motion
========================================= */

@media (prefers-reduced-motion: reduce){

    .vitals path{

        animation:none;

        stroke-dashoffset:0;

    }

    .currently .dot{

        animation:none;

    }

}


@media (max-height:800px){

    main{
        padding:20px;
    }

    h1{
        margin-bottom:20px;
    }

    .enter{
        margin-bottom:28px;
    }

}