/* fredoka-regular - latin */
@font-face {
    font-display: swap;
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/fredoka-v17-latin-regular.woff2') format('woff2');
}

/* quicksand-regular - latin */
@font-face {
    font-display: swap;
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/quicksand-v37-latin-regular.woff2') format('woff2');
}

/* special-elite-regular - latin */
@font-face {
    font-display: swap;
    font-family: 'Special Elite';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/special-elite-v20-latin-regular.woff2') format('woff2'); 
}

/* Retro CRT Overlay */
.crt-filter {
    filter: contrast(1.08) brightness(1.02) saturate(1.15);
}

    .crt-filter::before {
        content: " ";
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.04));
        z-index: 9999;
        background-size: 100% 3px, 6px 100%;
        pointer-events: none;
    }

body {
    background-color: #FFF0F3;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #FFE1E6;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #FFA1B0;
    border-radius: 3px;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.floating-squirrel {
    animation: float 4s ease-in-out infinite;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeIn {
    animation: fadeIn 0.3s ease-in-out forwards;
}

/* Rich text saved from the admin editor */
.prose > * + * {
    margin-top: 1em;
}

.prose h1 {
    font-size: 1.875rem;
    font-weight: 700;
}

.prose h2 {
    font-size: 1.5rem;
    font-weight: 700;
}

.prose ul {
    list-style: disc;
    padding-left: 1.5rem;
}

.prose ol {
    list-style: decimal;
    padding-left: 1.5rem;
}

.prose blockquote {
    border-left: 4px solid #FFA1B0;
    padding-left: 1rem;
    font-style: italic;
}

.prose pre {
    background: #1e293b;
    color: #f1f5f9;
    padding: 1rem;
    border-radius: 0.75rem;
    overflow-x: auto;
    font-family: ui-monospace, monospace;
    font-size: 0.875rem;
}

.prose a {
    color: var(--color-cozyPink-600);
    text-decoration: underline;
}

.prose h3 {
    font-size: 1.25rem;
    font-weight: 700;
}

.prose h4 {
    font-weight: 700;
}

.prose hr {
    border-color: var(--color-slate-200);
}

.prose img {
    max-width: 100%;
    border-radius: 0.75rem;
}

.prose :not(pre) > code {
    padding: 0.1em 0.35em;
    border-radius: 0.375rem;
    background: var(--color-slate-100);
    font-size: 0.9em;
}

.prose table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.prose th,
.prose td {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--color-slate-200);
    text-align: left;
}

.prose th {
    background: var(--color-slate-100);
}

/* Social links on the home page profile card */
.social-tile {
    --brand: #FF7088;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    border: 1px solid var(--color-cozyPink-200);
    background-color: var(--color-cozyPink-50);
    color: var(--color-cozyPink-500);
    font-size: 1.125rem;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.social-tile:hover,
.social-tile:focus-visible {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #FFF;
    transform: translateY(-3px) rotate(-4deg);
    box-shadow: 0 6px 14px rgb(0 0 0 / 0.18);
}

/* Secondary share buttons in the gallery share modal */
.share-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.25rem;
    border-radius: 0.75rem;
    border: 1px solid var(--color-slate-200);
    background-color: var(--color-slate-50);
    color: var(--color-slate-600);
    font-size: 0.6875rem;
    font-weight: 700;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.share-option:hover,
.share-option:focus-visible {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #FFF;
}

/* Holiday Horror Countdown */
.horror-movie.is-picked {
    border-color: var(--color-cozyPink-400);
    box-shadow: 0 0 0 3px var(--color-cozyPink-200);
}

/* The Hollow Guestbook */
.ornament-red {
    --ornament: #D62839;
}

.ornament-gold {
    --ornament: #E9B314;
}

.ornament-green {
    --ornament: #2FA35F;
}

.ornament-blue {
    --ornament: #2F86D6;
}

.ornament-pink {
    --ornament: #F0719B;
}

.ornament-purple {
    --ornament: #8E5BD0;
}

.guestbook-swatch,
.guestbook-ornament {
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / 0.85) 0 8%, transparent 26%), var(--ornament);
    box-shadow: inset -3px -4px 6px rgb(0 0 0 / 0.22);
}

.guestbook-swatch {
    width: 1.75rem;
    height: 1.75rem;
}

.guestbook-ornament {
    position: absolute;
    left: var(--branch-x);
    top: var(--branch-y);
    width: 1.75rem;
    height: 1.75rem;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), outline-color 0.2s ease;
    transform-origin: 50% -30%;
}

