@font-face {
    font-family: 'Open Sans';
    src: url('./fonts/Open_Sans/static/OpenSans-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('./fonts/Open_Sans/static/OpenSans-Bold.ttf');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Nabla';
    src: url('./fonts/Nabla/Nabla-Regular-VariableFont_EDPT,EHLT.ttf');
    font-weight: normal;
    font-style: normal;
}

:root {
    --background-dark: #331878;
    --foreground-dark: #fff;

    --background-light: #fffcf0;
    --foreground-light: #1a1a1a;

    --background-color: var(--background-light);
    --foreground-color: var(--foreground-light);


    --shadow-color: oklch(from var(--background-dark) 0.2 c h / 1);
    --shadow-elevation-low: 0.3px 0.5px 0.7px hsl(from var(--shadow-color) h s l / 0.16),
    0.5px 0.9px 1.2px -1.2px hsl(from var(--shadow-color) h s l  / 0.16),
    1.3px 2.5px 3.2px -2.5px hsl(from var(--shadow-color) h s l  / 0.16);
    --shadow-elevation-medium: 0.3px 0.5px 0.7px hsl(from var(--shadow-color) h s l  / 0.16),
    1px 1.9px 2.4px -0.8px hsl(from var(--shadow-color) h s l  / 0.16),
    2.5px 5.1px 6.4px -1.7px hsl(from var(--shadow-color) h s l  / 0.16),
    6.3px 12.5px 15.7px -2.5px hsl(from var(--shadow-color) h s l  / 0.16);
    --shadow-elevation-high: 0.3px 0.5px 0.7px hsl(from var(--shadow-color) h s l  / 0.15),
    2.1px 4.1px 5.2px -0.4px hsl(from var(--shadow-color) h s l  / 0.15),
    4px 7.9px 10px -0.7px hsl(from var(--shadow-color) h s l / 0.15),
    6.6px 13.2px 16.6px -1.1px hsl(var(--shadow-color) / 0.15),
    10.6px 21.2px 26.7px -1.4px hsl(var(--shadow-color) / 0.15),
    16.7px 33.4px 42px -1.8px hsl(var(--shadow-color) / 0.15),
    25.4px 50.8px 63.9px -2.1px hsl(var(--shadow-color) / 0.15),
    37.5px 75px 94.3px -2.5px hsl(var(--shadow-color) / 0.15);

}

html, body {
    padding: 0;
    margin: 0;
}

body {
    font-family: "Open Sans", sans-serif;
    font-size: 1rem;
    background-color: var(--background-color);
    color: var(--foreground-color);
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: var(--background-dark);
        --foreground-color: var(--foreground-dark);
    }
}

:where(h1) {
    margin-block: 0.67em;
    font-size: 2em;
}

* {
    box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
    @keyframes title {
        0% {
            font-variation-settings: "EDPT" 30;
        }
        50% {
            font-variation-settings: "EDPT" 200;
        }
        100% {
            font-variation-settings: "EDPT" 30;
        }
    }
    body:where(:not(.reduce-motion)) {

        & {
            height: 100%;
        }


        > main > ul {
            > li {
                filter: initial;
            }

            > li[data-active=true],
            > li:hover {
            }
        }

        main > header > h1 {
            font-family: 'Nabla', 'Open Sans', sans-serif;
            animation: title 10s infinite;
        }
    }
}

@media (prefers-reduced-transparency: reduce) {
    :root {
        --visually-hidden-opacity: 1;
    }
}

@media (prefers-reduced-transparency: no-preference) {
    :root {
        --visually-hidden-opacity: 0.2;
    }
}

@media ( min-aspect-ratio: /* horizontal layout */ 1) {
    @media (prefers-reduced-motion: no-preference) {
        @keyframes translateinfiniteX {
            100% {
                transform: translateX(calc(clamp(20rem, 20vw, 100%) * calc(var(--count) * -1)));
            }
        }
        body:where(:not(.reduce-motion)) {
            > main {
                height: 100%;
                justify-self: center;
                align-items: center;

                > ul {

                    height: clamp(20rem, 20vw, 100%);
                    width: 100%;
                    overflow-x: hidden;
                    flex-wrap: unset;
                    align-items: center;

                    &::before,
                    &::after {
                        content: " ";
                        position: absolute;
                        z-index: 9;
                        width: clamp(20rem, 20vw, 100%);
                        height: 100%;
                        pointer-events: none;
                    }

                    &::before {
                        top: 0;
                        left: 0;
                        background: linear-gradient(to right, rgba(from var(--background-color) r g b / 1) 0%, rgba(from var(--background-color) r g b / 0) 100%);
                    }

                    &::after {
                        top: 0;
                        right: 0;
                        background: linear-gradient(to left, rgba(from var(--background-color) r g b / 1) 0%, rgba(from var(--background-color) r g b / 0) 100%);
                    }

                    > li {
                        width: clamp(20rem, 20vw, 100%);
                        flex-shrink: 0;
                        flex-grow: 0;
                        animation: translateinfiniteX calc(var(--count) * 20s) linear infinite;
                    }

                    &:hover > li {
                        animation-play-state: paused;
                    }
                }
            }
        }
    }
}

