/* ============================================================
   JANEKLAUNCHER
   MINECRAFT STYLE
   ============================================================ */

:root {

    --grass:
        #4f8f2f;

    --grass-light:
        #78ba50;

    --grass-dark:
        #294f1b;


    --stone:
        #545454;

    --stone-2:
        #414141;

    --stone-light:
        #7c7c7c;

    --stone-dark:
        #222222;


    --dirt:
        #60452f;

    --dirt-light:
        #805d41;

    --dirt-dark:
        #382719;


    --text:
        #ffffff;

    --muted:
        #c5c5c5;

    --dark:
        #161616;

    --black:
        #090909;

    --yellow:
        #ffdd55;

    --shadow:
        0 7px 0
        rgba(
            0,
            0,
            0,
            .72
        );
}



/* ============================================================
   RESET
   ============================================================ */

* {

    margin: 0;

    padding: 0;

    box-sizing:
        border-box;

}


html {

    scroll-behavior:
        smooth;

}


body {

    min-height:
        100vh;

    color:
        var(--text);

    font-family:
        "Trebuchet MS",
        Arial,
        sans-serif;

    background:
        #191919;

    overflow-x:
        hidden;

}


a {

    color:
        inherit;

}



/* ============================================================
   BACKGROUND
   ============================================================ */

.background-layer {

    position:
        fixed;

    inset:
        -20px;

    z-index:
        -3;


    background:

        linear-gradient(
            rgba(
                0,
                0,
                0,
                .18
            ),
            rgba(
                0,
                0,
                0,
                .18
            )
        ),

        url("2.png")
        center top /
        cover
        no-repeat;


    filter:

        blur(9px)

        brightness(.38)

        saturate(.8);


    transform:
        scale(1.05);

}


.background-overlay {

    position:
        fixed;

    inset:
        0;

    z-index:
        -2;


    background:

        linear-gradient(
            180deg,
            rgba(
                15,
                15,
                15,
                .15
            ),
            rgba(
                15,
                15,
                15,
                .75
            )
        );

}



/* ============================================================
   MINECRAFT CARD
   ============================================================ */

.glass-card {

    background:

        linear-gradient(
            180deg,
            #565656,
            #444444
        );


    border-top:

        4px solid
        #777777;


    border-left:

        4px solid
        #777777;


    border-right:

        4px solid
        #222222;


    border-bottom:

        4px solid
        #222222;


    box-shadow:

        var(--shadow);

}



/* ============================================================
   NAVBAR
   ============================================================ */

.navbar {

    position:
        fixed;

    top:
        16px;

    left:
        50%;

    z-index:
        1000;


    width:

        min(
            1180px,
            calc(
                100% - 32px
            )
        );


    min-height:
        72px;


    transform:
        translateX(-50%);


    display:
        flex;


    align-items:
        center;


    justify-content:
        space-between;


    gap:
        24px;


    padding:
        12px 18px;


    background:

        linear-gradient(
            180deg,
            #4d4d4d,
            #373737
        );


    border-top:

        4px solid
        #777;


    border-left:

        4px solid
        #777;


    border-right:

        4px solid
        #191919;


    border-bottom:

        4px solid
        #191919;


    box-shadow:

        0 7px 0
        rgba(
            0,
            0,
            0,
            .75
        );

}



/* ============================================================
   BRAND
   ============================================================ */

.brand {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;


    color:
        white;


    font-size:
        22px;


    font-weight:
        900;


    text-decoration:
        none;


    text-shadow:

        2px 2px 0
        #000;

}


.brand-mark {

    width:
        46px;

    height:
        46px;


    display:
        grid;


    place-items:
        center;


    color:
        white;


    background:

        linear-gradient(
            180deg,
            var(--grass-light),
            var(--grass)
        );


    border-top:

        3px solid
        #95d06d;


    border-left:

        3px solid
        #95d06d;


    border-right:

        3px solid
        var(--grass-dark);


    border-bottom:

        3px solid
        var(--grass-dark);


    text-shadow:

        2px 2px 0
        #17340d;

}