/* Cap and string connecting each ornament to its branch */
.guestbook-ornament::before {
    content: "";
    position: absolute;
    top: -0.3rem;
    left: 50%;
    width: 0.5rem;
    height: 0.35rem;
    border-radius: 2px 2px 0 0;
    background: #C9B37A;
    transform: translateX(-50%);
}

.guestbook-ornament::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 1px;
    height: 0.85rem;
    background: #8B5A2B;
    transform: translateY(-0.25rem);
}

.guestbook-ornament:hover,
.guestbook-ornament:focus-visible,
.guestbook-ornament.is-selected {
    transform: translate(-50%, -50%) rotate(8deg) scale(1.2);
}

.guestbook-ornament.is-selected {
    outline: 2px solid var(--color-cozyPink-400);
    outline-offset: 2px;
}

html.christmas .guestbook-ornament {
    left: var(--tree-x);
    top: var(--tree-y);
}

html.christmas .guestbook-ornament::after {
    display: none;
}

/* Seasonal decorations */
.xmas-only,
.birthday-only {
    display: none;
}

html.christmas .xmas-only,
html.birthday .birthday-only {
    display: inline;
}

html.christmas .no-xmas,
html.birthday .santa-hat {
    display: none;
}

/* Year-round easter eggs */
.easter-egg-dialog {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgb(2 6 23 / 0.7);
    animation: fadeIn 0.2s ease-out forwards;
}

.easter-egg-dialog-card {
    width: 100%;
    max-width: 26rem;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.5rem;
    border-radius: 1.5rem;
    border: 2px solid var(--color-cozyPink-200);
    background: #FFF;
    color: var(--color-slate-700);
    text-align: center;
    box-shadow: 0 25px 50px rgb(0 0 0 / 0.3);
}

html.dark .easter-egg-dialog-card {
    background: var(--card-bg);
}

.easter-egg-dialog-card h2 {
    font-family: var(--font-title);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-slate-800);
}

.easter-egg-dialog-body {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.easter-egg-dialog-body.is-recipe {
    text-align: left;
}

.easter-egg-dialog-body.is-recipe h3 {
    margin: 1rem 0 0.375rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-slate-500);
}

.easter-egg-dialog-body.is-recipe ul,
.easter-egg-dialog-body.is-recipe ol {
    padding-left: 1.25rem;
    font-size: 0.8125rem;
}

.easter-egg-dialog-body.is-recipe ul {
    list-style: disc;
}

.easter-egg-dialog-body.is-recipe ol {
    list-style: decimal;
}

.easter-egg-dialog-body.is-recipe li + li {
    margin-top: 0.25rem;
}

.easter-egg-recipe-vitals {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-cozyPink-600);
}

.easter-egg-recipe-note {
    margin-top: 1rem;
    padding: 0.75rem;
    border-radius: 0.75rem;
    background: var(--color-amber-50);
    color: var(--color-amber-800);
    font-size: 0.75rem;
    font-style: italic;
}

.easter-egg-dialog-time {
    margin-bottom: 0.5rem;
    font-family: ui-monospace, monospace;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-cozyPink-500);
}

.easter-egg-dialog-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.easter-egg-dialog-actions button {
    padding: 0.625rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--color-slate-200);
    background: var(--color-slate-50);
    color: var(--color-slate-700);
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.easter-egg-dialog-actions button:hover {
    background: var(--color-slate-100);
}

.easter-egg-dialog-actions button.is-primary {
    border-color: transparent;
    background: var(--color-cozyPink-400);
    color: #FFF;
}

.easter-egg-dialog-actions button.is-primary:hover {
    background: var(--color-cozyPink-500);
}

.stash-acorn {
    display: inline-block;
    font-size: 0.75rem;
    line-height: 1;
    vertical-align: middle;
    opacity: 0.3;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.stash-acorn:hover,
.stash-acorn:focus-visible {
    opacity: 1;
    transform: scale(1.5) rotate(-12deg);
}

html.golden-squirrel #squirrel-svg {
    filter: sepia(1) saturate(4) hue-rotate(-8deg) brightness(1.15) drop-shadow(0 0 8px #FACC15);
}

/* Christmas easter eggs */
.easter-egg-toast {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 3100;
    max-width: calc(100vw - 3rem);
    padding: 0.625rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgb(255 255 255 / 0.15);
    background: #0F172A;
    color: #FBCFE8;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 10px 25px rgb(0 0 0 / 0.3);
    animation: fadeIn 0.3s ease-in-out forwards;
}

#snow-pile {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 31;
    height: 0;
    background: #FFF;
    box-shadow: inset 0 -10px 20px rgb(148 163 184 / 0.25);
    pointer-events: none;
    transition: height 10s linear;
}

