@media only screen and (max-width: 600px) /*(max-device-width: 667px) /* and (-webkit-min-device-pixel-ratio: 2)*/
{
    html, body, .content {
        width: 100%;
        font-size: 15pt;
    }

    .content {
        padding: 0 10px;
    }

    .document-content-container {
        width: 100%;
    }

    .card-container {
        grid-template-columns: 100%;
        grid-gap: 10px 10px;
    }

    .card-actions > img {
        height: 70%;
    }

    .header {
        position: fixed;
        top: 0;
        z-index: 9999;
        transform: translate3d(0,0,0);
        width: 100%;

        /*position: sticky;*/
        /*top: 0;*/
        /*width: 100%;*/
    }
    .content {
        margin-top: 80px;
    }
    .header-content {
        width: 100%;
        padding: 0 10px;
        height: 60px;
    }
    .header .mode-buttons .split-mode-button {
        width: 40px;
    }

    textarea {
        font-size: 12pt;
    }

    .header .breadcrumbs {
        display: none;
    }
    .header .breadcrumbs-mobile {
        display: flex;
        height: 70%;
        width: 100%;
    }
    .header .breadcrumbs-mobile > div:nth-child(1) {
        flex-shrink: 0;
        height: 100%;
        aspect-ratio: 1/1;
    }
    .header .breadcrumbs-mobile > div:nth-child(2) {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-grow: 1;
        padding: 0 10px;
        text-align: center;
    }
    .header .breadcrumbs-mobile > div:nth-child(3) {
        flex-shrink: 0;
        height: 100%;
        aspect-ratio: 1/1;
    }

    .header-button {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        vertical-align: middle;

        height: 100%;
        width: 100%;
        background-color: #2b2b2b;
        border-radius: 5px;
        font-weight: bold;
        cursor: pointer;
        font-size: 40px;
    }
    .header-button img {
        width: 60%;
        height: auto;
    }

    /** Index **/
    .index-header {
        display: none;
    }

    /** Project **/
    .project-header {
        display: none;
    }

    /** Document **/
    .document-header {
        display: none;
    }
}