:root,
:host {
    --pagination-background: #181118;
    --pagination-text: #ecdfe8;
    --pagination-border: #9c8c9a;
    --pagination-hover: #91379f;
    --pagination-active-border: #ffcaff;
    --pagination-active-color: #ecdfe8;
}

section:nth-of-type(2) pagination-component {
    --pagination-background: #f8f9ff;
    --pagination-text: #191c21;
    --pagination-border: #717783;
    --pagination-hover: #a4c9ff;
    --pagination-active-border: #005193;
    --pagination-active-color: #191c21;
}

section:nth-of-type(3) pagination-component {
    --pagination-background: #151218;
    --pagination-text: #e7e0e9;
    --pagination-border: #958e9c;
    --pagination-hover: #7049ad;
    --pagination-active-border: #d5baff;
    --pagination-active-color: #e7e0e9;
}

section:nth-of-type(5) pagination-component {
    --pagination-background: #f9faed;
    --pagination-text: #1a1d15;
    --pagination-border: #747967;
    --pagination-hover: #abd460;
    --pagination-active-border: #3d5800;
    --pagination-active-color: #1a1d15;
}

body {
    font-family: system-ui, sans-serif;
    margin: 40px auto;
    max-inline-size: 700px;
    padding: 0 20px;
}

header {
    position: fixed;
    inset-inline-end: 0;
    inset-block-start: 0;
    z-index: 1;
}

.github-corner {
    fill: var(--pagination-text);
    color: var(--pagination-background);
}

.github-corner:hover .octocat .arm {
    animation: wave 560ms ease-in-out;
}


@keyframes wave {

    0%,
    100% {
        rotate: 0;
    }

    20%,
    60% {
        rotate: -25deg;
    }

    40%,
    80% {
        rotate: 10deg;
    }
}


section {
    margin-block-end: 60px;
}

h2 {
    font-size: 1.25rem;
    margin-block-end: 8px;
}

pre {
    background: var(--pagination-text);
    padding: 8px;
    font-size: 0.9rem;
    overflow-x: auto;
}