:root {
    /* color names */
    --paper: rgb(253, 253, 251);
    --op-gray: rgba(237, 237, 237, 0.5);
    --gray: rgb(245, 244, 244);

    /* color vars */
    --popup-bg: var(--op-gray);
    --op-text: lightgray;
    --ac-text: black;
    --bg: var(--paper);

    /* font vars */
    --txt-font: "josa";
    --title: "homoneta";
    --subtitle: "josa";

    /* font sizes */
    --basic: 1.15rem;
    --basic-josa: .9rem;
    --small: .85rem;
    --big: 1.85rem;
    --tall: 3.5rem;

    --popupheight: 79vh;

    /* animation play state */
    --onoff: /* paused */ running;
}

@font-face {
    font-family: "dindong";
    src: url("../fonts/DINdong.woff2");
}

@font-face {
    font-family: "ductus";
    src: url("../fonts/DuctusMonoRegular.woff2");
}

@font-face {
    font-family: "homoneta";
    src: url("../fonts/Homoneta-Regular.woff2");
}

@font-face {
    font-family: "homoneta";
    src: url("../fonts/Homoneta-Italic.woff2");
    font-style: italic;
}

@font-face {
    font-family: "nanook";
    src: url("../fonts/nanook-webfont.woff2");
}

@font-face {
    font-family: "brunswick";
    src: url("../fonts/brunswickgrotesque-regular-webfont.woff2");
}

@font-face {
    font-family: "josa";
    src: url("../fonts/Josafronde-Regular.woff2");
}

@font-face {
    font-family: "dauphine";
    src: url("../fonts/dauphine_regular-webfont.woff2");
}

html {
    font-size: 1vw;
}

body {
    margin: 0;
    width: 100rem;
    font-size: var(--basic);
    background: var(--bg);
    font-family: var(--txt-font);
    height: fit-content;
}

body:has(.unfold) {
    height: 100vh;
    overflow: hidden;
}

p {
    margin-block-start: 0;
    margin-block-end: 0;

    word-wrap: break-word;
    hyphens: auto;
}

h1 {
    margin-block-start: 0;
    margin-block-end: 1vh;
    font-weight: normal;
    font-size: var(--tall);
    line-height: 1.2;
}

ul {
    margin-block-start: 0;
    margin-block-end: 0; 
    list-style-type: none;
    padding: 0;
}

a {
    text-decoration: none;
    color: var(--ac-text);
}

button {
    display: inline-block;
    border: none;
    /* padding: 1rem 2rem; */
    margin: 0;
    text-decoration: none;
    background: transparent;
    color: var(--ac-text);
    font-family: sans-serif;
    font-size: var(--basic);
    cursor: pointer;
    text-align: center;
}

header {
    z-index: 10;
    position: sticky;
    width: 100rem;

    top: 1vh;
}

nav {
    width: 100%;

    ul {
        width: 100%;
        display: flex;
        padding-inline-start: 0;

        li {
            width: calc(33.3% - 1rem);
            text-align: center;
            margin: .5rem 1rem;
            border-top: 1px solid var(--op-text);
            border-radius: 16px 16px 0% 0%;
            padding: 1vh 1rem 0 1rem;
            font-family: var(--title);

            a {
                color: var(--op-text);
                display: inline-block;
                width: 100%;
            }

            a.active {
                color: var(--ac-text);
            }

            &:has(.active) {
                border-top: 1px solid var(--ac-text);
            }
        }
    }
}

#box {
    position: relative;
    top: 0 /* 20vh */;
    left: 0;
    padding-top: 1vh;

    .images {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 9;
        display: none;
        flex-direction: column;
        row-gap: .5rem;
        flex-wrap: wrap;
        width: 13rem;
        mix-blend-mode: multiply;

        width: 28rem;
        flex-wrap: nowrap;

        &.hidden {
            animation: foldimg 0.5s cubic-bezier(0.85, 0, 0.15, 1) both;
        }

        li {
            width: 9rem;
            height: auto;
            transition: width .5s ease;
            transform-origin: left center;
            will-change: width;

            &:not(:last-child)::after {
                content: ' ';
            }

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

            &:hover {
                width: 28rem;
                height: auto;
            }

            &:hover img {
                filter: grayscale(0);
            }

            img {
                display: block;
                width: 100%;
                height: 100%;
                filter: grayscale(1);
                transition: filter .5s ease;

                object-fit: contain;
                object-position: left;
            }

        }

    }
    .popup.unfold + .images {
        display: flex;

        height: 100vh;
        overflow: auto;
        scrollbar-width: none;
        /* animation: unfold 0.5s cubic-bezier(0.85, 0, 0.15, 1) both; */
    }
}

.mobilebuttons {
    display: none;
}


.row {
    width: 100rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: flex-start;
    transition: width 1s ease;
    color: var(--op-text);
    border-top: 1px solid var(--op-text);
    cursor: pointer;
    /* font-family: var(--txt-font), serif; */
    scroll-margin-top: 10vh;

    padding: /* 8vh */ 0; /* debug */

    .rowmeta {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        font-family: var(--title);

        & > * {
            padding: 1.5vh 1rem;
        }

        .flexAuto {
            padding: 0;
            flex: auto;
            transition: flex .5s ease .5s;
        }
    }

    &.visible {
        color: var(--ac-text);
        border-top: 1px solid var(--ac-text);
    }

    p {
        height: fit-content;
    }

    ul {
        display: flex;
        height: fit-content;

        li:not(:last-child)::after {
            content: ',\00a0';
        }

        &.bookmark {
            /* background-color: red; */
            border-radius: 16px 16px 0% 0%;
            margin-top: -1px;
            border-top: 1px solid var(--ac-text);
            border-left: 1px solid var(--ac-text);
        }
    }

    & ul.popupTags {
        & li:not(:last-child)::after {
        content: '';
        }
    }


    p.bookmark {
        /* background-color: red; */
        border-radius: 16px 16px 0% 0%;
        margin-top: -1px;
        border-top: 1px solid var(--ac-text);
        border-left: 1px solid var(--ac-text);
        height: fit-content;
    }

    &:has(.unfold) {
        color: var(--ac-text);
    }

    &:has(.unfold) > .rowmeta {
        background: var(--popup-bg);
        justify-content: center;

        .flexAuto {
            flex: 0;
        }
    }

}

