@media only screen and (max-width: 768px) {

    :root {
        /* mobile font sizes */
        --basic: 5rem;
        --basic-josa: 4rem;
        --big-josa: 5.75rem;
        --small: 3.5rem;
        --big: 8rem;
        --tall: 8rem;

        --popupheight: 78vh;
        --maskheight: 68vh;
    }

    @keyframes unfold {
        0% {
            height: 0;
        }

        100% {
            height: 68vh;
        }
    }

    @keyframes foldin {
        0% {
            height: 68vh;
        }

        100% {
            height: 0;
        }
    }

    body {
        overflow-x: hidden;
    }

    body:has(.unfold) {
        height: unset;
    }

    #titleAnim {
        width: 45rem;
        left: 31rem;
    }
    #animshape {
        width: 18rem;
        height: 15rem;
    }

    header {
        /* position: relative; */
        top: -1px;
        padding-top: calc(1em + 1px);
        will-change: transform;

        &.isSticky li:has(:not(a.active)){
            visibility: hidden;
        }
    }

    body:has(.formMain) header.isSticky li:has(a.active) {
        margin-top: -6vh;
    }

    body:has(#aboutMain) header.isSticky li:has(a.active) {
        margin-top: -10vh;
    }

    nav {
        ul {
            flex-direction: column;
            width: 98%;

            li {
                width: calc(100% - 2rem);

                &:has(.active) {
                    background: var(--bg);
                }
            }
        }
    }

    #animation-play-pause {
        transform: scale(.2);
        left: 2rem;
    }


    .filtergroup {
        p {
            /* text-align: left;
            white-space: nowrap;
            width: fit-content !important; */
            display: none;
        }
        &.tag {
            flex-wrap: wrap;
            top: 25vh;
        }
         div {
            height: fit-content;
            border-radius: 5px;
        }
        &.tag {
            position: relative;
            top: unset;
        }
        &.medium {
            position: relative;
            right: unset;
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            /* top: 15vh; */
            top: unset;
            left: 0;
            margin-left: 1rem;
            flex-wrap: wrap;
        }
        &.region {
            position: relative;
            right: unset;
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            /* top: 22vh; */
            top: unset;
            left: 0;
            margin-left: 1rem;
            flex-wrap: wrap;
        }
    }

    .row {
        justify-content: center;
        flex-direction: row;
        flex-wrap: wrap;
        scroll-margin-top: 8vh;

        ul {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            align-content: flex-start;

            &.bookmark {
                border-radius: 13px 13px 0% 0%;
            }
        }

        .rowmeta {
            font-size: var(--basic);
            line-height: 1;

            ul[data-medium], ul[data-tag], ul[data-region] {
                display: none;
            }

            ul[data-medium].bookmark, ul[data-tag].bookmark, ul[data-region].bookmark {
                display: flex;
            }

            ul[data-medium]:empty, ul[data-tag]:empty, ul[data-region]:empty {
                padding: 0 !important;
            }

        }
    }

    .row:has(.unfold) > .rowmeta {

        ul[data-medium]:not(:empty), ul[data-tag]:not(:empty), ul[data-region]:not(:empty) {
            display: flex !important;
        }

    }

    #box {
        .images {
            li {
                width: unset;
                height: 5vh;
            }
        }

        & .popup.unfold + .images {
            display: none;
        }

        & .popup.unfold + .images.inView {
            display: flex;
            width: 85rem;
            right: 8.3rem;
            z-index: 20;
            mix-blend-mode: normal;
            scrollbar-width: none;

            li {
                width: 85rem;
                height: unset;

                &:first-child {
                    padding-top: 20.5vh;
                }

                img {
                    filter: none;
                }
            }
        }

        .popup.unfold:has(+ .images) {
            width: 85rem;

            & .popupInner {
                width: 85rem;
                display: none;
            }
            & .popupInner.inView {
                display: block;
            }

            .closepopup {
                left: calc(42.5rem - 16px);
            }
        }

        & .popup.unfold:has(+ .images) ~ .mobilebuttons {
            display: flex;
            transform: rotate(90deg);
            position: /* relative */ absolute;
            right: 1rem;
            transform-origin: right top;
            column-gap: 10px;
            z-index: 13;

            button {
                padding: 1.5px 15px;
                background-color: var(--gray);
                border-radius: 6px 6px 0% 0%;
                font-family: var(--title);
                font-size: var(--basic-josa);
                 
                span {
                    color: var(--op-text);
                }
                span.active {
                    color: var(--ac-text);
                }
            }
        }
    }

    .popup.unfold:has(.translation) {
        width: 85rem;

        & .popupInner {
            width: 85rem;
        }

        .closepopup {
            left: calc(42.5rem - 16px);
        }
    }

    .translatebtn {
        right: 1rem;
        transform-origin: right top;
        top: 90vh;
        font-family: var(--title);
        font-size: var(--basic-josa);

        padding: 1.5px 15px;
    }

    /* popup */
    .popup {
        width: 95rem;
        mask-size: 100% var(--maskheight);

        .popupInner {
            width: 95rem;
            padding: /* 7.5vh */ 4.5vh 0;

            p {
                width: 85%;
            }

            .popupTitle {
                padding-right: 9rem;
                padding-bottom: 11rem;
                padding-top: 14rem;
                max-width: 43%;

                &:has(+ .block-type-image) {
                    max-width: unset;
                }

                h1 {
                    hyphens: auto;
                    overflow-wrap: break-word;
                    font-size: var(--big);
                }

                h4 {
                    margin: 0;
                    margin-bottom: 3rem;
                    font-size: var(--basic);
                }

                .contrib-name {
                    font-size: var(--basic-josa);
                }

                .popupTags {
                    li {
                        border-radius: 6px 6px 0% 0%;
                    }
                }
            }

            .popupTitle ~ .block-type-audio {
                margin-top: 0;
                padding-bottom: 2vh;

                audio {
                    margin: auto;
                    display: block;
                    width: 100%;
                }
            }
        }
        .closepopup {
            left: calc(47.5rem - 16px);
            margin-top: 2.5vh;
        }

        &.unfold + .images {
            align-items: flex-end;
        }

        &.video-recipe {
            .popupTitle {
                padding-top: 8rem;
            }
            & .popupTitle + .block-type-text {
                margin-top: 5vh;
            }
        }

        &.audio-recipe {
            .popupInner {
                padding: 3vh 0
            }
        }

        &.image-recipe .popupTitle {
            padding-top: 8rem;
        }

        &.poem-recipe .popupTitle {
            max-width: 100%;
            padding-top: 8rem;
        }
    }

    .block-type-heading {
        & > * {
            width: 85%;
            font-size: var(--big-josa);
        }
    }

    .block-type-footnote-text {
        shape-outside: circle(58%);
        padding: 7rem 2rem;
        line-height: 1.3;
    }

    .block-type-video {
        figure {
            margin: 0;
        }
        video {
            width: 85%;
            margin: 3vh 7.5%;
        }
    }

    .block-type-list {

        ul {
            display: block;
            font-weight: normal;
            width: 85%;
            margin: auto;
            
            li:not(:last-child)::after {
                content: '';
            }
        }
    }

    @keyframes spacing {
        0% {
            letter-spacing: .1rem;
        }
        15% {
            letter-spacing: .1rem;
        }
        
        50% {
            letter-spacing: 1.5rem;
        }
        65% {
            letter-spacing: 1.5rem;
        }
        
        85% {
            letter-spacing: .1rem;
        }

        100% {
            letter-spacing: .1rem;
        }
    }

    /* form css */
    .form-intro {
        width: 85rem;
        margin: auto;
        /* white-space: pre-line; */
    }

    .formsection {
        .sectioncontent {
            padding-bottom: 10vh;
        }

        h1 {
            padding: 3vh 4rem;
            padding-top: 1.5vh;
        }
    }

    .form-element {
        margin-top: 5vw;
    }
    .form-element:first-of-type {
        margin-top: 0;
    }

    .formsection.basic-elements, .formsection.category-elements, .formsection.content-elements {
        margin-left: 1vw;
    }

    abbr {
        font-size: 5rem;
    }

    .note {
        max-width: 100%;
    }

    label {
        width: 30rem;
    }
    input[type="text"], input[type="email"], input[type="url"] {
        width: 59rem;
    }

    input[name="tags[]"] ~ label {
        width: 86rem;
    }

    input[name="category[]"] ~ label {
        width: 86rem;
    }

    textarea {
        width: 95%;
    }

    label:has(~ textarea) {
        width: 100%;
    }

    #aboutMain {
        .block-type-text {
            width: 85%;
            margin: 3vh auto;

            p {
                width: 100%;
            }
        }
    }
}