@media (max-width: 768px) {
    html,
    body {
        width: calc(100% - 0.25em);
        overflow-x: hidden;
    }

    header {
        position: sticky;
        top: 0;
        height: auto;
        min-height: 4.8em;
        grid-template-columns: 1fr auto;
        grid-auto-rows: auto;
        justify-items: stretch;
        padding: 0.35em 0.45em;
        box-sizing: border-box;
        gap: 0.25em;
    }

    .main-center {
        height: 75vh;
    }

    .grid.chat {
        max-height: 50vh;
    }

    .conversation-user {
        height: 20vh;
    }

    .conversation-box {
        height: 50vh;
    }

    .conversation-chat {
        height: 100%;
    }

    .conversation-list {
        height: 100%;
    }

    header > p.title {
        display: none;
    }

    header .title img {
        width: 2.2em;
    }

    header > div.flex {
        justify-content: end;
        padding: 0.2em;
    }

    .full.width {
        justify-content: end;
        gap: 0.25em;
        flex-wrap: wrap;
    }

    .group {
        margin: 0;
        grid-auto-flow: column;
    }

    .group .left,
    .group .center,
    .group .right {
        height: auto;
        padding: 0.4em 0.5em;
    }

    nav {
        background-color: hsla(200, 23%, 97%, 30%);
        border: solid hsl(220, 38%, 11%, 20%) 0.12em;
        height: 4em;
        backdrop-filter: blur(10px) saturate(150%);
        -webkit-backdrop-filter: blur(10px) saturate(150%);
        border-bottom: none;
        border-left: none;
        border-right: none;
        position: fixed;
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        /*gap: 0.35em;*/
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        padding: 0.35em 0.25em;
        bottom: 0;
        z-index: 9999;
    }

    nav br {
        display: none;
    }

    /*nav form.flex {
        min-width: 14em;
        flex-shrink: 0;
        margin-right: 0.2em;
        padding: 0.25em;
    }*/

    /*nav form.flex input {
        min-width: 8em;
        }*/

    nav form,
    nav input,
    nav button {
        width: 0;
        display: none;
    }

    a.nav-link,
    a.nav-link-main {
        width: auto;
        min-width: max-content;
        text-align: center;
    }

    .main {
        width: 100%;
        margin: 0;
        margin-top: 0.35em;
        padding: 0 1em 1em;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }

    .vertical-grid {
        gap: 0.35em;
    }

    .content.box {
        border-radius: 14px;
        margin-bottom: 0.9em;
        padding: 0.75em;
    }

    #notifications,
    #user,
    #share,
    #options,
    [data-options-popover],
    [data-share-popover] {
        left: 0.4em !important;
        right: 0.4em !important;
        top: calc(anchor(bottom) + 0.35em);
        min-width: auto;
        width: auto;
        max-width: calc(100vw - 0.8em);
        box-sizing: border-box;
    }

    .profile-grid {
        grid-template-columns: 1fr;
        height: auto;
        gap: 0.5em;
        justify-items: center;
        text-align: center;
    }

    .background {
        height: 42vw;
        min-height: 8.5em;
    }

    .avatar {
        height: 5.8em;
        margin: 0.6em auto;
    }

    .profile-tab-controls {
        flex-wrap: wrap;
        justify-content: start;
    }

    .profile-tab-button {
        flex: 1 1 auto;
    }

    .profile-friend-grid,
    .profile-upload-grid,
    .profile-bio-grid {
        grid-template-columns: 1fr;
    }

    .friend-list-row {
        flex-wrap: wrap;
        align-items: start;
    }

    .friend-list-row form,
    .friend-list-row .button {
        width: 100%;
    }

    .grid.chat {
        grid-template-columns: 1fr;
        gap: 0.7em;
    }

    #thread-list {
        max-height: 35vh;
        overflow-y: auto;
    }

    #conversation-panel {
        min-height: 58vh;
    }

    #messages {
        max-height: 40vh;
    }

    .messenger-composer-row {
        flex-wrap: wrap;
        align-items: stretch;
    }

    .messenger-composer-row #chat-input {
        width: 100%;
    }

    #chat-send-btn {
        width: 100%;
    }

    .emoji-panel.box {
        width: calc(100vw - 2.2em);
        left: -0.2em;
    }

    .message.block {
        max-width: 88%;
        margin: 0.5em 0;
    }

    .owning.message.block {
        margin-left: auto;
        margin-right: 0;
    }

    .post-card-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.45em;
    }

    .post-meta-actions {
        justify-content: start;
        flex-wrap: wrap;
    }

    .post-link-preview.box {
        flex-direction: column;
    }

    .post-link-preview-image {
        width: 100%;
        min-width: 0;
        height: auto;
        max-height: 12.5em;
    }

    .post-image-grid {
        grid-template-columns: 1fr;
    }

    .post-image-grid.post-image-carousel-track .post-image {
        max-height: 18em;
    }

    .post-image-carousel-button {
        width: 1.85em;
        height: 1.85em;
    }

    .post-image-preview-nav {
        width: 2rem;
        height: 2rem;
    }

    .post-image-preview-nav.prev {
        left: 0.35rem;
    }

    .post-image-preview-nav.next {
        right: 0.35rem;
    }

    .post-image-preview-modal #post-image-preview-close {
        width: 1.9rem;
        height: 1.9rem;
        min-width: 1.9rem;
        top: 0.6rem;
        right: 0.6rem;
    }

    .post-image-preview-modal #post-image-preview-edit-profile-photo {
        top: 0.6rem;
        left: 0.6rem;
    }

    .post-comment-item-reply {
        margin-left: min(calc(var(--comment-thread-depth, 1) * 0.9rem), 2.4rem);
        font-size: 0.92em;
    }

    .post-comment-reply-state {
        flex-direction: column;
        align-items: stretch;
    }

    .post-comment-form-main {
        flex-direction: column;
        align-items: stretch;
    }

    .post-comment-form-main .small.button {
        width: 100%;
    }

    .post-comment-edit-form .small.button {
        width: 100%;
    }

    .whole.page.box {
        height: auto;
        min-height: 70vh;
    }

    .grid.vertical {
        grid-template-rows: auto 1fr auto;
    }
}