/* Lumpy top edge of the snow */
#snow-pile::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% - 1px);
    height: 28px;
    background: radial-gradient(ellipse 50px 28px at 50% 100%, #FFF 98%, transparent) 0 0 / 90px 28px repeat-x;
}

#snow-pile.is-full {
    height: 20vh;
}

.snow-plow-squirrel {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 32;
    font-size: 3rem;
    line-height: 1.2;
    pointer-events: none;
}

.cocoa-marshmallow,
.birthday-confetti {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3050;
    pointer-events: none;
}

.cocoa-marshmallow {
    width: 18px;
    height: 14px;
    border-radius: 5px;
    background: #FFF;
    border: 1px solid #F8D7DF;
    box-shadow: inset -2px -2px 3px rgb(244 180 196 / 0.6);
}

.birthday-confetti {
    width: 8px;
    height: 12px;
    border-radius: 2px;
}

.krampus-visitor {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 45;
    width: 110px;
    pointer-events: none;
}

/* A badly animated costume, on purpose */
.krampus-visitor svg {
    display: block;
    transform-origin: 50% 100%;
    animation: krampus-shuffle 0.7s steps(2) infinite alternate;
}

@keyframes krampus-shuffle {
    from {
        transform: rotate(-5deg);
    }

    to {
        transform: rotate(5deg) translateY(-4px);
    }
}

.krampus-coal {
    position: fixed;
    bottom: 10px;
    z-index: 46;
    width: 34px;
    height: 26px;
    border-radius: 45% 55% 50% 40%;
    background: radial-gradient(circle at 35% 30%, #4B5563, #111827 70%);
    border: 1px solid #6B7280;
    box-shadow: 0 3px 6px rgb(0 0 0 / 0.35);
    cursor: pointer;
    animation: fadeIn 0.3s ease-in-out forwards;
}

.krampus-coal:hover,
.krampus-coal:focus-visible {
    outline: 2px solid #F87171;
    outline-offset: 2px;
}

#cocoa-mug {
    margin-left: 0.25rem;
    cursor: pointer;
    transition: transform 0.2s ease;
}

#cocoa-mug svg {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -2px;
}

#cocoa-mug:hover {
    transform: scale(1.3) rotate(-6deg);
}

#snow-layer,
#snow-day-layer {
    position: fixed;
    inset: 0;
    z-index: 30;
    overflow: hidden;
    pointer-events: none;
}

#snow-layer span,
#snow-day-layer span {
    position: absolute;
    top: -12px;
    width: var(--flake-size);
    height: var(--flake-size);
    border-radius: 50%;
    background: #FFF;
    box-shadow: 0 0 3px rgb(100 116 139 / 0.5);
    opacity: 0.85;
    animation: snowfall linear infinite;
}

@keyframes snowfall {
    to {
        transform: translate(var(--flake-drift), 105vh);
    }
}

#christmas-lights {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 34px;
    display: flex;
    gap: 26px;
    padding: 0 13px;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(#14532D, #14532D) top / 100% 2px no-repeat;
}

#christmas-lights span {
    position: relative;
    flex: none;
    width: 9px;
    height: 13px;
    margin-top: 5px;
    border-radius: 50% 50% 48% 48%;
    color: #FF3B47;
    background-color: currentColor;
    box-shadow: 0 0 6px 2px currentColor, 0 0 16px 4px currentColor;
    animation: light-twinkle ease-in-out infinite;
}

#christmas-lights span:nth-child(4n + 2) {
    color: #FFD54A;
}

#christmas-lights span:nth-child(4n + 3) {
    color: #35E06F;
}

#christmas-lights span:nth-child(4n + 4) {
    color: #4FC3FF;
}

/* Easter egg: each bulb can be popped, with a larger area to click */
#christmas-lights span {
    pointer-events: auto;
    cursor: pointer;
}

#christmas-lights span::after {
    content: "";
    position: absolute;
    inset: -5px -8px -8px;
}

