.theme-toggle {
    --size: 1.5rem;
    --icon-fill: rgba(0,0,0,0.6);
    --icon-fill-hover: rgba(0,0,0,0.8);
  
    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: rgba(255,255,255,0.6);
    --icon-fill-hover: rgba(255,255,255,0.8);
  }
  
  
  
  
  
  
  .sun-and-moon > :is(.moon, .sun, .sun-beams) {
    transform-origin: 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: translateX(-7px);
  }
  
  /*@supports (cx: 1) {
    [data-theme="dark"] .sun-and-moon > .moon > circle {
      cx: 17;
      transform: translateX(0);
    }
  }*/
  
  @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 {
      transition-timing-function: var(--ease-3);
      transition-duration: .25s;
      transform: scale(1.75);
    }
  
    [data-theme="dark"] .sun-and-moon > .sun-beams {
      transition-duration: .15s;
      transform: rotateZ(-25deg);
    }
  
    [data-theme="dark"] .sun-and-moon > .moon > circle {
      transition-duration: .5s;
      transition-delay: .25s;
    }
  }