$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: 2s;
$trans-short: 0.2s;

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;
  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;
}

h2,
h2 a {
  background-color: $dark-accent1;
  color: $dark-bg;
  transition: $transition-time;
  & a{
    background-color: transparent;
  }
}
h3,
h3 a {
  background-color: $dark-accent2;
  color: $dark-bg;
  transition: $transition-time;
  & a{
    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;
}

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

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

h1, h2, h3, h4, h5, h6{
  &a{
  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;
  }
}