/* From Uiverse.io by Galahhad (user-supplied CSS).
   Adapted to a keyboard-accessible button and the saved site theme. */
.theme-switch{
  --toggle-size:9.8px;
  --container-width:5.625em;
  --container-height:2.5em;
  --container-radius:6.25em;
  --container-light-bg:#3d7eae;
  --container-night-bg:#1d1f2c;
  --circle-container-diameter:3.375em;
  --sun-moon-diameter:2.125em;
  --sun-bg:#ecca2f;
  --moon-bg:#c4c9d1;
  --spot-color:#959db1;
  --circle-container-offset:calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
  --stars-color:#fff;
  --clouds-color:#f3fdff;
  --back-clouds-color:#aacadf;
  --transition:.5s cubic-bezier(0,-.02,.4,1.25);
  --circle-transition:.3s cubic-bezier(0,-.02,.35,1.17);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:var(--container-width);
  min-height:44px;
  border:0;
  border-radius:var(--container-radius);
  background:transparent;
  touch-action:manipulation;
}
.theme-switch,.theme-switch *,.theme-switch *::before,.theme-switch *::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-size:var(--toggle-size);
}
.theme-switch span{display:block}
.theme-switch__container{
  position:relative;
  width:var(--container-width);
  height:var(--container-height);
  background-color:var(--container-light-bg);
  border-radius:var(--container-radius);
  overflow:hidden;
  pointer-events:none;
  box-shadow:0 -.062em .062em #0004,0 .062em .125em #fffffff0;
  transition:background-color var(--transition);
}
.theme-switch__container::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  box-shadow:0 .05em .187em #0004 inset,0 .05em .187em #0004 inset;
  border-radius:var(--container-radius);
}
.theme-switch .theme-switch__circle-container{
  display:flex;
  position:absolute;
  left:var(--circle-container-offset);
  top:var(--circle-container-offset);
  width:var(--circle-container-diameter);
  height:var(--circle-container-diameter);
  background-color:#ffffff1a;
  border-radius:var(--container-radius);
  box-shadow:inset 0 0 0 3.375em #ffffff1a,inset 0 0 0 3.375em #ffffff1a,0 0 0 .625em #ffffff1a,0 0 0 1.25em #ffffff1a;
  transition:left var(--circle-transition);
}
.theme-switch .theme-switch__sun-moon-container{
  position:relative;
  z-index:2;
  width:var(--sun-moon-diameter);
  height:var(--sun-moon-diameter);
  margin:auto;
  border-radius:var(--container-radius);
  background-color:var(--sun-bg);
  box-shadow:.062em .062em .062em #feffef9c inset,0 -.062em .062em #a1872a inset;
  filter:drop-shadow(.062em .125em .125em #0004) drop-shadow(0 .062em .125em #0004);
  overflow:hidden;
}
.theme-switch__moon{
  position:relative;
  transform:translateX(100%);
  width:100%;
  height:100%;
  background-color:var(--moon-bg);
  border-radius:inherit;
  box-shadow:.062em .062em .062em #feffef9c inset,0 -.062em .062em #969696 inset;
  transition:transform var(--transition);
}
.theme-switch__spot{
  position:absolute;
  top:.75em;
  left:.312em;
  width:.75em;
  height:.75em;
  border-radius:var(--container-radius);
  background-color:var(--spot-color);
  box-shadow:0 .0312em .062em #0004 inset;
}
.theme-switch__spot:nth-of-type(2){width:.375em;height:.375em;top:.937em;left:1.375em}
.theme-switch__spot:nth-of-type(3){width:.25em;height:.25em;top:.312em;left:.812em}
.theme-switch__clouds{
  position:absolute;
  bottom:-.625em;
  left:.312em;
  width:1.25em;
  height:1.25em;
  background-color:var(--clouds-color);
  border-radius:var(--container-radius);
  box-shadow:.937em .312em var(--clouds-color),-.312em -.312em var(--back-clouds-color),1.437em .375em var(--clouds-color),.5em -.125em var(--back-clouds-color),2.187em 0 var(--clouds-color),1.25em -.062em var(--back-clouds-color),2.937em .312em var(--clouds-color),2em -.312em var(--back-clouds-color),3.625em -.062em var(--clouds-color),2.625em 0 var(--back-clouds-color),4.5em -.312em var(--clouds-color),3.375em -.437em var(--back-clouds-color),4.625em -1.75em 0 .437em var(--clouds-color),4em -.625em var(--back-clouds-color),4.125em -2.125em 0 .437em var(--back-clouds-color);
  transition:bottom var(--transition);
}
.theme-switch__stars-container{
  position:absolute;
  color:var(--stars-color);
  top:-100%;
  left:.312em;
  width:2.75em;
  height:auto;
  transition:top var(--transition),transform var(--transition);
}
[data-theme=dark] .theme-switch__container{background-color:var(--container-night-bg)}
[data-theme=dark] .theme-switch__circle-container{left:calc(100% - var(--circle-container-offset) - var(--circle-container-diameter))}
[data-theme=dark] .theme-switch__moon{transform:translateX(0)}
[data-theme=dark] .theme-switch__clouds{bottom:-4.062em}
[data-theme=dark] .theme-switch__stars-container{top:50%;transform:translateY(-50%)}
@media(hover:hover) and (pointer:fine){
  .theme-switch:hover .theme-switch__circle-container{left:calc(var(--circle-container-offset) + .187em)}
  [data-theme=dark] .theme-switch:hover .theme-switch__circle-container{left:calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - .187em)}
}
@media(max-width:600px){.theme-switch{--toggle-size:8.4px}}
[data-motion=paused] .theme-switch *,[data-motion=paused] .theme-switch *::before{transition:none}
@media(prefers-reduced-motion:reduce){.theme-switch *,.theme-switch *::before{transition:none}}
@media(forced-colors:active){
  .theme-switch{border:1px solid ButtonText}
  .theme-switch__container{display:none!important}
  .theme-switch::after{content:"Hell";font-size:14px}
  [data-theme=dark] .theme-switch::after{content:"Dunkel"}
}