@media ( max-aspect-ratio: /* vertical layout */ 1) {
    @media (prefers-reduced-motion: no-preference) {

        @keyframes translateinfiniteY {
            100% {
                transform: translateY(calc(15rem * calc(var(--count) * -1)));
            }
        }

        body:where(:not(.reduce-motion)) {

            & {
                height: 100%;
            }

            > main {
                align-items: center;

                height: 100%;


                > ul {
                    flex-direction: column;

                    width: auto;
                    overflow-y: hidden;
                    flex-wrap: unset;
                    align-items: center;

                    position: relative;

                    &::before,
                    &::after {
                        content: " ";
                        position: absolute;
                        z-index: 9;
                        height: 7.5rem;
                        width: 100%;
                        pointer-events: none;
                    }

                    &::before {
                        top: 0;
                        left: 0;
                        background: linear-gradient(to bottom, rgba(from var(--background-color) r g b / 1) 0%, rgba(from var(--background-color) r g b / 0) 100%);
                    }

                    &::after {
                        bottom: 0;
                        left: 0;
                        background: linear-gradient(to top, rgba(from var(--background-color) r g b / 1) 0%, rgba(from var(--background-color) r g b / 0) 100%);
                    }

                    > li {
                        max-height: 15rem;
                        min-height: 15rem;
                        animation: translateinfiniteY calc(var(--count) * 20s) linear infinite;
                        margin-inline: auto;
                        width: auto;
                        flex-grow: unset;
                    }

                    &:hover > li {
                        animation-play-state: paused;
                    }
                }
            }
        }
    }
}

:root {
    --visually-hidden-opacity: 0.7;
}


main {
    /* font-family: "Open Sans", sans-serif; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2vh 2vw;
    > header {
        position: relative;
        width: 100%;
        text-align: center;
        > #reduce-motion-toggle {
            position: absolute;
            inset-inline-end: 0;
        }
        > * {
            display: inline;
            margin-inline: 0.5rem;
        }

        > *:first-child {
            margin-inline-start: 0;
        }

        > *:last-child {
            margin-inline-end: 0;
        }

        margin-bottom: auto;
        padding-inline: 1rem;
    }

    > ul {
        padding: 1rem;
        list-style: none;
        gap: 2vh 1vw;

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        justify-content: space-between;
        align-content: space-between;

        margin-block: auto;

        position: relative;

        > li {
            --transition-time: 2s;
            width: clamp(20rem, 20vw, 100%);
            flex-grow: 1;
            opacity: var(--visually-hidden-opacity);
            transition-property: opacity;
            transition-timing-function: ease-out;
            transition-duration: var(--transition-time);
            filter: saturate(0.2);
        }

        > li[data-active=true],
        > li:hover {
            opacity: 1;
            filter: unset;
        }

        > li:hover {
            --transition-time: 0.2s;
        }
    }
}

p {
    overflow: hidden;
}

article {
    height: 100%;
    box-shadow: var(--shadow-elevation-medium);
    border-inline-start: 0.66rem solid var(--article-color);
    border-radius: 0.66rem;
    background-color: oklch(from var(--article-color) 1 0.01 h);
    hyphens: auto;
    word-break: auto-phrase;
    text-wrap: pretty;

    > a {
        padding: 0.66em;
        padding-inline-start: 0.2em;
        display: flex;
        gap: 0.66em;
        text-decoration: none;
        color: CanvasText;
        background: oklch(from var(--article-color), 0.1 c h);

        &:hover h1 {
            text-decoration: underline;
        }

        h1 {
            font-size: clamp(1em, 1em + 0.1vh, 1.5em);
            margin-block-end: 0.1em;
        }

        h1 + p {
            margin-block-start: 0;
        }


        aside {
            flex-grow: 0;
            flex-shrink: 0;
            flex-basis: 20%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            img {
                max-width: min(12rem, 15vw);
                max-height: min(12rem, 15vh);
                object-fit: contain;
            }
        }
    }

}