@import "https://unpkg.com/open-props/easings.min.css";
.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)
}

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

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

[data-theme=dark] .sun-and-moon>.sun {
  transform: scale(1.75)
}

[data-theme=dark] .sun-and-moon>.sun-beams {
  opacity: 0
}

[data-theme=dark] .sun-and-moon>.moon>circle {
  transform: translate(-7px)
}

@supports (cx: 1) {
  [data-theme=dark] .sun-and-moon>.moon>circle {
    transform: translate(0);
    cx: 17
  }
}

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

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

  .sun-and-moon .moon>circle {
    transition: transform .25s var(--ease-out-5)
  }

  @supports (cx: 1) {
    .sun-and-moon .moon>circle {
      transition: cx .25s var(--ease-out-5)
    }
  }

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

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

  [data-theme=dark] .sun-and-moon>.moon>circle {
    transition-delay: .25s;
    transition-duration: .5s
  }
}

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

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

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

@media (hover: none) {
  .theme-toggle {
    --size: 48px
  }
}

* {
  box-sizing: border-box;
  margin: 0
}

html {
  block-size: 100%;
  color-scheme: light
}

html[data-theme=dark] {
  color-scheme: dark
}

@supports not (color-scheme: dark) {
  html[data-theme=dark] {
    background: #111
  }
}

body {
  min-block-size: 100%;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  /* display: grid; */
  align-content: center;
  justify-content: center;
  place-content: center
}

.github-corner {
  fill: #ff69b4;
  color: Canvas
}

.github-corner:hover .octo-arm {
  -webkit-animation: octocat-wave .56s ease-in-out;
  animation: octocat-wave .56s ease-in-out
}

[data-theme=dark] .github-corner {
  fill: indigo
}

@-webkit-keyframes octocat-wave {
  0%,
    to {
    transform: rotate(0)
  }

  20%,
    60% {
    transform: rotate(-25deg)
  }

  40%,
    80% {
    transform: rotate(10deg)
  }
}

@keyframes octocat-wave {
  0%,
    to {
    transform: rotate(0)
  }

  20%,
    60% {
    transform: rotate(-25deg)
  }

  40%,
    80% {
    transform: rotate(10deg)
  }
}

.triangle-black {
  border-top: 25px solid black;
  border-left: 50vw solid transparent;
  border-right: 50vw solid transparent;
  position: absolute;
  z-index: 40;
}

.triangle-beige {
  border-top: 25px solid #ece9d8;
  border-left: 50vw solid transparent;
  border-right: 50vw solid transparent;
  position: absolute;
  z-index: 40;
}

.triangle-orange {
  border-top: 25px solid #fb923c;
  border-left: 50vw solid transparent;
  border-right: 50vw solid transparent;
  position: absolute;
  z-index: 40;
}

#skiptocontent {
  height: 0;
}

#skiptocontent a {
  padding: 6px;
  position: relative;
  top: -40px;
  left: 50%;
  color: white;
  border: 1px solid white;
  border-radius: 8px;
  background: #BF1722;
  transition: top 1s ease-out;
  z-index: 100;
}

#skiptocontent a:focus {
  position: relative;
  left: 50%;
  top: 0px;
  outline-color: transparent;
  transition: top .1s ease-in;
}

@media (prefers-reduced-motion: reduce) {
  #skiptocontent a {
    transition-duration: 0.001ms !important;
  }
}

/* Flying focus */

#flying-focus {
  position: absolute;
  margin: 0;
  background: transparent;
  transition-property: left, top, width, height, opacity;
  transition-timing-function: cubic-bezier(0, 0.2, 0, 1);
  visibility: hidden;
  pointer-events: none;
  box-shadow: 0 0 2px 3px #78aeda, 0 0 2px #78aeda inset; border-radius: 2px;
}

#flying-focus.flying-focus_visible {
  visibility: visible;
  z-index: 9999;
}

.flying-focus_target {
  outline: none !important; /* Doesn't work in Firefox :( */
}

/* http://stackoverflow.com/questions/71074/how-to-remove-firefoxs-dotted-outline-on-buttons-as-well-as-links/199319 */

.flying-focus_target::-moz-focus-inner {
  border: 0 !important;
}

/* Replace it with @supports rule when browsers catch up */

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  #flying-focus {
    box-shadow: none;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #flying-focus {
    transition-duration: 0.001ms !important;
  }
}

.init * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

img { max-width:100%; height: auto;
}

a {
  color:currentColor;
  text-decoration: underline;
}

a:hover{
  background-color: rgba(255, 255, 255, 0.877);
  color: #111;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  border-radius: 3px;
}

ol.alpha {
  content: counter(c);
  list-style-position: inside;
  list-style-type: lower-alpha;
}
/*# sourceMappingURL=a-focus-on-the-housing-and-homelessness-crisis.34df27b5.css.map */