@media (max-height: 800px), (max-width: 800px) {
    .instance {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: min-content min-content min-content min-content;
        grid-template-areas:
            "top"
            "controls"
            "first"
            "second"
    }

    .instance .equip { display: none; }
    .instance .info { display: none; }
    .instance .cryp-list { display: none; }
     #toggle-vbox-label {
        text-align: center;
        border: 2px solid #555;
     }
     #toggle-vbox-label:after{
        content: "Cryps";
    }

    #toggle-vbox:checked ~ #toggle-vbox-label:after{
        content: "Vbox";
    }

    #toggle-vbox:checked ~ .vbox { display: none; }
    #toggle-vbox:checked ~ .cryp-list { 
        display: initial; 
        grid-area: second;
    }
    #toggle-vbox:checked ~ .equip { 
        display: initial;
        grid-area: first;
    }




    .vbox {
        grid-area: first;
        display: grid;
        grid-template-rows: min-content min-content min-content;
        grid-template-columns: 1fr;
        grid-template-areas:
            "vbox"
            "inventory"
            "combiner";
    }

    .vbox-inventory {
        margin-left: 0;
    }

    .vbox-combiner {
        margin-left: 0;
    }

    #toggle-vbox { display: none; }

    #toggle-vbox-label {
        grid-area: controls;
        color: whitesmoke;
        line-height: 1.75em;
        font-size: 1.5em;
        display: block;
        cursor: pointer;
        margin-right: 0.5em;
    }


}