/* ============================================================
   NAVIGATION
   ============================================================ */

.nav-links {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        6px;

    flex-wrap:
        wrap;

}


.nav-links a {

    padding:
        10px 14px;


    color:
        white;


    font-size:
        14px;


    font-weight:
        750;


    text-decoration:
        none;


    background:

        linear-gradient(
            #606060,
            #4a4a4a
        );


    border-top:

        3px solid
        #818181;


    border-left:

        3px solid
        #818181;


    border-right:

        3px solid
        #252525;


    border-bottom:

        3px solid
        #252525;


    text-shadow:

        2px 2px
        #111;


    transition:
        .08s;

}


.nav-links a:hover {

    background:

        linear-gradient(
            #747474,
            #595959
        );

}


.nav-links a:active {

    border-top-color:
        #252525;

    border-left-color:
        #252525;

    border-right-color:
        #818181;

    border-bottom-color:
        #818181;

}


.nav-links a.active {

    background:

        linear-gradient(
            var(--grass-light),
            var(--grass)
        );


    border-top-color:
        #9dd37b;

    border-left-color:
        #9dd37b;

    border-right-color:
        var(--grass-dark);

    border-bottom-color:
        var(--grass-dark);

}



/* ============================================================
   MOBILE MENU
   ============================================================ */

.mobile-menu-button {

    display:
        none;


    color:
        white;


    background:
        #535353;


    border-top:
        3px solid
        #808080;


    border-left:
        3px solid
        #808080;


    border-right:
        3px solid
        #222;


    border-bottom:
        3px solid
        #222;


    padding:
        9px 12px;


    font-size:
        20px;


    cursor:
        pointer;

}



/* ============================================================
   PAGE
   ============================================================ */

.page-shell {

    width:

        min(
            1180px,
            calc(
                100% - 32px
            )
        );


    margin:
        0 auto;


    padding:
        122px 0 54px;

}



/* ============================================================
   BREADCRUMBS
   ============================================================ */

.breadcrumbs {

    display:
        flex;


    align-items:
        center;


    gap:
        10px;


    margin:
        0 6px 18px;


    color:
        #cfcfcf;


    font-size:
        14px;


    text-shadow:

        2px 2px
        #000;

}


.breadcrumbs a {

    text-decoration:
        none;

}


.breadcrumbs a:hover {

    color:
        var(--grass-light);

}



/* ============================================================
   HERO
   ============================================================ */

.app-hero {

    display:
        grid;


    grid-template-columns:

        230px
        minmax(
            0,
            1fr
        )
        250px;


    gap:
        34px;


    align-items:
        center;


    padding:
        34px;

}



/* ============================================================
   LOGO PANEL
   ============================================================ */

.app-logo-panel {

    width:
        100%;


    aspect-ratio:
        1;


    display:
        grid;


    place-items:
        center;


    padding:
        22px;


    background:

        linear-gradient(
            #3b3b3b,
            #292929
        );


    border-top:

        4px solid
        #666;


    border-left:

        4px solid
        #666;


    border-right:

        4px solid
        #151515;


    border-bottom:

        4px solid
        #151515;

}


.app-logo-panel img {

    width:
        100%;

    height:
        100%;


    object-fit:
        contain;


    image-rendering:
        pixelated;


    filter:

        drop-shadow(
            4px
            4px
            0
            #111
        );

}



/* ============================================================
   EYEBROW
   ============================================================ */

.eyebrow {

    color:
        #8bd45d;


    font-size:
        12px;


    font-weight:
        900;


    letter-spacing:
        1.8px;


    text-shadow:

        2px
        2px
        0
        #162b0f;

}



/* ============================================================
   APP TITLE
   ============================================================ */

.app-heading h1 {

    margin-top:
        8px;


    color:
        white;


    font-size:

        clamp(
            38px,
            5vw,
            65px
        );


    line-height:
        1;


    letter-spacing:
        -2.8px;


    text-shadow:

        4px
        4px
        0
        #111;

}



