* {
    margin: 0;
    padding: 0;
    transition: 0.7s;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .button-switch-container {
    position: fixed;
    bottom: 10px;   /* Adjust the value as needed */
    right: 20px;    /* Adjust the value as needed */
    z-index: 1000;  /* Ensures the button stays on top of other elements */
    width: 180em;  /* Adjust width as per your requirement */
    height: 70em;  /* Adjust height as per your requirement */
    display: inline-block;
    vertical-align: bottom;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }  
  .button-switch-container .components {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;  /* Take full width of the container */
    height: 100%; /* Take full height of the container */
    background-color: #4685c0;
    border-radius: 100em;
    -webkit-box-shadow: inset 0 0 5em 3em rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 0 5em 3em rgba(0, 0, 0, 0.5);
    overflow: hidden;
    -webkit-transition: 0.7s;
    -moz-transition: 0.7s;
    -o-transition: 0.7s;
    -ms-transition: 0.7s;
    transition: 0.7s;
    -webkit-transition-timing-function: cubic-bezier(0, 0.5, 1, 1);
    -moz-transition-timing-function: cubic-bezier(0, 0.5, 1, 1);
    -o-transition-timing-function: cubic-bezier(0, 0.5, 1, 1);
    -ms-transition-timing-function: cubic-bezier(0, 0.5, 1, 1);
    transition-timing-function: cubic-bezier(0, 0.5, 1, 1);
    cursor: pointer;
  }
  .button-switch-container .theme-switch-button {
    margin: 7.5em 0 0 7.5em;
    width: 55em;
    height: 55em;
    background-color: #ffc323;
    border-radius: 50%;
    -webkit-box-shadow: 3em 3em 5em rgba(0, 0, 0, 0.5),
      inset -3em -5em 3em -3em rgba(0, 0, 0, 0.5), inset 4em 5em 2em -2em #ffe650;
    box-shadow: 3em 3em 5em rgba(0, 0, 0, 0.5),
      inset -3em -5em 3em -3em rgba(0, 0, 0, 0.5), inset 4em 5em 2em -2em #ffe650;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -ms-transition: 1s;
    transition: 1s;
    -webkit-transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
    -moz-transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
    -o-transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
    -ms-transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
    transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
  }
  .button-switch-container .moon {
    position: absolute;
    background-color: #96a0b4;
    -webkit-box-shadow: inset 0em 0em 1em 1em rgba(0, 0, 0, 0.3);
    box-shadow: inset 0em 0em 1em 1em rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  .button-switch-container .moon:nth-child(1) {
    top: 7.5em;
    left: 25em;
    width: 12.5em;
    height: 12.5em;
  }
  .button-switch-container .moon:nth-child(2) {
    top: 20em;
    left: 7.5em;
    width: 20em;
    height: 20em;
  }
  .button-switch-container .moon:nth-child(3) {
    top: 32.5em;
    left: 32.5em;
    width: 12.5em;
    height: 12.5em;
  }
  .button-switch-container .daytime-background {
    position: absolute;
    border-radius: 50%;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -ms-transition: 1s;
    transition: 1s;
    -webkit-transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
    -moz-transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
    -o-transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
    -ms-transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
    transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
  }
  .button-switch-container .daytime-background:nth-child(2) {
    top: -20em;
    left: -20em;
    width: 110em;
    height: 110em;
    background-color: rgba(255, 255, 255, 0.2);
    z-index: -2;
  }
  .button-switch-container .daytime-background:nth-child(3) {
    top: -32.5em;
    left: -17.5em;
    width: 135em;
    height: 135em;
    background-color: rgba(255, 255, 255, 0.1);
    z-index: -3;
  }
  .button-switch-container .daytime-background:nth-child(4) {
    top: -45em;
    left: -15em;
    width: 160em;
    height: 160em;
    background-color: rgba(255, 255, 255, 0.05);
    z-index: -4;
  }
  .button-switch-container .cloud,
  .button-switch-container .cloud-light {
    -webkit-transform: translateY(10em);
    -moz-transform: translateY(10em);
    -o-transform: translateY(10em);
    -ms-transform: translateY(10em);
    transform: translateY(10em);
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -ms-transition: 1s;
    transition: 1s;
    -webkit-transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
    -moz-transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
    -o-transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
    -ms-transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
    transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
  }
  .button-switch-container .cloud-sun {
    position: absolute;
    background-color: #fff;
    border-radius: 50%;
    z-index: -1;
    -webkit-transition: -webkit-transform 6s, right 1s, bottom 1s;
    -moz-transition: -moz-transform 6s, right 1s, bottom 1s;
    -o-transition: -o-transform 6s, right 1s, bottom 1s;
    -ms-transition: -ms-transform 6s, right 1s, bottom 1s;
    transition: transform 6s, right 1s, bottom 1s;
  }
  .button-switch-container .cloud-sun:nth-child(6n + 1) {
    right: -20em;
    bottom: 10em;
    width: 50em;
    height: 50em;
  }
  .button-switch-container .cloud-sun:nth-child(6n + 2) {
    right: -10em;
    bottom: -25em;
    width: 60em;
    height: 60em;
  }
  .button-switch-container .cloud-sun:nth-child(6n + 3) {
    right: 20em;
    bottom: -40em;
    width: 60em;
    height: 60em;
  }
  .button-switch-container .cloud-sun:nth-child(6n + 4) {
    right: 50em;
    bottom: -35em;
    width: 60em;
    height: 60em;
  }
  .button-switch-container .cloud-sun:nth-child(6n + 5) {
    right: 75em;
    bottom: -60em;
    width: 75em;
    height: 75em;
  }
  .button-switch-container .cloud-sun:nth-child(6n + 6) {
    right: 110em;
    bottom: -50em;
    width: 60em;
    height: 60em;
  }
  .button-switch-container .cloud {
    z-index: -2;
  }
  .button-switch-container .cloud-light {
    position: absolute;
    right: 0em;
    bottom: 25em;
    opacity: 0.5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    z-index: -3;
  }
  .button-switch-container .stars {
    -webkit-transform: translateY(-125em);
    -moz-transform: translateY(-125em);
    -o-transform: translateY(-125em);
    -ms-transform: translateY(-125em);
    transform: translateY(-125em);
    z-index: -2;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -ms-transition: 1s;
    transition: 1s;
    -webkit-transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
    -moz-transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
    -o-transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
    -ms-transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
    transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
  }
  .button-switch-container .big {
    --size: 7em;
  }
  .button-switch-container .medium {
    --size: 5em;
  }
  .button-switch-container .small {
    --size: 3em;
  }
  .button-switch-container .star {
    position: absolute;
    width: calc(2 * var(--size));
    height: calc(2 * var(--size));
  }
  .button-switch-container .star:nth-child(1) {
    top: 11em;
    left: 39em;
  }
  .button-switch-container .star:nth-child(2) {
    top: 39em;
    left: 91em;
  }
  .button-switch-container .star:nth-child(3) {
    top: 26em;
    left: 19em;
  }
  .button-switch-container .star:nth-child(4) {
    top: 37em;
    left: 66em;
  }
  .button-switch-container .star:nth-child(5) {
    top: 21em;
    left: 75em;
  }
  .button-switch-container .star:nth-child(6) {
    top: 51em;
    left: 38em;
  }
  .button-switch-container .star-sun {
    float: left;
  }
  .button-switch-container .star-sun:nth-child(1) {
    --pos: left 0;
  }
  .button-switch-container .star-sun:nth-child(2) {
    --pos: right 0;
  }
  .button-switch-container .star-sun:nth-child(3) {
    --pos: 0 bottom;
  }
  .button-switch-container .star-sun:nth-child(4) {
    --pos: right bottom;
  }
  .button-switch-container .star-sun {
    width: var(--size);
    height: var(--size);
    background-image: -webkit-radial-gradient(
      circle var(--size) at var(--pos),
      transparent calc(95% - 1px),
      #fff 95%
    );
    background-image: -moz-radial-gradient(
      circle var(--size) at var(--pos),
      transparent calc(95% - 1px),
      #fff 95%
    );
    background-image: -o-radial-gradient(
      circle var(--size) at var(--pos),
      transparent calc(95% - 1px),
      #fff 95%
    );
    background-image: -ms-radial-gradient(
      circle var(--size) at var(--pos),
      transparent calc(95% - 1px),
      #fff 95%
    );
    background-image: radial-gradient(
      circle var(--size) at var(--pos),
      transparent calc(95% - 1px),
      #fff 95%
    );
  }
  .button-switch-container .components .theme-switch-button:hover {
    -webkit-transform: translateX(10em);
    -moz-transform: translateX(10em);
    -o-transform: translateX(10em);
    -ms-transform: translateX(10em);
    transform: translateX(10em);
  }
  .button-switch-container .components .theme-switch-button:hover ~ .daytime-background:nth-child(2) {
    -webkit-transform: translateX(10em);
    -moz-transform: translateX(10em);
    -o-transform: translateX(10em);
    -ms-transform: translateX(10em);
    transform: translateX(10em);
  }
  .button-switch-container .components .theme-switch-button:hover ~ .daytime-background:nth-child(3) {
    -webkit-transform: translateX(7em);
    -moz-transform: translateX(7em);
    -o-transform: translateX(7em);
    -ms-transform: translateX(7em);
    transform: translateX(7em);
  }
  .button-switch-container .components .theme-switch-button:hover ~ .daytime-background:nth-child(4) {
    -webkit-transform: translateX(4em);
    -moz-transform: translateX(4em);
    -o-transform: translateX(4em);
    -ms-transform: translateX(4em);
    transform: translateX(4em);
  }
  .button-switch-container .components .theme-switch-button:hover ~ .cloud .cloud-sun:nth-child(1) {
    right: -24em;
    bottom: 10em;
  }
  .button-switch-container .components .theme-switch-button:hover ~ .cloud .cloud-sun:nth-child(2) {
    right: -12em;
    bottom: -27em;
  }
  .button-switch-container .components .theme-switch-button:hover ~ .cloud .cloud-sun:nth-child(3) {
    right: 17em;
    bottom: -43em;
  }
  .button-switch-container .components .theme-switch-button:hover ~ .cloud .cloud-sun:nth-child(4) {
    right: 46em;
    bottom: -39em;
  }
  .button-switch-container .components .theme-switch-button:hover ~ .cloud .cloud-sun:nth-child(5) {
    right: 70em;
    bottom: -65em;
  }
  .button-switch-container .components .theme-switch-button:hover ~ .cloud .cloud-sun:nth-child(6) {
    right: 109em;
    bottom: -54em;
  }
  .button-switch-container
    .components
    .theme-switch-button:hover
    ~ .cloud-light
    .cloud-sun:nth-child(1) {
    right: -23em;
    bottom: 10em;
  }
  .button-switch-container
    .components
    .theme-switch-button:hover
    ~ .cloud-light
    .cloud-sun:nth-child(2) {
    right: -11em;
    bottom: -26em;
  }
  .button-switch-container
    .components
    .theme-switch-button:hover
    ~ .cloud-light
    .cloud-sun:nth-child(3) {
    right: 18em;
    bottom: -42em;
  }
  .button-switch-container
    .components
    .theme-switch-button:hover
    ~ .cloud-light
    .cloud-sun:nth-child(4) {
    right: 47em;
    bottom: -38em;
  }
  .button-switch-container
    .components
    .theme-switch-button:hover
    ~ .cloud-light
    .cloud-sun:nth-child(5) {
    right: 74em;
    bottom: -64em;
  }
  .button-switch-container
    .components
    .theme-switch-button:hover
    ~ .cloud-light
    .cloud-sun:nth-child(6) {
    right: 110em;
    bottom: -55em;
  }
  [data-theme="light"] .button-switch-container .cloud-sun {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
    -moz-transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
    -o-transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
    -ms-transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
    transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -ms-transition: 1s;
    transition: 1s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -moz-animation-direction: alternate;
    -o-animation-direction: alternate;
    -ms-animation-direction: alternate;
    animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    -o-animation-timing-function: ease-in-out;
    -ms-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  [data-theme="light"] .button-switch-container .cloud-sun:nth-child(6n + 1) {
    -webkit-animation-name: naoCloud;
    -moz-animation-name: naoCloud;
    -o-animation-name: naoCloud;
    -ms-animation-name: naoCloud;
    animation-name: naoCloud;
    -webkit-animation-duration: 4.5s;
    -moz-animation-duration: 4.5s;
    -o-animation-duration: 4.5s;
    -ms-animation-duration: 4.5s;
    animation-duration: 4.5s;
  }
  [data-theme="light"] .button-switch-container .cloud-sun:nth-child(6n + 2) {
    -webkit-animation-name: naoCloud;
    -moz-animation-name: naoCloud;
    -o-animation-name: naoCloud;
    -ms-animation-name: naoCloud;
    animation-name: naoCloud;
    -webkit-animation-duration: 5.1s;
    -moz-animation-duration: 5.1s;
    -o-animation-duration: 5.1s;
    -ms-animation-duration: 5.1s;
    animation-duration: 5.1s;
  }
  [data-theme="light"] .button-switch-container .cloud-sun:nth-child(6n + 3) {
    -webkit-animation-name: naoCloud;
    -moz-animation-name: naoCloud;
    -o-animation-name: naoCloud;
    -ms-animation-name: naoCloud;
    animation-name: naoCloud;
    -webkit-animation-duration: 5.9s;
    -moz-animation-duration: 5.9s;
    -o-animation-duration: 5.9s;
    -ms-animation-duration: 5.9s;
    animation-duration: 5.9s;
  }
  [data-theme="light"] .button-switch-container .cloud-sun:nth-child(6n + 4) {
    -webkit-animation-name: naoCloud;
    -moz-animation-name: naoCloud;
    -o-animation-name: naoCloud;
    -ms-animation-name: naoCloud;
    animation-name: naoCloud;
    -webkit-animation-duration: 6.3s;
    -moz-animation-duration: 6.3s;
    -o-animation-duration: 6.3s;
    -ms-animation-duration: 6.3s;
    animation-duration: 6.3s;
  }
  [data-theme="light"] .button-switch-container .cloud-sun:nth-child(6n + 5) {
    -webkit-animation-name: naoCloud;
    -moz-animation-name: naoCloud;
    -o-animation-name: naoCloud;
    -ms-animation-name: naoCloud;
    animation-name: naoCloud;
    -webkit-animation-duration: 4.7s;
    -moz-animation-duration: 4.7s;
    -o-animation-duration: 4.7s;
    -ms-animation-duration: 4.7s;
    animation-duration: 4.7s;
  }
  [data-theme="light"] .button-switch-container .cloud-sun:nth-child(6n + 6) {
    -webkit-animation-name: naoCloud;
    -moz-animation-name: naoCloud;
    -o-animation-name: naoCloud;
    -ms-animation-name: naoCloud;
    animation-name: naoCloud;
    -webkit-animation-duration: 5s;
    -moz-animation-duration: 5s;
    -o-animation-duration: 5s;
    -ms-animation-duration: 5s;
    animation-duration: 5s;
  }
  [data-theme="dark"] .button-switch-container .components {
    background-color: #191e32;
  }
  [data-theme="dark"] .button-switch-container .theme-switch-button {
    -webkit-transform: translateX(110em);
    -moz-transform: translateX(110em);
    -o-transform: translateX(110em);
    -ms-transform: translateX(110em);
    transform: translateX(110em);
    background-color: #c3c8d2;
    -webkit-box-shadow: 3em 3em 5em rgba(0, 0, 0, 0.5),
      inset -3em -5em 3em -3em rgba(0, 0, 0, 0.5), inset 4em 5em 2em -2em #ffffd2;
    box-shadow: 3em 3em 5em rgba(0, 0, 0, 0.5),
      inset -3em -5em 3em -3em rgba(0, 0, 0, 0.5), inset 4em 5em 2em -2em #ffffd2;
  }
  [data-theme="dark"] .button-switch-container .moon:nth-child(1) {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  [data-theme="dark"] .button-switch-container .moon:nth-child(2) {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  [data-theme="dark"] .button-switch-container .moon:nth-child(3) {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  [data-theme="dark"] .button-switch-container .daytime-background:nth-child(2) {
    -webkit-transform: translateX(110em);
    -moz-transform: translateX(110em);
    -o-transform: translateX(110em);
    -ms-transform: translateX(110em);
    transform: translateX(110em);
  }
  [data-theme="dark"] .button-switch-container .daytime-background:nth-child(3) {
    -webkit-transform: translateX(80em);
    -moz-transform: translateX(80em);
    -o-transform: translateX(80em);
    -ms-transform: translateX(80em);
    transform: translateX(80em);
  }
  [data-theme="dark"] .button-switch-container .daytime-background:nth-child(4) {
    -webkit-transform: translateX(50em);
    -moz-transform: translateX(50em);
    -o-transform: translateX(50em);
    -ms-transform: translateX(50em);
    transform: translateX(50em);
  }
  [data-theme="dark"] .button-switch-container .cloud,
  [data-theme="dark"] .button-switch-container .cloud-light {
    -webkit-transform: translateY(80em);
    -moz-transform: translateY(80em);
    -o-transform: translateY(80em);
    -ms-transform: translateY(80em);
    transform: translateY(80em);
  }
  [data-theme="dark"] .button-switch-container .stars {
    -webkit-transform: translateY(-62.5em);
    -moz-transform: translateY(-62.5em);
    -o-transform: translateY(-62.5em);
    -ms-transform: translateY(-62.5em);
    transform: translateY(-62.5em);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  [data-theme="dark"] .button-switch-container .star {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
    -moz-transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
    -o-transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
    -ms-transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
    transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1);
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -ms-transition: 1s;
    transition: 1s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -moz-animation-direction: alternate;
    -o-animation-direction: alternate;
    -ms-animation-direction: alternate;
    animation-direction: alternate;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    animation-timing-function: linear;
  }
  [data-theme="dark"] .button-switch-container .star:nth-child(1) {
    -webkit-animation-name: naoStar;
    -moz-animation-name: naoStar;
    -o-animation-name: naoStar;
    -ms-animation-name: naoStar;
    animation-name: naoStar;
    -webkit-animation-duration: 3.5s;
    -moz-animation-duration: 3.5s;
    -o-animation-duration: 3.5s;
    -ms-animation-duration: 3.5s;
    animation-duration: 3.5s;
  }
  [data-theme="dark"] .button-switch-container .star:nth-child(2) {
    -webkit-animation-name: naoStar;
    -moz-animation-name: naoStar;
    -o-animation-name: naoStar;
    -ms-animation-name: naoStar;
    animation-name: naoStar;
    -webkit-animation-duration: 4.1s;
    -moz-animation-duration: 4.1s;
    -o-animation-duration: 4.1s;
    -ms-animation-duration: 4.1s;
    animation-duration: 4.1s;
  }
  [data-theme="dark"] .button-switch-container .star:nth-child(3) {
    -webkit-animation-name: naoStar;
    -moz-animation-name: naoStar;
    -o-animation-name: naoStar;
    -ms-animation-name: naoStar;
    animation-name: naoStar;
    -webkit-animation-duration: 4.9s;
    -moz-animation-duration: 4.9s;
    -o-animation-duration: 4.9s;
    -ms-animation-duration: 4.9s;
    animation-duration: 4.9s;
  }
  [data-theme="dark"] .button-switch-container .star:nth-child(4) {
    -webkit-animation-name: naoStar;
    -moz-animation-name: naoStar;
    -o-animation-name: naoStar;
    -ms-animation-name: naoStar;
    animation-name: naoStar;
    -webkit-animation-duration: 5.3s;
    -moz-animation-duration: 5.3s;
    -o-animation-duration: 5.3s;
    -ms-animation-duration: 5.3s;
    animation-duration: 5.3s;
  }
  [data-theme="dark"] .button-switch-container .star:nth-child(5) {
    -webkit-animation-name: naoStar;
    -moz-animation-name: naoStar;
    -o-animation-name: naoStar;
    -ms-animation-name: naoStar;
    animation-name: naoStar;
    -webkit-animation-duration: 3s;
    -moz-animation-duration: 3s;
    -o-animation-duration: 3s;
    -ms-animation-duration: 3s;
    animation-duration: 3s;
  }
  [data-theme="dark"] .button-switch-container .star:nth-child(6) {
    -webkit-animation-name: naoStar;
    -moz-animation-name: naoStar;
    -o-animation-name: naoStar;
    -ms-animation-name: naoStar;
    animation-name: naoStar;
    -webkit-animation-duration: 2.2s;
    -moz-animation-duration: 2.2s;
    -o-animation-duration: 2.2s;
    -ms-animation-duration: 2.2s;
    animation-duration: 2.2s;
  }
  [data-theme="dark"] .button-switch-container .components .theme-switch-button:hover {
    -webkit-transform: translateX(100em);
    -moz-transform: translateX(100em);
    -o-transform: translateX(100em);
    -ms-transform: translateX(100em);
    transform: translateX(100em);
  }
  [data-theme="dark"]
    .button-switch-container
    .components
    .theme-switch-button:hover
    ~ .daytime-background:nth-child(2) {
    -webkit-transform: translateX(100em);
    -moz-transform: translateX(100em);
    -o-transform: translateX(100em);
    -ms-transform: translateX(100em);
    transform: translateX(100em);
  }
  [data-theme="dark"]
    .button-switch-container
    .components
    .theme-switch-button:hover
    ~ .daytime-background:nth-child(3) {
    -webkit-transform: translateX(73em);
    -moz-transform: translateX(73em);
    -o-transform: translateX(73em);
    -ms-transform: translateX(73em);
    transform: translateX(73em);
  }
  [data-theme="dark"]
    .button-switch-container
    .components
    .theme-switch-button:hover
    ~ .daytime-background:nth-child(4) {
    -webkit-transform: translateX(46em);
    -moz-transform: translateX(46em);
    -o-transform: translateX(46em);
    -ms-transform: translateX(46em);
    transform: translateX(46em);
  }
  [data-theme="dark"]
    .button-switch-container
    .components
    .theme-switch-button:hover
    ~ .stars
    .star:nth-child(1) {
    top: 10em;
    left: 36em;
  }
  [data-theme="dark"]
    .button-switch-container
    .components
    .theme-switch-button:hover
    ~ .stars
    .star:nth-child(2) {
    top: 40em;
    left: 87em;
  }
  [data-theme="dark"]
    .button-switch-container
    .components
    .theme-switch-button:hover
    ~ .stars
    .star:nth-child(3) {
    top: 26em;
    left: 16em;
  }
  [data-theme="dark"]
    .button-switch-container
    .components
    .theme-switch-button:hover
    ~ .stars
    .star:nth-child(4) {
    top: 38em;
    left: 63em;
  }
  [data-theme="dark"]
    .button-switch-container
    .components
    .theme-switch-button:hover
    ~ .stars
    .star:nth-child(5) {
    top: 20.5em;
    left: 72em;
  }
  [data-theme="dark"]
    .button-switch-container
    .components
    .theme-switch-button:hover
    ~ .stars
    .star:nth-child(6) {
    top: 51.5em;
    left: 35em;
  }
  
  @-moz-keyframes naoStar {
    0%,
    20% {
      -webkit-transform: scale(0);
      -moz-transform: scale(0);
      -o-transform: scale(0);
      -ms-transform: scale(0);
      transform: scale(0);
    }
    20%,
    100% {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -o-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
    }
  }
  @-webkit-keyframes naoStar {
    0%,
    20% {
      -webkit-transform: scale(0);
      -moz-transform: scale(0);
      -o-transform: scale(0);
      -ms-transform: scale(0);
      transform: scale(0);
    }
    20%,
    100% {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -o-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
    }
  }
  @-o-keyframes naoStar {
    0%,
    20% {
      -webkit-transform: scale(0);
      -moz-transform: scale(0);
      -o-transform: scale(0);
      -ms-transform: scale(0);
      transform: scale(0);
    }
    20%,
    100% {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -o-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
    }
  }
  @keyframes naoStar {
    0%,
    20% {
      -webkit-transform: scale(0);
      -moz-transform: scale(0);
      -o-transform: scale(0);
      -ms-transform: scale(0);
      transform: scale(0);
    }
    20%,
    100% {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -o-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
    }
  }
  @-moz-keyframes naoCloud {
    0% {
      -webkit-transform: translate(2em, -2em);
      -moz-transform: translate(2em, -2em);
      -o-transform: translate(2em, -2em);
      -ms-transform: translate(2em, -2em);
      transform: translate(2em, -2em);
    }
    50% {
      -webkit-transform: translate(-2em, 2em);
      -moz-transform: translate(-2em, 2em);
      -o-transform: translate(-2em, 2em);
      -ms-transform: translate(-2em, 2em);
      transform: translate(-2em, 2em);
    }
    100% {
      -webkit-transform: translate(2em, -2em);
      -moz-transform: translate(2em, -2em);
      -o-transform: translate(2em, -2em);
      -ms-transform: translate(2em, -2em);
      transform: translate(2em, -2em);
    }
  }
  @-webkit-keyframes naoCloud {
    0% {
      -webkit-transform: translate(2em, -2em);
      -moz-transform: translate(2em, -2em);
      -o-transform: translate(2em, -2em);
      -ms-transform: translate(2em, -2em);
      transform: translate(2em, -2em);
    }
    50% {
      -webkit-transform: translate(-2em, 2em);
      -moz-transform: translate(-2em, 2em);
      -o-transform: translate(-2em, 2em);
      -ms-transform: translate(-2em, 2em);
      transform: translate(-2em, 2em);
    }
    100% {
      -webkit-transform: translate(2em, -2em);
      -moz-transform: translate(2em, -2em);
      -o-transform: translate(2em, -2em);
      -ms-transform: translate(2em, -2em);
      transform: translate(2em, -2em);
    }
  }
  @-o-keyframes naoCloud {
    0% {
      -webkit-transform: translate(2em, -2em);
      -moz-transform: translate(2em, -2em);
      -o-transform: translate(2em, -2em);
      -ms-transform: translate(2em, -2em);
      transform: translate(2em, -2em);
    }
    50% {
      -webkit-transform: translate(-2em, 2em);
      -moz-transform: translate(-2em, 2em);
      -o-transform: translate(-2em, 2em);
      -ms-transform: translate(-2em, 2em);
      transform: translate(-2em, 2em);
    }
    100% {
      -webkit-transform: translate(2em, -2em);
      -moz-transform: translate(2em, -2em);
      -o-transform: translate(2em, -2em);
      -ms-transform: translate(2em, -2em);
      transform: translate(2em, -2em);
    }
  }
  @keyframes naoCloud {
    0% {
      -webkit-transform: translate(2em, -2em);
      -moz-transform: translate(2em, -2em);
      -o-transform: translate(2em, -2em);
      -ms-transform: translate(2em, -2em);
      transform: translate(2em, -2em);
    }
    50% {
      -webkit-transform: translate(-2em, 2em);
      -moz-transform: translate(-2em, 2em);
      -o-transform: translate(-2em, 2em);
      -ms-transform: translate(-2em, 2em);
      transform: translate(-2em, 2em);
    }
    100% {
      -webkit-transform: translate(2em, -2em);
      -moz-transform: translate(2em, -2em);
      -o-transform: translate(2em, -2em);
      -ms-transform: translate(2em, -2em);
      transform: translate(2em, -2em);
    }
  }