Responsive vector user style

ResponsiveVector.css

textarea { font-size: 1em; }

.skin-vector #content>* {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    /* Make it flex to change the order of the menus to the top */
    body.skin-vector {
        display: flex;
        flex-direction: column;
    }
    
    /* Hide insane divs with only margins for the headers */
    .skin-vector #mw-page-base, #mw-head-base {display: none;}
    /* The content has no insane margin left for the sidebar */
    .skin-vector #content {
        margin-left: 0;
        order: 1;
    }
    .skin-vector #mw-navigation { order: 0; }
    .skin-vector #footer { order: 2; }
    
    /* Baseline head reset */
    .skin-vector #mw-navigation>#mw-panel,
    .skin-vector #mw-navigation>#mw-panel>*,
    .skin-vector #mw-navigation>#mw-head,
    .skin-vector #mw-navigation>#mw-head>*,
    .skin-vector #footer
    {
        position: static;
        margin: 0;
        float: none;

    }
    
    /* Make the header flex to switch the order of menu and page tools */
    .skin-vector #mw-navigation { display: flex; flex-direction: column; }
    
    /* Spacing in the header */
    .skin-vector #mw-navigation>#mw-panel,
    .skin-vector #mw-navigation>#mw-head
    { margin-top: 1em; }
    .skin-vector #mw-navigation>#mw-head>#p-personal { margin-bottom: 1em; }

    /* The menu and logo goes first, this tools, later */
    .skin-vector #mw-navigation>#mw-head {
        order: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    /* The personal tools should be full width, the other ones will balance each other */
    .skin-vector #p-personal { width: 100%; }
    /* no floats or weird layouts */
    .skin-vector #p-personal ul, #left-navigation, #right-navigation {
        padding: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .skin-vector #p-personal li { float: none; }

    
    /* sidebar becomes full width, and goes first in the page */
    .skin-vector #mw-navigation>#mw-panel {
        order: 0;
        width: auto;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        font-size: 14px;
        justify-content: space-between;
        padding: 0 1em;
    }
    
    /* Smaller logo */
    .skin-vector #mw-navigation>#mw-panel>#p-logo,
    .skin-vector #mw-navigation>#mw-panel>#p-logo>a {
        width: 64px; height: 48px;
        background-size: contain;
        position: absolute;
        top: 0.5em; left: 1em;
    }
    .skin-vector #mw-navigation>#mw-panel>#p-Navigation,
    .skin-vector #mw-navigation>#mw-panel>#p-navigation {
        margin-top: calc(48px + 1em) !important;
    }
}