:root {
    color-scheme: dark;
}

/* ==========================================================
   Reset
========================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    min-height: 100%;
    background: #111615;
}

/* ==========================================================
   Body
========================================================== */

body {

    min-height: 100svh;

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;

    padding:
        max(18px, env(safe-area-inset-top))
        max(18px, env(safe-area-inset-right))
        max(18px, env(safe-area-inset-bottom))
        max(18px, env(safe-area-inset-left));
}

/* ==========================================================
   Hero
========================================================== */

.hero {

    position: relative;

    width: min(92vw, 1450px);

    border-radius: 30px;

    isolation: isolate;
}

.hero picture {

    display: block;
}

/* ==========================================================
   Glow
========================================================== */

.hero::before {

    content: "";

    position: absolute;

    inset: -80px;

    background:
        url("../img/under_construction.png")
        center center /
        contain
        no-repeat;

    filter: blur(100px);

    opacity: .50;

    transform: scale(1.15);

    z-index: -1;

    pointer-events: none;
}

/* ==========================================================
   Image
========================================================== */

.hero picture img {

    display: block;

    width: 100%;

    height: auto;

    border-radius: 30px;

    box-shadow:

        0 0 80px rgba(120,255,90,.18),

        0 0 160px rgba(170,90,255,.15);
}

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

@media (max-width:900px) {

    body {

        padding:

            max(16px, env(safe-area-inset-top))
            max(16px, env(safe-area-inset-right))
            max(16px, env(safe-area-inset-bottom))
            max(16px, env(safe-area-inset-left));
    }

    .hero {

        width:min(94vw,860px);

        border-radius:24px;
    }

    .hero::before {

        inset:-56px;

        filter:blur(76px);

        opacity:.46;

        transform:scale(1.12);
    }

    .hero picture img {

        border-radius:24px;

        box-shadow:

            0 0 58px rgba(120,255,90,.17),

            0 0 110px rgba(170,90,255,.14);
    }

}

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

@media (max-width:768px){

    body{

        padding:

            max(12px, env(safe-area-inset-top))
            max(12px, env(safe-area-inset-right))
            max(12px, env(safe-area-inset-bottom))
            max(12px, env(safe-area-inset-left));
    }

    .hero{

        width:min(96vw,480px);

        border-radius:20px;
    }

    .hero::before{

        background:
            url("../img/under_construction_mobile.png")
            center center /
            contain
            no-repeat;

        inset:-34px;

        filter:blur(58px);

        opacity:.42;

        transform:scale(1.08);
    }

    .hero picture img{

        width:100%;

        height:auto;

        border-radius:20px;

        box-shadow:

            0 0 40px rgba(120,255,90,.16),

            0 0 80px rgba(170,90,255,.13);
    }

}

/* ==========================================================
   Small Phones
========================================================== */

@media (max-width:380px){

    .hero{

        border-radius:16px;
    }

    .hero::before{

        inset:-24px;

        filter:blur(44px);

        opacity:.38;
    }

    .hero picture img{

        border-radius:16px;
    }

}

/* ==========================================================
   Landscape Phones
========================================================== */

@media (max-height:520px) and (orientation:landscape){

    body{

        padding:

            max(10px, env(safe-area-inset-top))
            16px
            max(10px, env(safe-area-inset-bottom))
            16px;
    }

    .hero{

        width:auto;

        max-width:92vw;

        max-height:90svh;
    }

    .hero::before{

        background:
            url("../img/under_construction.png")
            center center /
            contain
            no-repeat;
    }

    .hero picture img{

        width:auto;

        max-width:92vw;

        max-height:90svh;
    }

}

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

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

    .hero::before{

        transform:none;
    }

}