@media (prefers-reduced-motion: reduce) {
    :root {
        scroll-behavior: auto;
    }
}

@media (forced-colors: active),
(-ms-high-contrast: active),
(prefers-contrast: more),
(inverted-colors: inverted) {
    :root {
        --body-bkg: Canvas;
        --header-bkg: Canvas;
        --main-bkg: Canvas;
        --footer-bkg: Canvas;
        --section-a-bkg: Canvas;
        --section-b-bkg: Canvas;
        --section-c-bkg: Canvas;
        --text-clr: CanvasText;
        --heading-clr: CanvasText;
        --heading-span-clr: CanvasText;
        --section-b-h2-clr: CanvasText;
        --section-c-h2-clr: CanvasText;
        --h3-clr: CanvasText;
        --footer-clr: CanvasText;
        --ul-clr: CanvasText;
        --link-clr: LinkText;
        --link-vis-clr: VisitedText;
        --border-clr: CanvasText;
        --pill-clr: ButtonFace;
        --cta-text-clr: ButtonText;
        --cta-bkg: ButtonFace;
        --cta-txt: ButtonText;
        --cta-left: ButtonFace;
        --cta-left-lite: ButtonFace;
        --sec-bkg: ButtonFace;
        --sec-txt: ButtonText;
    }

    * {
        text-shadow: none !important;
        box-shadow: none !important;
        mix-blend-mode: normal !important;
        filter: none !important;
    }

    .glass,
    .frosted,
    .translucent {
        backdrop-filter: none !important;
        background: Canvas !important;
        opacity: 1;
    }

    :where(a, button, .pill, .nav-link):focus-visible {
        outline: 5px solid Highlight !important;
        outline-offset: 3px !important;
        background: none;
    }
    
    :where(main .pill):focus-visible {
        outline: 5px solid white !important;
        outline-offset: 3px !important;
    }

    ::selection {
        background: Highlight !important;
        color: HighlightText !important;
    }

    a {
        color: LinkText !important;
        text-decoration-color: currentColor !important;
    }

    a:visited {
        color: VisitedText !important;
    }

    a:hover,
    a:active {
        color: ActiveText !important;
    }

    .about a,
    .enkel a,
    .intro a,
    footer a {
        color: LinkText !important;
    }

    .about a:visited,
    .enkel a:visited,
    .intro a:visited,
    footer a:visited {
        color: VisitedText !important;
    }

    .about a:hover,
    .about a:active,
    .enkel a:hover,
    .enkel a:active,
    .intro a:hover,
    .intro a:active,
    footer a:hover,
    footer a:active {
        color: ActiveText !important;
    }

    .pill,
    .cta,
    .sec {
        border-color: CanvasText !important;
    }
    
    main .pill,
    main .cta,
    main .sec {
        border-color: white !important;
    }

    .cta {
        background: ButtonFace !important;
        color: ButtonText !important;
    }

    .cta:hover,
    .cta:active,
    .cta:focus-visible {
        background: Canvas !important;
        color: CanvasText !important;
    }

    .sec {
        background: ButtonFace !important;
        color: ButtonText !important;
    }

    .sec:hover,
    .sec:active,
    .sec:focus-visible {
        background: Canvas !important;
        color: CanvasText !important;
    }

    .sec::after,
    .sec:hover::after,
    .sec:active::after,
    .sec:focus-visible::after {
        color: currentColor !important;
    }

    svg,
    svg * {
        fill: currentColor !important;
    }

    header svg circle {
        display: none !important;
    }
}