input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  visibility: hidden;
  display: none;
}

.check {
  position: relative;
  display: block;
  width: 60px;
  height: 30px;
  cursor: pointer;
  background-color: var(--moonCheckedColor); /* Fundo escuro para representar a noite */
  overflow: hidden;
  border-radius: 20px;
  transition: background-color 0.5s ease-in;
}

input[type="checkbox"]:checked ~ .check {
  background-color: var(--sunCheckedColor); /* Fundo claro para representar o dia */
}

.check::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  background: #434343; /* Lua escura */
  background-image: url("https://cdn-icons-png.flaticon.com/512/4445/4445942.png");
  background-size: cover; /* Ajusta a imagem para cobrir todo o elemento */
  background-repeat: no-repeat; /* Evita que a imagem se repita */
  background-position: center; /* Centraliza a imagem dentro do círculo */
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  transform: translateX(0); /* Lua aparece no estado inicial */
  opacity: 1; /* Inicialmente visível */
}

input[type="checkbox"]:checked ~ .check::before {
  transform: translateX(-30px); /* Lua sai da visão para a esquerda */
  opacity: 0; /* Desaparece gradualmente */
}

.check::after {
  content: '';
  position: absolute;
  background-image: url("https://cdn-icons-png.flaticon.com/512/3258/3258157.png");
  background-size: cover; /* Ajusta a imagem para cobrir todo o elemento */
  background-repeat: no-repeat; /* Evita que a imagem se repita */
  background-position: center; /* Centraliza a imagem dentro do círculo */
  top: 3px;
  right: 3px;
  background-color: var(--sunBackgroundColor); /* Sol claro */
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  transform: translateX(30px); /* Sol começa fora da visão à direita */
  opacity: 0; /* Inicialmente invisível */
}

input[type="checkbox"]:checked ~ .check::after {
  transform: translateX(0); /* Sol vai para o centro */
  opacity: 1; /* Torna-se visível */
}

#darkMode-container {
  display: flex;
  align-items: center;
}