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 {
  --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);
}

: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);
}

body {
    font-family: 'Arial', sans-serif;
    background-color: var(--bg-gray-90);
    color: var(--text-gray);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.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 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(210 10% 30%);
  --icon-fill-hover: hsl(210 10% 15%);
    position: fixed;
    width: 50px;
    height: 50px;
    bottom: 25px;
    left: 25px;
    background: #ffffffdb;
    border: none;
    border-radius: 50%;
    padding: 0.5rem;
  inline-size: var(--size);
  block-size: var(--size);
  aspect-ratio: 1;
  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%) ;
    background: #00000099;
}

@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);
  }
}

.main-contents {
    width: 100vw;
    min-height: 100vh;
    text-align: center;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
}

h1 {
    font-size: calc(1.5rem + 1vw);
    margin-bottom: 20px;
    max-width: 600px;
}

.main-contents>p {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 30px;
    background: #80808025;
    padding: 1rem 1.5rem;
    border-radius: 0.8rem;
    max-width: 700px;
}

.cta-button {
    display: inline-block;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    color: var(--bg-gray-90);
    background-color: var(--text-gray);
    border-radius: 50px;
    transition: background-color 0.3s ease;
}