* {
    box-sizing: border-box;
}

@media (max-width: 820px) {

    html {
        overflow-x: hidden;
    }

    body {
        width: 100%;
        overflow-x: hidden;
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    /* Fix background on iOS Safari */
    body::before {
        background-attachment: scroll;
        width: 100%;
    }

    /* Header */
    .headerwrapper {
        width: 100vw;
        margin-left: 0;
        margin-bottom: 10px;
        overflow: hidden;
    }

    .header {
        margin-left: 15px;
        font-size: 28px;
        line-height: 1.3;
        padding-top: 0.5rem;
        margin-bottom: 8px;
    }

    /* Social icons */
    .social-icons-top {
        position: static;
        justify-content: center;
        flex-wrap: wrap;
        padding: 8px 10px 10px 10px;
        gap: 16px;
        background-color: rgba(0, 0, 0, 0.25);
    }

    .social-icons-top a {
        color: #fff;
        font-size: 26px;
    }

    /* Fix the border bar */
    .headerborder {
        width: 100%;
        margin-left: 0;
    }

    /* Container and box go full width */
    #container {
        width: 100%;
        max-width: 100%;
        margin: 0 0 60px 0;
        padding: 0 8px;
        border: none;
    }

    #box {
        width: 100%;
        min-width: 0;
    }

    /* Kill the floats, stack sidebar above main content */
    #side {
        float: none !important;
        width: 100% !important;
        padding: 0 8px;
        min-width: 0;
        display: flex;
        gap: 8px;
    }

    #side .sidebox {
        flex: 1;
        min-width: 0;
    }

    /* Hide the empty sidebox */
    #side .sidebox:empty,
    #side .sidebox:nth-child(2) {
        display: none;
    }

    #main {
        float: none !important;
        width: 100% !important;
        padding: 0 8px 5px 8px;
        min-width: 0;
        overflow: hidden;
    }

    /* Scrollbox full width */
    #scrolly {
        width: 100%;
    }

    /* Hide scrollbar on mobile */
    ::-webkit-scrollbar {
        display: none;
    }

    * {
        scrollbar-width: none;
    }

    .mainboxescontent {
        padding: 0 10px;
        word-break: break-word;
    }

    /* Catch anything still overflowing */
    #container, #container * {
        max-width: 100%;
        min-width: 0;
    }
}