$light-bg:  #dde4ff ;
$light-bg-alt:  #733c7c ;
$light-fg: #4b3d44;
$light-ln:  #733c7c ;
$light-accent1:  #007582 ;
$light-accent2:  #225091 ;
$light-accent3:   #27234c  ;

$dark-bg:  #27234c ;
$dark-bg-alt:    #f2504b   ;
$dark-fg:    #e88dc3   ;
$dark-ln:  #f2504b ;
$dark-accent1: #b296ff;
$dark-accent2:  #39b8a3 ;
$dark-accent3:   #dde4ff  ;

$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;
  transition: $transition-time;
}

article h2 {
  background-color: $dark-accent1;
  color: $dark-bg;
  transition: $transition-time;
}
article h3 {
  background-color: $dark-accent2;
  color: $dark-bg;
  transition: $transition-time;
}

article.light h3 {
  background-color: $light-accent2;
  color: $light-bg;
  transition: $transition-time;
}
article h4 {
  background-color: $dark-accent3;
  color: $dark-bg;
  transition: $transition-time;
}

article.light h4 {
  background-color: $light-accent3;
  color: $light-bg;
  transition: $transition-time;
}

article.light h2 {
  background-color: $light-accent1;
  color: $light-bg;
  transition: $transition-time;
}

article h5,
article h6,
article a {
  background-color: $dark-ln;
  color: $dark-bg;
  transition: $transition-time;
}

article.light h5,
article.light h6,
article.light a {
  background-color: $light-ln;
  color: $light-bg;
  transition: $transition-time;
}

a:hover {
  &.light {
    color: $light-ln;
    background-color: transparent;
  }
  color: $dark-ln;
  background-color: transparent;
}

article.light a:hover {
  color: $light-ln;
  background-color: transparent;
}