/* ============================================================
   SUMMARY
   ============================================================ */

.app-summary {

    max-width:
        650px;


    margin-top:
        18px;


    color:
        #dedede;


    font-size:
        18px;


    line-height:
        1.65;

}



/* ============================================================
   TAGS
   ============================================================ */

.app-tags {

    display:
        flex;


    flex-wrap:
        wrap;


    gap:
        8px;


    margin-top:
        20px;

}


.app-tags span {

    padding:
        7px 10px;


    color:
        #eeeeee;


    background:
        #353535;


    border-top:

        2px solid
        #606060;


    border-left:

        2px solid
        #606060;


    border-right:

        2px solid
        #1a1a1a;


    border-bottom:

        2px solid
        #1a1a1a;


    font-size:
        12px;


    font-weight:
        750;

}


.app-tags .status-tag {

    color:
        white;


    background:
        var(--grass);


    border-top-color:
        #84c85e;


    border-left-color:
        #84c85e;


    border-right-color:
        var(--grass-dark);


    border-bottom-color:
        var(--grass-dark);

}



/* ============================================================
   HERO BUTTONS
   ============================================================ */

.hero-actions {

    display:
        flex;


    flex-wrap:
        wrap;


    gap:
        12px;


    margin-top:
        25px;

}


.primary-button,
.secondary-button {

    min-height:
        47px;


    display:
        inline-flex;


    align-items:
        center;


    justify-content:
        center;


    padding:
        0 20px;


    color:
        white;


    font-weight:
        900;


    text-decoration:
        none;


    text-shadow:

        2px
        2px
        #111;


    box-shadow:

        0
        4px
        0
        #111;

}


.primary-button {

    background:

        linear-gradient(
            var(--grass-light),
            var(--grass)
        );


    border-top:

        4px solid
        #96d471;


    border-left:

        4px solid
        #96d471;


    border-right:

        4px solid
        var(--grass-dark);


    border-bottom:

        4px solid
        var(--grass-dark);

}


.secondary-button {

    background:

        linear-gradient(
            #6b6b6b,
            #505050
        );


    border-top:

        4px solid
        #8d8d8d;


    border-left:

        4px solid
        #8d8d8d;


    border-right:

        4px solid
        #282828;


    border-bottom:

        4px solid
        #282828;

}


.primary-button:hover {

    background:

        linear-gradient(
            #8ac961,
            #5b9d39
        );

}


.secondary-button:hover {

    background:

        linear-gradient(
            #7d7d7d,
            #606060
        );

}


.primary-button:active,
.secondary-button:active {

    transform:
        translateY(3px);


    box-shadow:

        0
        1px
        0
        #111;

}



/* ============================================================
   QUICK INFO
   ============================================================ */

.quick-info {

    display:
        grid;


    gap:
        2px;


    overflow:
        hidden;


    background:
        #202020;


    border:

        3px solid
        #151515;

}


.quick-info div {

    padding:
        16px;


    background:

        linear-gradient(
            #444,
            #393939
        );


    border-bottom:

        2px solid
        #232323;

}


.quick-info span,
.quick-info strong {

    display:
        block;

}


.quick-info span {

    color:
        #bcbcbc;


    font-size:
        11px;


    font-weight:
        750;


    letter-spacing:
        .7px;


    text-transform:
        uppercase;

}


.quick-info strong {

    margin-top:
        5px;


    color:
        white;


    font-size:
        14px;

}



/* ============================================================
   CONTENT
   ============================================================ */

.content-layout {

    display:
        grid;


    grid-template-columns:

        minmax(
            0,
            1fr
        )

        330px;


    gap:
        22px;


    margin-top:
        22px;


    align-items:
        start;

}


.main-column,
.side-column {

    min-width:
        0;


    display:
        grid;


    gap:
        22px;

}



/* ============================================================
   SECTION CARDS
   ============================================================ */

