$light-bg: #ddcf99;
$light-bg-alt: #4e5463;
$light-fg: #202020;
$light-ln: #4e5463;

$dark-bg: #4b3d44;
$dark-bg-alt: #bd97a9;
$dark-fg: #e6d0c4;
$dark-ln: #bd97a9;

$transition-time: 1s;

body {
  &.light {
    background-color: $light-bg;
    color: $light-fg;
  }
  background-color: $dark-bg;
  color: $dark-fg;
  transition: $transition-time;
}

a {
  &.light {
    background-color: $light-ln;
    color: $light-bg;
  }
  background-color: $dark-ln;
  color: $dark-bg;
  transition: $transition-time;
}

a.footer-nav-item.active,
a.footer-nav-item:hover{
  &.light {
    color: $light-bg-alt;
    background-color: $light-bg;
    border-color: $light-bg;
  }
  color: $dark-bg-alt;
  background-color: $dark-bg;
  border-color: $dark-bg;
  transition: 0.24s;
}

footer {
  &.light {
    background-color: $light-bg-alt;
    color: $light-bg;
  }
  background-color: $dark-bg-alt;
  color: $dark-bg;
  transition: $transition-time;
}

footer a {
  &.light {
    color: $light-bg;
    background-color: $light-bg-alt;
  }
  color: $dark-bg;
  background-color: $dark-bg-alt;
  transition: $transition-time;
}

.togglelabel {
  &.light {
    background-color: $light-bg-alt;
    border-color: $light-bg;
  }
  background-color: $dark-bg-alt;
  border-color: $dark-bg;
  transition: $transition-time;
}

.togglelabel.light::after {
  background-color: $light-bg;
  color: $light-bg-alt;
  transition: $transition-time;
}

.togglelabel::after {
  background-color: $dark-bg;
  color: $dark-bg-alt;
  transition: $transition-time;
}


body.light #title {
  color: $light-bg;
  background-color: $light-bg-alt;
  transition: $transition-time;
}

body #title{
  color: $dark-bg;
  background-color: $dark-bg-alt;
  transition: $transition-time;
}

article {
  &.light {
    background-color: $light-bg;
    border-color: $light-bg-alt;
  }
  background-color: $dark-bg;
  border-color: $dark-bg-alt;
}