body {
  font-family: "Poppins", sans-serif;

  height: 100vh;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 3rem;

  margin: 0;

  padding: 2rem;

  transition: all 0.2s;
}

.toggler {
  display: none;
}

.toggler-background {
  cursor: pointer;

  display: block;

  width: 15rem;

  padding: 0.2rem;

  background-color: #021322;

  border-radius: 999px;
}

.big-circle {
  height: 5rem;

  width: 5rem;

  border-radius: 50%;

  background-color: #fff601;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.5s;
}

.small-circle {
  background-color: #181940;

  height: 50%;

  width: 50%;

  border-radius: 50%;
}

.toggler:checked + .toggler-background .big-circle {
  background-color: #021322;

  transform: translate (200%, 0);
}

.toggler:checked + .toggler-background .big-circle .small-circle {
  background-color: #fff601;
}

.toggler:checked + .toggler-background {
  background-color: #ffffff;
}

.content {
  max-width: 40rem;

  font-size: 18px;

  line-height: 1.5;

  text-align: justify;
}

h1 {
  text-align: center;
  margin-bottom: 2rem;
}

.light-mode {
  background-color: #021322;

  color: #ffffff;
}

body:has(.toggler:checked) {
  background-color: #021322;
}