Spriteclub Portrait Mode by Orangestar12

/* ==UserStyle==
@name           Spriteclub Portrait Mode
@namespace      orangestar.dev
@version        1.0.0
@description    Swaps out the flexbox layout on Spriteclub for a simple static portrait block style.<br>This will require you to install a userscript (probably with Greasemonkey) to add the html tag <code>&lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;</code>
@author         Orangestar
==/UserStyle== */

@-moz-document domain("spriteclub.tv") {
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }

    #main {
        display: block;
        height: auto !important;
    }

    #main > div {
        width: 100% !important;
    }
    #twitchDiv {
        max-width: 100% !important;
    }
    #twitch-embed {
        aspect-ratio: 4/3
    }

    div#leftSide {
        height: 40vh;
        overflow-y: scroll;
    }

    #bottomBar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 48px;
        z-index: 1000;
    }

    #chatDiv, iframe.chat {
        display: block !important;
        position: relative !important;
        z-index: 0;
        height: 45vh;
    }
}