#overlay {
    position: fixed;
    width: 100rem;
    height: 100vh;
    top: /* 5vh */ 0; /* top 0 for title --> overlay header too?*/
    left: 0;
    background: rgba(211, 211, 211, 0.1);
    pointer-events: none;
    display: none;
    backdrop-filter: blur(5px);
}


.filtergroup {
    border-radius: 16px;
    padding-right: 1rem;
    height: fit-content;
    color: var(--ac-text);
    z-index: 10;
    font-family: var(--txt-font);
    font-size: var(--basic-josa);

    &.tag {
        position: sticky;
        top: 5vh;
        display: flex;
        left: 0;
        margin-left: 1rem;
        flex-wrap: wrap;
        width: 85rem;

        p {
            line-height: 2; /* to align center vertically */
            margin-inline-end: .5vw;
        }
    }

    &.medium {
        position: fixed;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        top: 18vh;

        p {
            width: 5rem;
            line-height: 1.2;
            padding-inline-end: .5rem;
        }
    }

    &.region {
        position: fixed;
        right: 6rem;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        top: 18vh;
        padding-right: .5rem;

        p {
            width: 6rem;
            word-wrap: normal;
            hyphens: none;
            line-height: 1.2;
            padding-inline-end: .5rem;
        }
    }

    .filter {
        display: none;
    }

    label {
        cursor: pointer;
        color: var(--op-text);
        text-wrap: nowrap;
    }

    .filter:checked + label {
        color: var(--ac-text);
    }

    p {
        color: var(--ac-text);
        text-align: right;
    }

    div {
        text-align: right;
        background: var(--op-gray);
        border-radius: 7px;
        margin: 3px;
        padding: .2rem 1rem;
        backdrop-filter: blur(3px);
        width: fit-content;
    }
}


/* title animation */

/* play pause button: https://css-tricks.com/making-pure-css-playpause-button/ */
#animation-play-pause {
    position: absolute;
    top: 2vh;
    left: 1rem;
    border: 0;
    background: transparent;
    box-sizing: border-box;
    width: 0;
    height: 74px;
    border-color: transparent transparent transparent var(--op-text);
    transition: 100ms all ease;
    cursor: pointer;
    transform: scale(.25);
    transform-origin: top left;

    /* initially playing: show pause btn */
    border-style: double;
    border-width: 0px 0 0px 60px;

    &.paused {
        /* if paused show play btn */
        border-style: solid;
        border-width: 37px 0 37px 60px;
    }
}

h1#titleAnim {
    border-top: none;
    border-left: none;
    font-family: var(--title);
}

#titleAnim {
    width: 15rem;
    font-size: var(--basic);
    text-align: left;
    position: relative;
    top: 1vh;
    left: 45rem;
    /* z-index: 9; */
    line-height: .8;
    padding: 0;

    margin-block-end: 4vh;
    margin-block-start: 3vh;
    font-weight: normal;
    font-style: italic;
    letter-spacing: .1rem;

    span {
        word-break: break-all;
        color: var(--op-text);
    
        &.word {
            animation: spacing 11s infinite alternate ease-in-out;
            animation-play-state: var(--onoff);
        }
    }

}

#animshape {
    border-radius: 0;
    width: 6rem;
    height: 5rem;
    shape-outside: polygon(0 0, 0 100%, 33% 55%, 69% 0);
    animation: shape 10s infinite alternate ease-in-out;
    animation-play-state: var(--onoff);
    float: left;
}



@keyframes shape {
    0% {
        shape-outside: polygon(0 0, 0 100%, 33% 55%, 69% 0);
    }
    15% {
        shape-outside: polygon(0 0, 0 100%, 33% 55%, 69% 0);
    }
    
    50% {
        shape-outside: polygon(0 50%, 84% 100%, 4% 50%, 82% 0);
    }
    65% {
        shape-outside: polygon(0 50%, 84% 100%, 4% 50%, 82% 0);
    }
    
    85% {
        shape-outside: polygon(0 100%, 70% 100%, 26% 43%, 0 0);
    }

    100% {
        shape-outside: polygon(0 100%, 70% 100%, 26% 43%, 0 0);
    }
}

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

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

/* form */
.honeypot {
    position: absolute;
    left: -9999px;
}


/* about page */
#aboutMain {
    position: relative;
    top: 0;
    left: 0;
    padding-top: 5vh;
    width: 100rem;
    margin-bottom: 10vh;

    p {
        width: 31rem;
        margin: auto;
        font-size: var(--basic-josa);
        line-height: 1.45;
    }

    a {
        text-decoration: underline;
        text-underline-offset: .15em;
    }

    .block-type-text {
        margin: 2vh 0;
    }
    .block-type-text:first-of-type {
        margin-top: 0;
    }
}