/*//Theme : Dark X Light///////////////////////////////////////////////////////*/
html{transition: color 0.48s, filter 0.48s;}
html[theme="dark"]{filter: invert(100%) hue-rotate(180deg);}
html[theme="dark"] img{filter: invert(100%) hue-rotate(180deg) grayscale(30%);}

@media (prefers-color-scheme: dark){
html{transition: color 0.48s, filter 0.48s;}
html{filter: invert(100%) hue-rotate(180deg);}
html img{filter: invert(100%) hue-rotate(180deg) grayscale(30%);}
}
@media (prefers-color-scheme: light){
html{transition: color 0.48s, filter 0.48s;}
html{filter: invert(0%) hue-rotate(0deg);}
html img{filter: invert(0%) hue-rotate(0deg) grayscale(0%);}
}
/*////////////////////////////////////////////////////////////////////////////*/
.switch input {
  position: absolute;
  opacity: 0;
}
.switch {
  display: inline-block;
  height: 1.8rem;
  width: 3.6rem;
  background: #BDB9A6;
  border-radius: 1.8rem;
}
.switch div {
  height: 1.8rem;
  width: 1.8rem;
  border-radius: 1.8rem;
  background: #FFF;
transition: all 0.24s;
}
.switch input:checked + div {
transform: translate3d(100%, 0, 0);
}