html
  --color-mode: "light"
  --light: #fff
  --dark:  rgb(28,28,30)
  --haze: #f2f5f7
  --bubble: rgb(36,36,38)
  --accent: var(--haze)
  --bg: var(--light)
  --overlay: var(--light)
  --text: #111
  --font: 'Metropolis', sans-serif
  --border-color: #eee
  --theme: rgb(52,199,89)

  @mixin darkmode
    --color-mode: "dark"
    --theme: rgb(48,209,88)
    --bg: var(--dark)
    --text: #eee
    --accent: var(--bubble)
    --overlay: var(--bubble)
    --border-color: transparent
    *
      box-shadow: none !important

  &[data-mode="dark"]
    @include darkmode
    .color
      &_choice
        &::after
          transform: translateX(1.75rem) scale(1.67)

  &.dark:not([data-mode="light"])
    @media (prefers-color-scheme: dark)
      @include darkmode

%narrow
  max-width: 750px
  margin: 0 auto