.section-card,
.side-card,
.download-card {

    min-width:
        0;


    padding:
        30px;

}


.section-card {

    overflow:
        hidden;

}



/* ============================================================
   SECTION HEADING
   ============================================================ */

.section-heading {

    display:
        flex;


    align-items:
        center;


    gap:
        15px;


    margin-bottom:
        22px;

}


.section-number {

    width:
        46px;


    height:
        46px;


    display:
        grid;


    place-items:
        center;


    flex:
        0 0 auto;


    color:
        white;


    background:

        linear-gradient(
            var(--grass-light),
            var(--grass)
        );


    border-top:

        3px solid
        #96d471;


    border-left:

        3px solid
        #96d471;


    border-right:

        3px solid
        var(--grass-dark);


    border-bottom:

        3px solid
        var(--grass-dark);


    font-size:
        13px;


    font-weight:
        900;


    text-shadow:

        2px
        2px
        #15320d;

}



/* ============================================================
   HEADINGS
   ============================================================ */

.section-heading h2,
.side-card h2,
.download-card h2 {

    margin-top:
        4px;


    color:
        white;


    font-size:
        27px;


    text-shadow:

        2px
        2px
        0
        #181818;

}


.side-card h2 {

    font-size:
        22px;

}



/* ============================================================
   PARAGRAPHS
   ============================================================ */

.section-card > p {

    margin-top:
        12px;


    color:
        #d5d5d5;


    font-size:
        16px;


    line-height:
        1.75;

}



/* ============================================================
   SCREENSHOTS
   ============================================================ */

.screenshot-grid {

    width:
        100%;


    display:
        grid;


    grid-template-columns:

        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );


    gap:
        16px;

}


.screenshot-item {

    min-width:
        0;


    overflow:
        hidden;


    display:
        flex;


    flex-direction:
        column;


    color:
        white;


    text-decoration:
        none;


    background:
        #252525;


    border-top:

        4px solid
        #606060;


    border-left:

        4px solid
        #606060;


    border-right:

        4px solid
        #111;


    border-bottom:

        4px solid
        #111;


    box-shadow:

        0
        5px
        0
        rgba(
            0,
            0,
            0,
            .55
        );


    transition:
        transform .1s;

}


.screenshot-item:hover {

    transform:
        translateY(-3px);

}


.screenshot-item img {

    display:
        block;


    width:
        100%;


    height:
        260px;


    object-fit:
        contain;


    object-position:
        center;


    background:
        #111;


    border-bottom:

        3px solid
        #080808;

}


.screenshot-item span {

    padding:
        12px 15px;


    color:
        #eeeeee;


    font-size:
        14px;


    font-weight:
        750;


    text-shadow:

        2px
        2px
        #111;

}



/* ============================================================
   TIMELINE
   ============================================================ */

.timeline {

    display:
        grid;


    gap:
        22px;

}


.timeline article {

    position:
        relative;


    display:
        grid;


    grid-template-columns:

        18px
        1fr;


    gap:
        14px;

}


.timeline article:not(:last-child)::after {

    content:
        "";


    position:
        absolute;


    left:
        6px;


    top:
        18px;


    bottom:
        -25px;


    width:
        3px;


    background:
        #252525;


    border-left:

        1px solid
        #777;

}


.timeline-dot {

    width:
        14px;


    height:
        14px;


    margin-top:
        5px;


    background:
        var(--grass-light);


    border:

        3px solid
        var(--grass-dark);


    box-shadow:

        0
        0
        0
        3px
        #303030;

}


.timeline-title {

    display:
        flex;


    justify-content:
        space-between;


    gap:
        20px;

}


.timeline-title h3 {

    color:
        white;


    text-shadow:

        2px
        2px
        #111;

}


.timeline-title time {

    color:
        #9edb74;


    font-size:
        12px;


    font-weight:
        800;

}


.timeline ul {

    margin:
        10px
        0
        0
        19px;


    color:
        #d0d0d0;


    line-height:
        1.7;

}



