$light-bg: #ffffff;
$light-bg-alt: #413c74;
$light-fg: #413c74;
$light-ln: #9b5bb4;
$light-accent1: #9b5bb4;
$light-accent2: #5183b9;
$light-accent3: #413c74;

$dark-bg: #413c74;
$dark-bg-alt: #ff8ad0;
$dark-fg: #ff8ad0;
$dark-ln: #ffdc6d;
$dark-accent1: #ffdc6d;
$dark-accent2: #61d478;
$dark-accent3: #ffffff;

$transition-time: 2s;
$trans-short: 0.2s;

* {
  transition: $transition-time;
}

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

a {
  &.light {
    background-color: transparent;
    color: $light-ln;
  }
  background-color: transparent;
  color: $dark-ln;
  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: $trans-short;
}

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;
  border-color: $light-bg;
  color: $light-bg-alt;
  transition: $transition-time;
}

.togglelabel::after {
  background-color: $dark-bg;
  border-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;
}

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

h2 a {
  color: $dark-bg;
  &.light {
    color: $light-bg;
  }
}

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

h3 a {
  color: $dark-bg;
  &:hover {
    background-color: transparent;
  }
}

h3.light {
  background-color: $light-accent2;
  color: $light-bg;
  transition: $transition-time;
  &a {
    color: $light-bg;
  }
}

h5,
h6,
h4 {
  background-color: $dark-accent3;
  color: $dark-bg;
  transition: $transition-time;
  & a {
    color: $dark-bg;
    background-color: transparent;
  }
}

h4.light,
h5.light,
h6.light {
  background-color: $light-accent3;
  color: $light-bg;
  transition: $transition-time;
}

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

article.light a {
  background-color: transparent;
  color: $light-ln;
  transition: $transition-time;
  &.hash-link {
    color: $light-bg;
  }
  &.hash-link:hover {
    background-color: transparent;
    color: $light-bg;
  }
}

a:hover {
  color: $dark-bg;
  background-color: $dark-ln;
  transition: $trans-short;
  border-color: $dark-ln;
}

.previous.light:hover,
.next.light:hover,
.postdescription a.light:hover,
article.light a:hover {
  color: $light-bg;
  background-color: $light-ln;
  transition: $trans-short;
  border-color: $light-ln;
}

.light.hash-link:hover,
.hash-link:hover {
  background-color: transparent;
  transition: $transition-time;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  &a.light {
    background-color: transparent;
    color: $light-bg;
    &:hover {
      background-color: transparent;
    }
  }
}

header.light {
  background-color: $light-bg;
  transition: $transition-time;
}

header {
  transition: $transition-time;
}

.posttitle a {
  background-color: transparent;
  color: $dark-bg;
  &:hover {
    background-color: transparent;
  }
}

button {
  color: $dark-bg;
  background-color: $dark-bg-alt;
  border-color: $dark-bg;
  &:hover {
    transition: $trans-short;
    background-color: $dark-bg;
    color: $dark-bg-alt;
  }
  &.light {
    color: $light-bg;
    background-color: $light-bg-alt;
    border-color: $light-bg;
    &:hover {
      transition: $trans-short;
      background-color: $light-bg;
      color: $light-bg-alt;
    }
  }
}

#pageindicator {
  &.light {
    color: $light-bg;
  }
  &:hover {background-color: transparent;}
  background-color: transparent;
}