#christmas-lights span.is-popped {
    color: #6B7280;
    opacity: 0.45;
    box-shadow: none;
    animation: none;
}

.lights-repair-squirrel {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 2px;
    font-size: 1.5rem;
    line-height: 1;
    pointer-events: none;
}

/* Socket joining each bulb to the wire */
#christmas-lights span::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 2px;
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: #14532D;
}

@keyframes light-twinkle {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 6px 2px currentColor, 0 0 16px 4px currentColor;
    }

    50% {
        opacity: 0.35;
        box-shadow: 0 0 2px 0 currentColor;
    }
}

@media (prefers-reduced-motion: reduce) {
    #christmas-lights span {
        animation: none;
    }
}

/* Soundboard card: slides out from behind the profile, then comes around to cover it */
#soundboard-card {
    visibility: hidden;
    z-index: 0;
}

#soundboard-card.is-open {
    visibility: visible;
    z-index: 20;
    animation: soundboard-card-in 0.7s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

#soundboard-card.is-closing {
    visibility: visible;
    animation: soundboard-card-out 0.6s ease-in-out both;
}

@keyframes soundboard-card-in {
    0%, 45% {
        z-index: 0;
    }

    0% {
        transform: none;
    }

    45% {
        transform: translate(58%, -3%) rotate(7deg);
    }

    46%, 100% {
        z-index: 20;
    }

    100% {
        transform: none;
    }
}

@keyframes soundboard-card-out {
    0%, 50% {
        z-index: 20;
    }

    0% {
        transform: none;
    }

    50% {
        transform: translate(58%, -3%) rotate(7deg);
    }

    51%, 100% {
        z-index: 0;
    }

    100% {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #soundboard-card.is-open {
        animation: none;
    }

    #soundboard-card.is-closing {
        visibility: hidden;
        animation: none;
    }
}

/* ============================================================
   THEME COLORS
   The compiled Tailwind utilities read these variables, so changing
   them restyles every page, including hover states and gradients.
============================================================ */
html.christmas {
    --page-bg: #F2F8F3;
    --color-cozyPink-50: #EEF7F0;
    --color-cozyPink-100: #DCEFE1;
    --color-cozyPink-200: #BFE0C7;
    --color-cozyPink-300: #E59AA2;
    --color-cozyPink-400: #C8202F;
    --color-cozyPink-500: #AD1727;
    --color-cozyPink-600: #15803D;
}

html.christmas body {
    background-color: var(--page-bg);
}

html.dark {
    color-scheme: dark;
    --page-bg: #181220;
    --card-bg: #241B2D;

    /* bg-slate-900 and bg-slate-950 stay dark: they sit behind white text */
    --color-slate-50: #2C2236;
    --color-slate-100: #33283E;
    --color-slate-200: #44364F;
    --color-slate-300: #5E4F69;
    --color-slate-400: #A394AD;
    --color-slate-500: #B9ACC2;
    --color-slate-600: #CFC4D6;
    --color-slate-700: #E1D8E6;
    --color-slate-800: #F2EBF5;
    --color-gray-100: #33283E;
    --color-gray-200: #44364F;
    --color-gray-600: #CFC4D6;
    --color-gray-700: #E1D8E6;
    --color-gray-900: #F2EBF5;
    --color-gray-950: #F2EBF5;

    --color-cozyPink-50: rgb(255 112 136 / 0.1);
    --color-cozyPink-100: rgb(255 112 136 / 0.18);
    --color-cozyPink-200: rgb(255 112 136 / 0.3);
    --color-cozyPink-300: rgb(255 112 136 / 0.5);
    --color-cozyPink-500: #FF6078;
    --color-cozyPink-600: #FF8FA3;
    --color-squirrelBrown-500: #E0B595;
    --color-squirrelBrown-600: #E0B595;

    --color-amber-50: rgb(245 158 11 / 0.1);
    --color-amber-100: rgb(245 158 11 / 0.18);
    --color-amber-200: rgb(245 158 11 / 0.3);
    --color-amber-300: rgb(245 158 11 / 0.45);
    --color-amber-700: #FCD34D;
    --color-amber-800: #FCD34D;
    --color-emerald-50: rgb(16 185 129 / 0.1);
    --color-emerald-100: rgb(16 185 129 / 0.18);
    --color-emerald-200: rgb(16 185 129 / 0.3);
    --color-emerald-300: rgb(16 185 129 / 0.45);
    --color-emerald-800: #6EE7B7;
    --color-purple-50: rgb(168 85 247 / 0.1);
    --color-purple-100: rgb(168 85 247 / 0.18);
    --color-purple-200: rgb(168 85 247 / 0.3);
    --color-purple-300: rgb(168 85 247 / 0.45);
    --color-sky-50: rgb(14 165 233 / 0.1);
    --color-sky-100: rgb(14 165 233 / 0.18);
    --color-sky-200: rgb(14 165 233 / 0.3);
    --color-sky-300: rgb(14 165 233 / 0.45);
    --color-sky-700: #7DD3FC;
    --color-sky-800: #7DD3FC;
    --color-rose-50: rgb(244 63 94 / 0.1);
    --color-rose-100: rgb(244 63 94 / 0.18);
    --color-rose-200: rgb(244 63 94 / 0.3);
    --color-rose-300: rgb(244 63 94 / 0.45);
    --color-rose-700: #FDA4AF;
    --color-rose-800: #FDA4AF;
    --color-blue-50: rgb(59 130 246 / 0.1);
    --color-blue-100: rgb(59 130 246 / 0.18);
    --color-blue-700: #93C5FD;
    --color-red-50: rgb(239 68 68 / 0.1);
    --color-red-100: rgb(239 68 68 / 0.18);
    --color-orange-50: rgb(249 115 22 / 0.1);
    --color-orange-100: rgb(249 115 22 / 0.18);
    --color-pink-100: rgb(236 72 153 / 0.18);
    --color-pink-700: #F9A8D4;
    --color-yellow-100: rgb(234 179 8 / 0.12);
}

