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

        html {
            height: 100%; body {

            /* =========================
               SAFE AREA / IOS FIXES
            ========================== */

            min-height: 100vh;
            min-height: 100dvh;

            padding-top:
                env(safe-area-inset-top);

            padding-right:
                env(safe-area-inset-right);

            padding-bottom:
                env(safe-area-inset-bottom);

            padding-left:
                env(safe-area-inset-left);

            overflow-x: hidden;
            -webkit-text-size-adjust: 100%;
        }

       

            /* =========================
               BASE APP STYLE
            ========================== */

            background-color: #000;
            color: #fff;

            font-family:
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                sans-serif;

            /* =========================
               FLEX LAYOUT
            ========================== */

            display: flex;
            flex-direction: column;

        }

  

        header {
            border: 1px solid red;
            padding: 1rem;
            border-bottom:
                1px solid rgba(255,255,255,0.1);
                text-align: right;
        }

        main {
            border: 1px solid orange;
           
            color: white;
            background-color: black;

            display: flex;
            flex-flow: column nowrap;
            align-items: center;
            justify-content: space-around;

            min-height: 100vh;
         }
        

        /* =========================
           MEDIA
        ========================== */

        img {
            max-width: 100%;
            display: block;
        }

        /* =========================
           FORM ELEMENTS
        ========================== */

        button,
        input,
        textarea,
        select {
            font: inherit;
        }

        /* =========================
           LINKS
        ========================== */

        a {
            color: inherit;
            text-decoration: none;
        }

        /* =========================
           OPTIONAL CENTER TEST
        ========================== */

        .center-test {

            display: flex;
            flex-direction: column;

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

            gap: 1rem;

            min-height: 300px;

            border:
                1px dashed rgba(255,255,255,0.2);

        }