@media (max-width: 768px) {
    .main {
        padding-bottom: 8em;
    }

    .horizontal.flex.start.no.padding {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0.45em;
    }

    .horizontal.flex.start.no.padding > * {
        max-width: 100%;
    }

    .friend-list-link {
        width: 100%;
        margin-right: 0;
    }

    .friend-list-row > form {
        width: 100%;
        margin: 0;
    }

    .friend-list-row > form .button {
        width: 100%;
    }

    .community-page-layout {
        display: block;
    }

    .community-sidebar-column {
        position: static;
        margin-top: 0.6em;
    }

    .community-tab-bar .button {
        width: auto !important;
        flex: 1 1 auto;
        text-align: center;
    }

    .profile-grid > .flex {
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        gap: 0.35em;
    }

    .profile-grid > .flex form,
    .profile-grid > .flex .button {
        width: 100%;
    }

    #conversation-panel .horizontal.flex.start.no.padding .button {
        width: 100%;
    }

    .group-add-dropdown .button {
        width: 100%;
    }

    #loginForm,
    #signupForm,
    #betaCompleteProfileForm,
    #betaInviteStartForm,
    #betaSignupRequestForm {
        display: flex;
        flex-direction: column;
        gap: 0.5em;
        width: 100%;
        box-sizing: border-box;
    }

    #loginForm .button,
    #signupForm .button,
    #betaCompleteProfileForm .button,
    #betaInviteStartForm .button,
    #betaSignupRequestForm .button,
    #loginForm .main,
    #signupForm .main,
    #betaCompleteProfileForm .main,
    #betaInviteStartForm .main,
    #betaSignupRequestForm .main {
        width: 100%;
    }

    #signupForm .box label {
        display: block;
        margin-bottom: 0.4em;
    }

    .profile-bio-form .button,
    .profile-bio-form .main {
        width: 100% !important;
    }

    .content.box > form {
        width: 100%;
        box-sizing: border-box;
    }

    .content.box img[alt="Current background photo"] {
        width: 100%;
        max-width: 100% !important;
        max-height: 180px !important;
    }

    .content.box label.vertical.flex.no.padding {
        width: calc(50% - 0.25rem);
        max-width: none !important;
    }

    .content.box label.vertical.flex.no.padding img {
        width: 100% !important;
        height: auto !important;
        max-height: 9.5em;
    }

    .settings-image-crop-modal {
        padding: 0.45rem;
    }

    .settings-image-crop-panel {
        width: 100%;
        max-height: calc(100vh - 0.9rem);
        padding: 0.7rem;
    }

    .settings-image-crop-controls {
        flex-wrap: wrap;
    }

    .settings-image-crop-controls small {
        width: 100%;
    }

    .notification-item.box {
        flex-direction: column;
        align-items: stretch;
    }

    .notification-item-actions,
    .notification-item-actions .small.button {
        width: 100%;
    }

    #moderator-posts-section .post-card .horizontal.flex.start.no.padding form {
        width: 100%;
    }

    #moderator-posts-section
        .post-card
        .horizontal.flex.start.no.padding
        form
        .small.button {
        width: 100%;
    }

    .content.box h1,
    .content.box h2,
    .content.box h3 {
        overflow-wrap: anywhere;
    }
}