/* Dark Christmas: green-tinted night sky with brighter festive accents */
html.dark.christmas {
    --page-bg: #0F1A15;
    --card-bg: #18271F;
    --color-slate-50: #1F3127;
    --color-slate-100: #263A2E;
    --color-slate-200: #34493C;
    --color-slate-300: #4C6355;
    --color-cozyPink-50: rgb(34 197 94 / 0.1);
    --color-cozyPink-100: rgb(34 197 94 / 0.18);
    --color-cozyPink-200: rgb(34 197 94 / 0.3);
    --color-cozyPink-300: rgb(248 113 113 / 0.55);
    --color-cozyPink-400: #DC2626;
    --color-cozyPink-500: #F87171;
    --color-cozyPink-600: #4ADE80;
}

html.dark body {
    background-color: var(--page-bg);
}

/* These reuse variables that also color text or buttons, so they are set directly */
html.dark .bg-white,
html.dark .hover\:bg-white:hover {
    background-color: var(--card-bg);
}

html.dark .bg-white\/95,
html.dark .bg-white\/90,
html.dark .bg-white\/85,
html.dark .bg-white\/70 {
    background-color: color-mix(in srgb, var(--card-bg) 92%, transparent);
}

html.dark .to-white {
    --tw-gradient-to: transparent;
}

html.dark .via-white {
    --tw-gradient-via: transparent;
}

html.dark .text-slate-900 {
    color: #F2EBF5;
}

html.dark .text-purple-600,
html.dark .text-purple-700,
html.dark .hover\:text-purple-600:hover,
html.dark .hover\:text-purple-700:hover,
html.dark .group-hover\:text-purple-600:is(:where(.group):hover *) {
    color: #D8B4FE;
}

html.dark .text-emerald-600,
html.dark .text-emerald-700,
html.dark .hover\:text-emerald-700:hover,
html.dark .group-hover\:text-emerald-700:is(:where(.group):hover *) {
    color: #6EE7B7;
}

html.dark .text-amber-600,
html.dark .hover\:text-amber-700:hover {
    color: #FCD34D;
}

html.dark .text-rose-600,
html.dark .hover\:text-rose-700:hover {
    color: #FDA4AF;
}

html.dark .text-blue-600,
html.dark .hover\:text-blue-700:hover {
    color: #93C5FD;
}

html.dark .text-sky-600 {
    color: #7DD3FC;
}

html.dark .text-red-600,
html.dark .text-orange-600 {
    color: #FDBA74;
}

html.dark .prose pre {
    background: #120D18;
}

html.christmas .custom-scrollbar::-webkit-scrollbar-track {
    background: var(--color-cozyPink-100);
}

html.christmas .custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--color-cozyPink-400);
}

html.dark .custom-scrollbar::-webkit-scrollbar-track {
    background: var(--page-bg);
}

html.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--color-slate-300);
}