:root {
    --body-margin: 10px;
    --animation-speed: 0.3s;
    --animation-easing: cubic-bezier(0.64, 0, 0.78, 0);
    --animation-duration: 0.1s;
    --s-color: #D0D0D0;
}

body {
    margin: var(--body-margin);
    font-family: 'ABC Monument Grotesk', sans-serif;
    font-weight: bold;
}


::selection {
    background: black;
    color: white;
}

header a,
ul,
li,
section.navigation>.swiper-pagination,
.more-informations {
    color: white;

}

section.navigation {
    mix-blend-mode: difference;
}

a:not(:hover) {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    color: var(--s-color);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.1rem;
}

header {
    mix-blend-mode: difference;
    position: fixed;
    bottom: var(--body-margin);
    left: var(--body-margin);
    z-index: 2;

    ul {
        display: flex;
        align-items: flex-end;
        gap: 1rem;

        li {
            display: flex;
            gap: 1rem;
        }

        form {
            display: flex;
        }

        fieldset {
            display: flex;
        }
    }

}

h1.active>a {
    text-decoration: none;
    color: var(--s-color);
}

input[type="checkbox"],
input[type="radio"] {
    display: none;
}

input[type="radio"]:checked+span::before {
    content: '(';

}

input[type="radio"]:checked+span::after {
    content: ')';

}


form:has(+input[type="checkbox"]#open) {
    display: flex;
    transition: width .7s var(--animation-easing) allow-discrete;
    /* overflow: auto; */
    /* width: 0; */

    order: 2;

    interpolate-size: allow-keywords;


}

form:has(+ input[type="checkbox"]#open) fieldset li {
    opacity: 0;
    transform: translateY(-4px);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

form:has(+ input[type="checkbox"]#open:checked) fieldset li {
    opacity: 1;
    transform: translateY(0);
}


form:has(+ input[type="checkbox"]#open:checked) fieldset li:nth-child(1) {
    transition-delay: calc(1 * var(--animation-duration));
}

form:has(+ input[type="checkbox"]#open:checked) fieldset li:nth-child(2) {
    transition-delay: calc(2 * var(--animation-duration));
}

form:has(+ input[type="checkbox"]#open:checked) fieldset li:nth-child(3) {
    transition-delay: calc(3 * var(--animation-duration));
}

form:has(+ input[type="checkbox"]#open:checked) fieldset li:nth-child(4) {
    transition-delay: calc(4 * var(--animation-duration));
}

form:has(+ input[type="checkbox"]#open:checked) fieldset li:nth-child(5) {
    transition-delay: calc(5 * var(--animation-duration));
}

form:has(+ input[type="checkbox"]#open:checked) fieldset li:nth-child(6) {
    transition-delay: calc(6 * var(--animation-duration));
}

form:has(+ input[type="checkbox"]#open:checked) fieldset li:nth-child(7) {
    transition-delay: calc(7 * var(--animation-duration));
}

form:has(+ input[type="checkbox"]#open:checked) fieldset li:nth-child(8) {
    transition-delay: calc(8 * var(--animation-duration));
}

form:has(+ input[type="checkbox"]#open:checked) fieldset li:nth-child(9) {
    transition-delay: calc(9 * var(--animation-duration));
}




form:has(+input[type="checkbox"]#open:checked) {

    width: auto;

}


fieldset {
    display: flex;
    gap: 1rem;
}

input[type="radio"]:checked+span {
    text-decoration: none;
    color: var(--s-color);


}


section.navigation {
    position: absolute;
    text-align: center;
    transform: translateZ(0);
    transition: opacity .3s var(--animation-easing);
    bottom: var(--body-margin);
    z-index: 10;
    width: 100%;

    display: flex;
    justify-content: flex-end;
    padding-right: var(--body-margin);
    gap: 1rem;

    .swiper-pagination {
        position: relative;
        width: auto;
        top: 0;
    }

    .more-informations {}
}

.image-description {
    position: absolute;
    top: var(--body-margin);
    left: var(--body-margin);
    width: calc(100% - 2 * var(--body-margin));
    display: flex;
    mix-blend-mode: difference;
    color: white;

}

input[type="checkbox"]#more+label {
    cursor: pointer;
    transition: transform var(--animation-speed);
    display: block;

    font-size: 100%;
    height: 0;

    svg {
        transition: transform var(--animation-speed);
        object-position: center center;
    }

}

input[type="checkbox"]#more:checked+label>svg {
    transform: rotate(45deg);

}

.swiper .swiper-wrapper:has(+.navigation>.more-informations>input[type="checkbox"]) .image-description {
    display: none;
}

.swiper .swiper-wrapper:has(+.navigation>.more-informations>input[type="checkbox"]:checked) .image-description {
    display: flex;
}



ul label:hover {
    text-decoration: none;
    color: var(--s-color);
    cursor: pointer;
}


@media (width <=968px) {
    header {
        ul {

            li {
                display: block;
            }

            ul {
                display: flex;
                gap: 0.2rem;
                flex-direction: column-reverse;
                align-items: flex-start;

            }


            display: flex;
            align-items: flex-end;
            gap: 1rem;
            width: max-content;

            fieldset {
                gap: .2rem;
                flex-direction: column;
            }
        }
    }
}