/* I will use burger for more cases, so it stay in style_s, but it will be for landscape and small tablets */
@media (max-width: 800px) {
    .nav_in {
        justify-content: space-between;
        padding: 0 max(2%, 20px);
    }

    .nav_links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;

        transform: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 15px 20px;

        background-color: rgba(247, 247, 247, 0.8);
        backdrop-filter: blur(8px);
    }

    .burger {
        display: flex;
    }

    .nav_switch:checked + .burger span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .nav_switch:checked + .burger span:nth-child(2) {
        opacity: 0;
    }

    .nav_switch:checked + .burger span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    .nav_switch:checked ~ .nav_links {
        display: flex;
    }

    .nav_links a {
        width: 100%;
        padding: 10px 10vw;
    }
}










/* -------------------------------------------------------- MOBILE ------------------------------------------------------------- */
@media (max-width: 600px) {
    /* Countdown */
    .time {
        width: clamp(240px, 70%, 320px);
        margin: max(calc(var(--vh, 1vh) * 16), 106px) auto 0;

        display: grid;
        grid-template-rows: 56px 20px;
        grid-template-columns: 25% 25% 25% 25%;
        place-items: center;
    }

    #days {
        order: -4;
    }
    #hours {
        order: -3;
    }
    #minutes {
        order: -2;
    }
    #seconds {
        order: -1;
    }

    .time span:nth-child(odd) {
        font-size: 36px;
        font-weight: var(--weight_l);
    }
    .time span:nth-child(even) {
        font-size: var(--font_m);
        font-weight: var(--weight_m);

        margin-right: 0;
    }

    .left {
        margin-top: max(calc(var(--vh, 1vh) * 5), 38px);
        height: max(calc(var(--vh, 1vh) * 15), 76px);
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }

    .left h2 {
        font-size: var(--font_l);
    }

    .left span {
        font-weight: var(--weight_l);
        letter-spacing: 4px;
        word-spacing: .3em;
    }

    .left h2 {
        /* font-size: 36px; */
        font-size: var(--font_xl);
        letter-spacing: 3px;
        line-height: 100%;
    }

    noscript h1 {
        margin-top: -36px;
        font-size: 48px;
    }

    noscript .left h2 {
        font-size: 28px;
    }









    /* Banner why have to update */
    .banner {
        margin-top: max(calc(var(--vh, 1vh) * 15), 100px);
        height: max(calc(var(--vh, 1vh) * 32 - 82px), 152px);
    }

    .banner p {
        padding: 2% 8% 0;
        
        font-size: var(--font_m);
        line-height: 130%;
    }










    /* To get more information */
    .more {
        height: max(calc(var(--vh, 1vh) * 17), 109px);
    }










    /* Main body with information */
    #information, #information h3, #information p, .paragraph {
        margin: 0;
        padding: 0;
    }

    #information {
        background-color: transparent;

        border-radius: 0;

        width: 96%;
        margin-left: 2%;
    }

    .paragraph {
        background-color: var(--white);

        border-radius: 20px;

        margin-bottom: 25px;
        padding: 13% 8%;
    }

    #information h3 {
        text-align: center;

        margin-bottom: 36px;
    }

    #information p {
        margin-bottom: 5%;
    }
}









/* -------------------------------------------------------- LANDSCAPE ------------------------------------------------------------- */
@media (max-height: 600px) and (orientation: landscape) {
    /* Countdown */
    .time {
        margin-top: max(calc(var(--vh, 1vh) * 21), 110px);
        height: max(calc(var(--vh, 1vh) * 14), 60px);
    }

    .time span:nth-child(odd) {
        font-size: var(--font_xl);
    }
    .time span:nth-child(even) {
        font-size: var(--font_m);
    }





    .left {
        height: max(calc(var(--vh, 1vh) * 6), 36px);
    }

    .left h2 {
        font-size: var(--font_xl);
    }





    /* Banner why have to update */
    .banner p {
        padding: 5% 10% 0;
    }





    /* Main body with information */
    #information {
        width: 90%;
    }
}