@import "easings.min.css";
html {
  color-scheme: light;
}

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

[data-theme=light] [data-image-theme=dark] {
  display: none;
}

[data-theme=dark] [data-image-theme=light] {
  display: none;
}

:root {
  --theme-color: #f9fafb;
  --border-color: rgba(113 119 144 / 25%);
  --search-bg: #80808012;
  --gray-93: hsl(214, 0%, 93%);
  --gray-90: hsl(214, 0%, 90%);
  --gray-85: hsl(214, 0%, 85%);
  --gray-20: hsl(214, 2%, 20%);
  --gray-15: hsl(214, 0%, 15%);
  --white-hsl: 214, 0%, 100%;
  --white-15: hsla(var(--white-hsl), .15);
  --white: hsl(214, 0%, 100%);
}

:root, html[data-theme=light] {
  --bg-gray-90: var(--gray-90);
  --text-gray: var(--gray-20);
  --bg-white: var(--white);
  --border-gray-85: var(--gray-85);
  --border-gray-93: var(--gray-93);
  --border-white: var(--white-15);
  --text-gray2: #555;
  --s-bg: #f5f7fa80;
  --s8-bg: #f5f7fa80;
  --s9-bg: #fff9;
  --hover-menu-bg: #e4edf9;
  --bg-1: linear-gradient(135deg, #f5f7fa80 0%, #e4edf980 100%);
  --bg-2: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
  --bg-3: linear-gradient(135deg, #e4edf980 0%, #fff8 100%);
}

:root, html[data-theme=dark] {
  --bg-gray-90: var(--gray-15);
  --text-gray: var(--gray-90);
  --bg-white: var(--gray-20);
  --border-gray-85: var(--white-15);
  --border-gray-93: var(--white-15);
  --border-white: var(--bg-white);
  --text-gray2: #999;
  --s-bg: #3338;
  --s8-bg: #3338;
  --s9-bg: #3338;
  --hover-menu-bg: #555;
  --bg-1: linear-gradient(135deg, #3c3c3c80 0%, #21212180 100%);
  --bg-2: linear-gradient(135deg, #3c3c3c 0%, #212121 100%);
  --bg-3: linear-gradient(135deg, #21212180 0%, #3c3c3c80 100%);
}

html, body {
  background: var(--bg-1);
  color: var(--text-gray2);
}

.tile {
  background-color: var(--bg-white);
  border: 1px solid var(--border-gray-85);
  max-width: 60em;
  margin: 1rem auto 0;
}

hr {
  border-top: 1px solid var(--border-gray-93);
  border-bottom: 1px solid var(--border-white);
}

.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] .os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
    background: #888;
}

[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 0.5s var(--ease-elastic-3);
  }

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

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

  @supports (cx: 1) {
    .sun-and-moon .moon > circle {
      transition: cx 0.25s var(--ease-out-5);
    }
  }
  [data-theme=dark] .sun-and-moon > .sun {
    transform: scale(1.75);
    transition-timing-function: var(--ease-3);
    transition-duration: 0.25s;
  }

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

  [data-theme=dark] .sun-and-moon > .moon > circle {
    transition-delay: 0.25s;
    transition-duration: 0.5s;
  }
}
.theme-toggle {
  --size: 3.6rem;
    --icon-fill: hsl(0deg 0% 21%);
  --icon-fill-hover: hsl(210 10% 15%);
    background: none;
    color: #fff;
    float: right;
    font-weight: bold;
    border: none;
    margin: 7px 8px;
}

.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;
}

@supports not (color-scheme: dark) {
  html[data-theme=dark] {
    background: #111;
  }
}
@-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);
  }
}