splitby 1.2.5

Split text by a regex delimiter — a powerful, multi-threaded alternative to cut
@font-face {
    font-family: "BalooDa2";
    src: url("/fonts/Baloo_Da_2/static/BalooDa2-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Theme tokens for easy adjustments */
:root {
    --yellow: rgb(255, 217, 0);
    --purple: blueviolet;
    --yellow-hover: rgb(255, 229, 82);
    --grey: hsl(0, 0%, 16%);

    header {
        /* background-color: black; */
        .site-title {
            /* color: var(--yellow); */
            font-family: "BalooDa2";
            letter-spacing: -0.02em;
            font-size: 2rem;
        }
    }
    main {
        #_top {
            font-family: "BalooDa2";
            font-size: 5rem;
            letter-spacing: -0.03em;
        }
        img {
            object-position: 0 -5px;
            object-fit: cover;
            height: calc(100% + 5px);
        }
    }
}

:root[data-theme="dark"] {
    --sl-color-text-accent: var(--yellow);
    --sl-color-bg-nav: black;
    --sl-color-bg-sidebar: black;

    html,
    body {
        scrollbar-color: var(--yellow) black;
    }

    header {
        background-color: black;
        .site-title {
            color: var(--yellow);
        }
        .social-icons {
            a {
                color: white;
                &:hover {
                    color: var(--purple);
                    opacity: 1;
                }
            }
        }
        dialog {
            background-color: var(--grey);
            color: white;
            border: 2px solid black;
            .pagefind-ui__result-nested {
                ::before {
                    color: blueviolet;
                }
            }
        }
    }
    nav {
        starlight-menu-button {
            button {
                background-color: var(--yellow);
                color: black;
                &:hover {
                    background-color: var(--purple);
                    color: white;
                }
            }
        }
    }
    .sidebar-pane {
        a:hover {
            &[aria-current="page"] {
                color: black;
                background-color: var(--yellow-hover);
            }
            /* text-decoration-line: underline;
            text-decoration-color: var(--purple); */
            /* color: var(--purple); */
        }
    }
    main {
        color: hsl(224, 10, 23);
        #_top {
            color: var(--yellow);
        }
        .sl-link-button {
            &.primary {
                border: none;
                background-color: var(--yellow);
                &:hover {
                    /* background-color: var(--yellow-hover); */
                    background-color: var(--purple);
                    color: white;
                }
            }
            &.minimal {
                background-color: var(--grey);
            }
        }
        .sl-markdown-content {
            a:hover {
                color: rgb(169, 107, 227);
            }
        }
    }
}

:root[data-theme="light"] {
    --yellow: #eec50f;
    --purple-hover: rgb(176, 92, 255);
    --sidebar-background: var(--yellow);

    --sl-color-hairline: black;
    /* --sl-color-gray-1: black; */
    /* --sl-color-gray-2: black; */
    /* --sl-color-gray-3: black; */
    /* --sl-color-gray-4: black; */
    --sl-color-gray-5: black;
    --sl-color-gray-6: black;
    /* --sl-color-gray-7: black; */
    /* --sl-color-gray-8: black; */
    /* --sl-color-gray-9: black; */
    /* --sl-icon-color: var(--purple); */
    --sl-color-text-accent: blueviolet;
    --sl-color-bg-inline-code: var(--yellow);

    html,
    body {
        background-color: var(--yellow);
        scrollbar-color: blueviolet var(--yellow);
    }

    header {
        /* border-bottom: 2px solid black; */
        /* border: none; */
        background-color: var(--yellow);
        /* background-color: var(--yellow); */
        .site-title {
            color: black;
            img {
                background-color: var(--grey);
                border-radius: 4px;
                padding: 4px;
            }
        }
        site-search {
            kbd {
                background-color: lightgrey;
            }
            dialog {
                background-color: var(--yellow);
                border: 2px solid black;
                .pagefind-ui__result-nested {
                    ::before {
                        color: blueviolet;
                    }
                }
            }
        }
        .social-icons {
            a {
                color: black;
                &:hover {
                    color: var(--purple);
                    opacity: 1;
                }
            }
        }
        starlight-theme-select {
            label {
                &:hover {
                    color: var(--purple);
                }
            }
        }
    }
    .sidebar-pane {
        background-color: var(--sidebar-background);
        a[aria-current="page"] {
            color: white;
            background-color: var(--purple);
            &:hover {
                color: white;
                background-color: var(--purple-hover);
            }
        }
        a:hover {
            text-decoration: underline;
        }
    }
    nav {
        background-color: var(--sidebar-background);
        starlight-menu-button {
            button {
                border: 1px solid black;
                background-color: lightgrey;
                color: black;
                &:hover {
                    background-color: var(--purple);
                    color: white;
                }
            }
        }
    }
    aside {
        background-color: var(--sidebar-background);
    }
    main {
        /* color: hsl(224, 10, 23); */
        background-color: var(--yellow);
        color: black;
        border-color: black;

        #_top {
            font-family: "BalooDa2";
            font-size: 5rem;
            color: black;
            letter-spacing: -0.03em;
        }
        .sl-link-button {
            &.primary {
                border: 2px solid black;
                background-color: lightgrey;
                color: black;
                &:hover {
                    /* background-color: var(--yellow-hover); */
                    background-color: var(--purple);
                    color: white;
                }
            }
            &.minimal {
                background-color: var(--grey);
            }
        }
        .sl-markdown-content {
            a:hover {
                color: rgb(169, 107, 227);
            }
        }

        figcaption {
            background: lightgrey;
        }

        img {
            /* background-color: white; */
            background-color: var(--grey);
            padding: 10px;
            border: 2px solid black;
            border-radius: 20px;
        }
        code[dir="auto"] {
            background-color: var(--yellow);
            border: 1px solid black;
        }

        .copy {
            button {
                &:hover {
                    background-color: var(--yellow-hover);
                }
                div::before {
                    opacity: 1;
                }
                div {
                    opacity: 0;
                }
                div::after {
                    opacity: 1;
                }
            }
        }
    }
}