/* ============================================================
   CODE BOX
   ============================================================ */

.code-box {

    margin-top:
        22px;


    overflow-x:
        auto;


    background:
        #111;


    border-top:

        4px solid
        #252525;


    border-left:

        4px solid
        #252525;


    border-right:

        4px solid
        #080808;


    border-bottom:

        4px solid
        #080808;

}


.code-box pre {

    padding:
        22px;


    color:
        #b9ec9d;


    font-family:
        Consolas,
        monospace;


    line-height:
        1.6;

}



/* ============================================================
   DOWNLOAD CARD
   ============================================================ */

.download-card {

    position:
        sticky;


    top:
        108px;

}


.download-icon {

    width:
        54px;


    height:
        54px;


    display:
        grid;


    place-items:
        center;


    margin-bottom:
        20px;


    color:
        white;


    background:

        linear-gradient(
            var(--grass-light),
            var(--grass)
        );


    border-top:

        4px solid
        #96d471;


    border-left:

        4px solid
        #96d471;


    border-right:

        4px solid
        var(--grass-dark);


    border-bottom:

        4px solid
        var(--grass-dark);


    font-size:
        28px;


    font-weight:
        900;


    text-shadow:

        2px
        2px
        #17340e;

}


.download-card > p:not(.eyebrow) {

    margin-top:
        10px;


    color:
        #d0d0d0;

}



/* ============================================================
   DOWNLOAD BUTTON
   ============================================================ */

.download-button {

    display:
        flex;


    align-items:
        center;


    justify-content:
        space-between;


    gap:
        12px;


    margin-top:
        22px;


    padding:
        15px 16px;


    color:
        white;


    background:

        linear-gradient(
            var(--grass-light),
            var(--grass)
        );


    border-top:

        4px solid
        #96d471;


    border-left:

        4px solid
        #96d471;


    border-right:

        4px solid
        var(--grass-dark);


    border-bottom:

        4px solid
        var(--grass-dark);


    box-shadow:

        0
        5px
        0
        #111;


    text-decoration:
        none;


    text-shadow:

        2px
        2px
        #17340e;

}


.download-button:hover {

    background:

        linear-gradient(
            #8ccc62,
            #5fa03c
        );

}


.download-button:active {

    transform:
        translateY(3px);


    box-shadow:

        0
        2px
        0
        #111;

}


.download-button small,
.download-button strong {

    display:
        block;

}


.download-button small {

    opacity:
        .8;


    font-size:
        11px;


    text-transform:
        uppercase;

}


.download-button strong {

    margin-top:
        2px;

}


.download-button b {

    font-size:
        24px;

}



/* ============================================================
   DOWNLOAD DETAILS
   ============================================================ */

.download-details {

    display:
        grid;


    gap:
        12px;


    margin-top:
        22px;

}


.download-details div {

    display:
        flex;


    justify-content:
        space-between;


    gap:
        12px;


    padding-bottom:
        11px;


    border-bottom:

        2px solid
        #303030;


    font-size:
        13px;

}


.download-details span {

    color:
        #bbbbbb;

}


.download-details strong {

    text-align:
        right;


    color:
        white;

}



/* ============================================================
   REQUIREMENTS
   ============================================================ */

.requirements {

    display:
        grid;


    gap:
        0;


    margin-top:
        16px;


    list-style:
        none;

}


.requirements li {

    display:
        flex;


    justify-content:
        space-between;


    gap:
        16px;


    padding:
        13px 0;


    border-bottom:

        2px solid
        #303030;


    font-size:
        13px;

}


.requirements li:last-child {

    border-bottom:
        0;

}


.requirements span {

    color:
        #bbbbbb;

}


.requirements strong {

    text-align:
        right;


    color:
        white;

}



/* ============================================================
   LOADER LIST
   ============================================================ */

.loader-list {

    display:
        grid;


    grid-template-columns:

        repeat(
            2,
            1fr
        );


    gap:
        8px;


    margin-top:
        17px;

}


