@media (orientation: portrait) or (max-width: 600px) {
    .mobile-flex-column {
        flex-direction: column !important;
    }

    /* Mobile Top Bar */
    #top-bar {
        flex-direction: column;
    }

    #top-first {
        flex-direction: row;
        margin-left: 0;
    }

    #top-second {
        flex-direction: column;
        justify-content: stretch;
        align-items: stretch;
        margin-right: 0;
    }

    #mobile-top-bar {
        background: var(--tile);
        padding: 10px;
        height: auto;
        width: 100%;
        gap: 10px;
    }

    #banner {
        margin-right: auto;
    }

    #notifications-toggle:checked ~ #notifications {
        right: 0;
        width: fit-content;
        max-width: 100%;
        height: 100%;
    }

    /* Sidebar */
    #sidebar {
        position: absolute;
        left: -100%;
        transition-duration: var(--transition-duration);
        z-index: 999;
        width: 100%;
        height: 100%;
        top: 0;
        background: transparent;
    }

    .navbar {
        width: 182px;
    }

    #mobile-fade {
        position: absolute;
        left: -100lvw;
        width: 100lvw;
        height: 100svh;
        top: 0;
        background: transparent;
        transition-duration: var(--transition-duration);
    }

    #mobile-sidebar-toggle:checked ~ #page {

    }

    #mobile-sidebar-toggle:checked ~ div > #sidebar > #mobile-fade {
        left: 0;
        background: rgba(0,0,0, 0.4);
        z-index: -999;
    }

    #mobile-sidebar-toggle:checked ~ div > #sidebar {
        left: 0;
        padding-left: 10px;
    }

    /* Main Page Content */

    #home-text {
        visibility: hidden;
    }

    #search-mobile {
        width: 100%;
    }

    .sort-flex {
        width: 132px;
    }

    #posts {
        justify-content: center;
    }

    #profile-comments > .comment,
    .comment,
    .post {
        width: 100%;
    }

    #main-view {
        margin-left: 0;
        padding: 20px;
    }

    /* Thread Page Content */

    #tactical-spacer {
        display: none;
    }

    .profile-page {
        flex-direction: column-reverse !important;
        flex-shrink: 0;
        height: auto !important;
    }

    #profile-div {
        margin-top: 10px;
    }

    #profile-info {
        display: grid;
        grid-template-columns: 64px auto;
        grid-template-rows: 1fr auto;
        gap: 10px;
        overflow: hidden;
        grid-template-areas:
        "image username"
        "image flairs"
        "hr hr"
        "bottom bottom";
    }

    #profile-image {
        align-self: flex-start;
        grid-area: image;
        height: 64px;
        width: 64px;
    }

    #profile-username {
        grid-area: username;
        /* This fucking hack. I won't bother rewriting the profile settings object just for one change. */
        transform: translateY(5px);
    }

    #profile-info > .user-flairs {
        grid-area: flairs;
        margin: 0;
    }

    #profile-info > .user-flairs > div {
        flex-wrap: nowrap;
        animation: overflow-scroll-animation 2.5s;
    }

    #profile-info > hr {
        grid-area: hr;
    }

    #profile-stats {
        grid-area: bottom;
    }

    #profile-comments {
        flex-direction: column;
        justify-content: center;
        flex-wrap: nowrap;
    }

    #settings-view {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 10px;
    }

    #sidebar-реклама {
        width: 182px;
    }

    #profile-comments,
    #announcements,
    #main-view,
    #posts,
    #post,
    #delete-post-form,
    #edit-post-form,
    #edit-comment-post-form,
    #report-post-form,
    #create-post-form {
        width: 100% !important;
    }

    #post-entries {
        display: flex !important;
        flex-direction: column;
    }
}

@media (max-width: 350px) {
    .post-stats {
        height: auto;
        align-items: normal;
        flex-direction: column;
        gap: 10px 0;
    }

    .dropdown-select {
        position: absolute;
        top: 0;
        right: 0;
    }

    #main-view > #posts > .post {
        max-height: max-content;
    }
}