/* Style */
@media not (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: auto;
    }

    ::view-transition-group(site-content) {
        animation-duration: 500ms;
        animation-timing-function: ease-in-out;
    }

    ::view-transition-old(site-content) {
        z-index: 1;
        animation: animation-site-content-old 400ms ease-in-out;
    }

    ::view-transition-new(site-content) {
        z-index: 2;
        animation: animation-site-content-new 400ms ease-in-out;
    }
}

@keyframes animation-site-content-old {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }

    50% {
        transform: translate(-2em, 0);
        opacity: 1;
    }

    100% {
        transform: translate(0, 0);
        opacity: 0;
    }
}

@keyframes animation-site-content-new {
    0% {
        transform: translate(24em, 0);
        opacity: 0;
    }

    30% {
        opacity: 0;
    }

    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

:root {
    color-scheme: light dark;

    --highlight-color: light-dark(oklch(0.93 0.1 91), oklch(0.21 0.03 235));
    --page-background-color: light-dark(
        oklch(from var(--highlight-color) 1 calc(c - 0.075) h),
        oklch(from var(--highlight-color) calc(l + 0.065) c h)
    );
    --content-background-color: light-dark(
        oklch(from var(--highlight-color) 1 calc(c - 0.085) h),
        oklch(from var(--highlight-color) calc(l + 0.032) c h)
    );
    --text-color: light-dark(rgb(22 22 22), rgb(233 233 233));
}

html {
    background-color: var(--page-background-color);
    color: var(--text-color);
    font-size: 1.1em;
    font-family: "Ubuntu", system-ui, sans-serif;
}

a {
    color: inherit;
}

pre,
code {
    font-family: "Ubuntu Mono", monospace;
}

pre {
    overflow: auto;
    padding: 1em;
    background-color: light-dark(
        var(--page-background-color),
        var(--highlight-color)
    ) !important;
}

hr {
    margin-block: 3em;
    margin-inline: auto;
    width: 25%;
    background-color: var(--highlight-color);
    border: none;
    height: 2px;
}

body {
    margin: 0;

    & > .site-wrapper {
        position: relative;
        max-width: 48em;
        margin-inline: auto;
        margin-block: 3em;
        padding-inline: 2em;

        & > .site-pre-pre-content {
            position: absolute;
            top: -1.8em;
            width: calc(88% - 2 * 2em);
            left: calc(6% + 2em);
            right: 0;
            height: 100px;
            background-color: oklch(
                from var(--highlight-color) calc(l - 0.06) c h
            );
            border-radius: 2em;
            box-shadow: 1em 1em 3em 0 oklch(0 0 0 / 0.2);
            z-index: 1;
        }

        & > .site-pre-content {
            position: absolute;
            top: -1em;
            width: calc(94% - 2 * 2em);
            left: calc(3% + 2em);
            right: 0;
            height: 100px;
            background-color: oklch(
                from var(--highlight-color) calc(l - 0.03) c h
            );
            border-radius: 2em;
            box-shadow: 1em 1em 3em 0 oklch(0 0 0 / 0.2);
            z-index: 2;
        }

        & > .site-content {
            position: relative;
            background-color: var(--content-background-color);
            border-radius: 2em;
            box-shadow: 1em 1em 3em 0 oklch(0 0 0 / 0.2);
            border: 1px solid var(--highlight-color);
            z-index: 3;
            view-transition-name: site-content;

            & > header {
                padding-block: 1.1em 0.9em;
                padding-inline: 2em;
                background-color: var(--highlight-color);
                border-radius: 2em 2em 0 0;

                & > .js-btn-open-main-menu {
                    background: var(--content-background-color);
                    border: none;
                    padding: 1em;
                    border-radius: 2em;
                    cursor: pointer;
                    width: 100%;

                    @media (min-width: 580px) {
                        display: none;
                    }
                }

                & > nav {
                    display: none;

                    & > ul {
                        display: flex;
                        flex-direction: column;
                        flex-wrap: wrap;
                        list-style: none;
                        margin: 0;
                        padding: 0;
                        align-items: center;

                        & > li {
                            display: block;

                            &:first-child {
                                font-size: 1.3em;
                            }

                            & > a {
                                display: block;
                                padding: clamp(0.4em, 1vw, 0.8em);

                                &.active {
                                    font-weight: bold;
                                    color: light-dark(
                                        oklch(
                                            from var(--highlight-color)
                                                calc(l - 0.5) c h
                                        ),
                                        oklch(
                                            from var(--highlight-color)
                                                calc(l + 0.5) c h
                                        )
                                    );
                                }
                            }
                        }
                    }

                    @media (min-width: 580px) {
                        display: block !important;

                        & > ul {
                            flex-direction: row;
                            gap: min(0.8em, 1vw);
                        }
                    }
                }
            }

            & > main {
                padding: 2em;
            }

            & > footer {
                border-block-start: 1px solid var(--highlight-color);
                padding: 2em;

                & > ul {
                    display: flex;
                    list-style: none;
                    gap: 1.4em;
                    margin: 0;
                    padding: 0;
                    flex-wrap: wrap;
                    justify-content: center;

                    & > li {
                        display: block;
                    }
                }
            }
        }
    }
}