nav {


    & .mpbutton {
        font-size: 2rem;
        width: 2rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-width: .25rem;

        & .fa-pagelines {color: #aedeae;}
        & .fa-fire-flame-curved {color: crimson; 
            & path{
                zfill: none;
                stroke: gold;
                stroke-width: 30px;
                stroke-dasharray: 5,2;
                stroke-linejoin: round;
            }
            &:hover{
                color: goldenrod;

                & path{
                    stroke: crimson;
                    stroke-width: 30px;
                    zstroke-dasharray: 5,5;
                    zstroke-linejoin: round;
                    stroke-linecap: square;
                    stroke-miterlimit: 2px;
                }
            }
        }
        & .fa-tree {color: #090;}

        &:has(> .fa-pagelines){
            border-color: #6d8;
            background: linear-gradient(346deg, rgba(51,51,51,1) 0%, rgba(85,85,85,1) 49%, rgba(68,68,68,1) 100%); 
            background: url('../designs/BoxyMint/gfx/pexels-char-1264000.jpg') no-repeat center center;
            background-size: 1000%;
        }
        &:has(.fa-fire-flame-curved){
            border-color: goldenrod;
            background: #000d;
        }
        &:has(.fa-tree){
            border-color: #090;
            background: #fff8;
        }

    }
}
.mpbody {
    background: #800a;
    background: rgb(218,218,218);
    background: linear-gradient(321deg, rgba(218,218,218,1) 11%, rgba(241,241,241,1) 50%, rgba(229,229,229,1) 93%);
    color: #333;
    font-size: 12pt;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

    inset: 0;
    margin: 0;
    
    display: flex;
    height: 100vh;
    max-height: 100vh;
}

h1, h2 {margin: .25rem;}
h3, h4 {margin: .25rem 0;}

.mpwrapper {
    position: absolute;
    border-color: red;
    inset: 0;
    display: flex;
    flex-direction: column;

    zmin-width: 420px;
}
.mptopbar {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    
    border-bottom: 2px solid #010;

    & .mplogo {
        margin-right: 1rem;
        overflow-y: hidden;
        font-size: 1.5rem;
    }
}
.mptopbar > h1 {
    display: flex;
    white-space: nowrap;
    font-size: 1.75rem;
}
#mpnav {
    display: none;
    position: absolute;
    flex-flow: column nowrap;
    padding: 1rem 0.25rem;
    gap: 1rem;
    justify-content: flex-start;
    align-items: center;

    inset: 54px 0 0 0;
    background: #fffd;
    z-index: 20;
}
.mpdesignframe {
    height: 100vh;
    scroll-snap-type: y mandatory;
}

.mpbutton {
    text-decoration: none;
    color: #333;
    font-weight: 600;
    
    border: 1px solid #0009;
    border-radius: .25rem;
    padding: .5rem;
    
    background: #fffd; 
    
}

.blah {
    font-size: 14pt;
    padding: 0 .5rem;
}