:root.dark {
    --yctt-backdrop: #17212b;
    --yctt-card-back: #172233;
    --yctt-color-primary: #a0b1ca;
    --yctt-color-head: #acb4ca;
    --yctt-color-border: #454353;
    --yctt-color-link: #a3b8dd;
    --yctt-back-primary: #3e3c57;
    --yctt-back-secondary: #2d2c3e;
}

:where(html) {
    --ease-1: cubic-bezier(.25, 0, .5, 1);
    --ease-2: cubic-bezier(.25, 0, .4, 1);
    --ease-3: cubic-bezier(.25, 0, .3, 1);
    --ease-4: cubic-bezier(.25, 0, .2, 1);
    --ease-5: cubic-bezier(.25, 0, .1, 1);
    --ease-elastic-1: cubic-bezier(.5, .75, .75, 1.25);
    --ease-elastic-2: cubic-bezier(.5, 1, .75, 1.25);
    --ease-elastic-3: cubic-bezier(.5, 1.25, .75, 1.25);
    --ease-elastic-4: cubic-bezier(.5, 1.5, .75, 1.25);
    --ease-elastic-5: cubic-bezier(.5, 1.75, .75, 1.25);
    --ease-in-1: cubic-bezier(.25, 0, 1, 1);
    --ease-in-2: cubic-bezier(.50, 0, 1, 1);
    --ease-in-3: cubic-bezier(.70, 0, 1, 1);
    --ease-in-4: cubic-bezier(.90, 0, 1, 1);
    --ease-in-5: cubic-bezier(1, 0, 1, 1);
    --ease-in-out-1: cubic-bezier(.1, 0, .9, 1);
    --ease-in-out-2: cubic-bezier(.3, 0, .7, 1);
    --ease-in-out-3: cubic-bezier(.5, 0, .5, 1);
    --ease-in-out-4: cubic-bezier(.7, 0, .3, 1);
    --ease-in-out-5: cubic-bezier(.9, 0, .1, 1);
    --ease-out-1: cubic-bezier(0, 0, .75, 1);
    --ease-out-2: cubic-bezier(0, 0, .50, 1);
    --ease-out-3: cubic-bezier(0, 0, .3, 1);
    --ease-out-4: cubic-bezier(0, 0, .1, 1);
    --ease-out-5: cubic-bezier(0, 0, 0, 1);
    --ease-squish-1: cubic-bezier(.5, -.1, .1, 1.5);
    --ease-squish-2: cubic-bezier(.5, -.3, .1, 1.5);
    --ease-squish-3: cubic-bezier(.5, -.5, .1, 1.5);
    --ease-squish-4: cubic-bezier(.5, -.7, .1, 1.5);
    --ease-squish-5: cubic-bezier(.5, -.9, .1, 1.5);
    --ease-step-1: steps(2);
    --ease-step-2: steps(3);
    --ease-step-3: steps(4);
    --ease-step-4: steps(7);
    --ease-step-5: steps(10);
}

html.dark {
    background: rgba(15, 23, 42);
}

.theme-toggle {
    --size: 2rem;
    aspect-ratio: 1;
    background: none;
    block-size: var(--size);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    --icon-fill: #e4e865;
    --icon-fill-hover: #eee;
    inline-size: var(--size);
    outline-offset: 5px;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.dark .theme-toggle {
    --icon-fill: hsl(210 10% 70%);
    --icon-fill-hover: hsl(210 15% 90%);
}

.theme-toggle > svg {
    block-size: 100%;
    inline-size: 100%;
    stroke-linecap: round;
}

.sun-and-moon > :is(.moon, .sun, .sun-beams) {
    transform-origin: center center;
}

.sun-and-moon > :is(.moon, .sun) {
    fill: var(--icon-fill);
}

.theme-toggle:is(:hover, :focus-visible) > .sun-and-moon > :is(.moon, .sun) {
    fill: var(--icon-fill-hover);
}

.dark .sun-and-moon > .moon > circle {
    transform: translate(-7px);
}

.dark .sun-and-moon > .sun {
    transform: scale(1.75);
}

.sun-and-moon > .sun-beams {
    stroke: var(--icon-fill);
    stroke-width: 2px;
}

.dark .sun-and-moon > .sun-beams {
    opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .sun-and-moon .moon > circle {
        transition: transform .25s var(--ease-out-5);
    }

    .dark .sun-and-moon > .moon > circle {
        transition-delay: .25s;
        transition-duration: .5s;
    }

    .sun-and-moon > .sun {
        transition: transform .5s var(--ease-elastic-3);
    }

    .dark .sun-and-moon > .sun {
        transform: scale(1.75);
        transition-duration: .25s;
        transition-timing-function: var(--ease-3);
    }

    .sun-and-moon > .sun-beams {
        transition: transform .5s var(--ease-elastic-4), opacity .5s var(--ease-3);
    }

    .dark .sun-and-moon > .sun-beams {
        transform: rotate(-25deg);
        transition-duration: .15s;
    }
}