.mpdesignframe {
    background: #333;
    color: #dedede;
    background: linear-gradient(346deg, rgba(51,51,51,1) 0%, rgba(85,85,85,1) 49%, rgba(68,68,68,1) 100%); 
    background: url('../gfx/AdobeStock_343331800.jpeg') no-repeat center top;
    background-attachment: fixed;
    background-size: cover;
    font-size: 1rem;
    font-family: arial;

    
    & #wrapper {
        position: relative;
        inset: 0;

        background: linear-gradient(346deg,
            #222a 0%,
            #111d 49%,
            #000d 100%
        );
        zbackdrop-filter: hue-rotate(190deg);
        backdrop-filter: contrast(200%);
        backdrop-filter: saturate(4);
        background-blend-mode:color-burn;

        height: 100%;
        width: 100%;
        max-width: 100%;
        padding: 0;
        
        display: flex;
        flex-flow: column nowrap;
        gap: .5rem;

        overflow-y: scroll;
        
        & * {
            zborder: 1px dashed red;
            box-sizing: border-box;
        }

        & header {
            display: flex;
            align-items: center;
            flex-flow: row nowrap;
            justify-content: space-between;
            padding: 0 .5rem;

            & logo {
                font-size: xx-large;

                & .fire {color: red; transform: rotate(3deg); display: inline-block;}
                & .bomb {color: goldenrod; transform: rotate(-4deg); display: inline-block;}
            }

            & nav {
                display: none;

                position: absolute;
                inset: 0;
                height: 100%;
                width: 100%;

                padding: 1rem;

                /* display: flex; */
                flex-flow: column nowrap;
                gap: 2rem;
                justify-content: flex-start;
                align-items: center;
                z-index: 6;

                background: #0008;

                & > .button {
                    text-decoration: none;
                    border: 1px solid crimson;

                    color: crimson;
                    font-weight: 400;
                    font-family: Georgia, 'Times New Roman', Times, serif;
                    font-size: x-large;

                    background: #0008;
                    padding: .5rem;
                }
           }
        }
        & main {
            display: flex;
            flex-flow: column nowrap;

            & section {
                padding: .5rem;
            }
        }
    }
}