@media screen and (max-width: 900px) {
    #page {
        width: 100%;
        border: none;
    }

    #top {
        width: 100%;
        height: auto;
    }

    #mid {
        width: 100%;
        border: none;
        position: relative;
    }

    #main {
        width: calc(100% - 14px);
    }

    label[for="burgermenu-checkbox"] {
        display: flex;
        align-items: center;
    }

    #side {
        position: fixed;
        transform: translateX(100%);
        transition: 0.3s ease-in-out;
        background: white;
        top: 40px;
        left: 0;
        z-index: 5;
        overflow-y: auto;
        width: calc(100% - 20px);
        height: calc(100% - 48px);
    }

    #burgermenu-checkbox
        + #page
        label[for="burgermenu-checkbox"]
        span.burgermenu-close {
        display: none;
    }
    #burgermenu-checkbox
        + #page
        label[for="burgermenu-checkbox"]
        span.burgermenu-open {
        display: inline-block;
    }

    #burgermenu-checkbox:checked
        + #page
        label[for="burgermenu-checkbox"]
        span.burgermenu-close {
        display: inline-block;
    }
    #burgermenu-checkbox:checked
        + #page
        label[for="burgermenu-checkbox"]
        span.burgermenu-open {
        display: none;
    }

    #burgermenu-checkbox:checked + #page #side {
        transform: translateX(0);
        box-shadow: 0 14px 12px 6px #0550a578;
    }
    #burgermenu-checkbox:checked + #page #main {
        position: fixed;
    }

    img {
        max-width: 100%;
    }
}