:root {
    font-family: sans-serif;
    color: lightgrey;
    background-color: dimgrey;

    scroll-behavior: smooth;
}

h1 {
    font-size: xx-large;
}

figure {
    margin-block-start: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;

    break-inside: avoid;
}

summary {
    list-style: none;
    cursor: pointer;
}

details[open] {
    summary {
        font-weight: bold;
        cursor: pointer;

        display: flex;
        align-items: center;
        justify-content: center;

        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;

        background-color: rgba(0, 0, 0, 50%);

        figure {
            width: 100%;
        }
    }

}

img,
video {
    width: 100%;
}


a {
    color: inherit;
    text-decoration: inherit;
}

a:hover,
a:active {
    text-decoration: underline;
}

.max-width-two-columns {
    max-width: 40em;
    /*
    margin-left: auto;
    margin-right: auto;
    */
}

article {
    overflow: hidden;
    transition: 1s;

    &:not(:target) {
        height: 0;
        opacity: 0;
    }
}

nav {
    a {
        break-inside: avoid;
        display: block;

        &:hover {
            text-decoration: inherit;
        }

        figure {
            background-color: rgba(0, 0, 0, 20%);
            border-radius: 3%;
            padding-bottom: 0.5em;
            overflow: hidden;

            img {
                transition: 0.5s ease-in-out;
                transform-origin: bottom center;

                &:hover {
                    scale: 1.1;
                }
            }

            figcaption {
                padding: 0.5em;
                text-align: center;
            }
        }
    }
}


@media (width < 480px) {
    article {
        .figures {
            position: relative;

            figure {
                transition: opacity 0.5s ease-in-out;
                position: absolute;

                bottom: 0;

                &:first-child {
                    position: relative;
                }

                &:not(.current) {
                    opacity: 0;
                }
            }
        }

    }

    nav {
        figcaption {
            font-size: 120%;
            font-weight: bold;
        }
    }
}

@media (width >=480px) {
    article {
        .about {
            display: flex;
            flex-wrap: wrap;
            gap: 2%;
            width: 100%;

            >* {
                width: 46%;
                margin-block-start: 0;
            }

            > :nth-child(1) {
                order: 1;
            }

            > :nth-child(2) {
                order: 2;
            }

            > :nth-child(3) {
                order: 3;
            }

            > :nth-child(4) {
                order: 4;
            }

            > :nth-child(5) {
                order: 5;
            }

            > :nth-child(6) {
                order: 6;
            }

            > :nth-child(7) {
                order: 7;
            }

            :nth-child(8) {
                order: 8;
            }

            :nth-child(9) {
                order: 9;
            }
        }

        .figures {
            display: flex;
            flex-wrap: wrap;
            gap: 2%;
            width: 100%;


            & > details {
                width: 49%;
            }


            & > figure {
                width: 49%;
            }

        }

        .meta-information {
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: 1em;

            .tasks {
                grid-column: 1;
                grid-row: 1 / 3;
            }

            .funding {
                grid-column: 2;
                grid-row: 1;
            }

            .thanks {
                grid-column: 2;
                grid-row: 2;
            }
        }
    }

    .objective {
        display: flex;

        gap: 1em;

        >* {
            flex: 1;
        }
    }

    nav {
        column-count: 2;
    }

    #riff {
        .about {
            > :nth-child(1) {
                width: 100%;
            }

            > :nth-child(4) {
                order: 5;
            }

            > :nth-child(5) {
                order: 4;
            }

            > :nth-child(7) {
                >* {
                    margin-block-start: 0;
                }
            }
        }

        .links {
            column-count: 2;

            h3 {
                column-span: all;
            }
        }
    }

    #hola {
        .about {
            > :nth-child(3) {
                order: 4;
            }

            > :nth-child(4) {
                order: 3;
            }
        }
    }

    #hoerweg {
        .about {
            > :nth-child(2) {
                order: 3;
            }

            > :nth-child(3) {
                order: 2;
            }
        }
    }
}

@media (width >=768px) {
    article {
        .figures > figure {
            width: 49%;
        }

        .meta-information {
            grid-template-columns: 1fr 1fr 1fr;

            .tasks {
                grid-column: 1;
                grid-row: 1;
            }

            .funding {
                grid-column: 2;
                grid-row: 1;
            }

            .thanks {
                grid-column: 3;
                grid-row: 1;
            }
        }
    }

    nav {
        column-count: 3;
    }
}

@media (width < 768px) {
    #hoerweg {
        .figures.not-dieburg {
            display: inherit;
            position: relative;

            figure {
                transition: opacity 0.5s ease-in-out;
                position: absolute;

                bottom: 0;
                width: 100%;

                &:first-child {
                    position: relative;
                }

                &:not(.current) {
                    opacity: 0;
                }
            }
        }

    }
}

@media (width >=768px) and (width < 1024px) {
    #hoerweg {
        .figures.not-dieburg {
            figure {
                width: 32%;
            }
        }
    }
}

@media (width >=1024px) {
    article {
        .about>* {
            width: 32%;
        }

        .figures > figure,
        .figures > details {
            width: 32%;
        }
    }

    nav {
        column-count: 4;
    }

    #riff {
        .about {
            > :nth-child(3) {
                order: 5;
            }

            > :nth-child(4) {
                order: 3;
            }

            > :nth-child(5) {
                order: 6;
            }

            > :nth-child(6) {
                order: 4;
            }
        }
    }

    #hola {
        .about {
            > :nth-child(2) {
                order: 4;
            }

            > :nth-child(3) {
                order: 2;
            }

            > :nth-child(4) {
                order: 5;
            }

            > :nth-child(5) {
                order: 3;
            }
        }
    }

    #hoerweg {
        .about {
            >* {
                width: 48%;
            }

            >.figures {
                width: 100%;

                >figure {
                    width: 48%;
                }
            }
        }

        >.figures {

            display: flex;
            flex-wrap: wrap;
            gap: 2%;
            width: 100%;

            figure {
                width: 32%;
            }
        }

    }
}

@media (width > 1200px) {
    /*
    article {
        >.about>* {
            width: 15%;
        }
        >.figures figure {
            width: 15%;
        }
    }
*/

    nav {
        column-count: 5;
    }

    /*
    #riff,
    #hola {
        .about {
            > :nth-child(2) {
                order: 2;
            }
            > :nth-child(3) {
                order: 3;
            }
            > :nth-child(4) {
                order: 4;
            }
            > :nth-child(5) {
                order: 5;
            }
            > :nth-child(6) {
                order: 6;
            }
        }
    }
        */
}

@media (width >=1440px) {
    nav {
        column-count: 6;
    }

    #hoerweg {
        .about>.figures>figure {
            width: 23%;
        }

        >.figures figure {
            width: 32%;
        }
    }

}

@media (width >=1920px) {
    nav {
        column-count: 7;
    }
}