.loader-list span {

    padding:
        9px;


    text-align:
        center;


    color:
        white;


    background:
        #343434;


    border-top:

        2px solid
        #5f5f5f;


    border-left:

        2px solid
        #5f5f5f;


    border-right:

        2px solid
        #191919;


    border-bottom:

        2px solid
        #191919;


    font-size:
        13px;


    font-weight:
        800;


    text-shadow:

        2px
        2px
        #111;

}



/* ============================================================
   SIDE TEXT
   ============================================================ */

.side-text {

    margin-top:
        14px;


    color:
        #d0d0d0;


    line-height:
        1.6;


    font-size:
        14px;

}



/* ============================================================
   FOOTER
   ============================================================ */

footer {

    width:

        min(
            1180px,
            calc(
                100% - 32px
            )
        );


    margin:
        0 auto 30px;


    display:
        flex;


    justify-content:
        space-between;


    padding:
        15px 18px;


    color:
        #d0d0d0;


    background:
        rgba(
            20,
            20,
            20,
            .82
        );


    border-top:

        3px solid
        #555;


    border-left:

        3px solid
        #555;


    border-right:

        3px solid
        #111;


    border-bottom:

        3px solid
        #111;


    font-size:
        14px;


    text-shadow:

        2px
        2px
        #000;

}



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

@media (
    max-width:
    1050px
) {


    .app-hero {

        grid-template-columns:

            190px
            minmax(
                0,
                1fr
            );

    }


    .quick-info {

        grid-column:
            1 / -1;


        grid-template-columns:

            repeat(
                4,
                1fr
            );

    }


    .content-layout {

        grid-template-columns:

            minmax(
                0,
                1fr
            )

            290px;

    }


}



/* ============================================================
   SMALL TABLET
   ============================================================ */

@media (
    max-width:
    820px
) {


    .navbar {

        align-items:
            center;

    }


    .mobile-menu-button {

        display:
            block;

    }


    .nav-links {

        position:
            absolute;


        top:
            calc(
                100% + 10px
            );


        left:
            0;


        right:
            0;


        display:
            none;


        padding:
            14px;


        background:
            #3e3e3e;


        border-top:

            4px solid
            #777;


        border-left:

            4px solid
            #777;


        border-right:

            4px solid
            #191919;


        border-bottom:

            4px solid
            #191919;


        box-shadow:

            0
            7px
            0
            rgba(
                0,
                0,
                0,
                .7
            );

    }


    .nav-links.show {

        display:
            flex;

    }


    .content-layout {

        grid-template-columns:
            1fr;

    }


    .download-card {

        position:
            static;

    }


    .side-column {

        grid-template-columns:

            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .download-card {

        grid-column:
            1 / -1;

    }


}



/* ============================================================
   MOBILE
   ============================================================ */

@media (
    max-width:
    680px
) {


    .page-shell {

        padding-top:
            110px;

    }


    .breadcrumbs {

        overflow-x:
            auto;


        white-space:
            nowrap;

    }


    .app-hero {

        grid-template-columns:
            1fr;


        padding:
            24px;

    }


    .app-logo-panel {

        width:

            min(
                220px,
                100%
            );


        margin:
            0 auto;

    }


    .app-heading {

        text-align:
            center;

    }


    .app-tags,
    .hero-actions {

        justify-content:
            center;

    }


    .quick-info {

        grid-template-columns:

            repeat(
                2,
                1fr
            );

    }


    .screenshot-grid,
    .side-column {

        grid-template-columns:
            1fr;

    }


    .download-card {

        grid-column:
            auto;

    }


    .screenshot-item img {

        height:
            auto;


        max-height:
            360px;

    }


    .section-card,
    .side-card,
    .download-card {

        padding:
            23px;

    }


    .timeline-title {

        flex-direction:
            column;


        gap:
            4px;

    }


    footer {

        flex-direction:
            column;


        gap:
            5px;


        text-align:
            center;

    }


}