.cell:nth-child(even) .demo {
  background: $white;
}
.cell:nth-child(odd) .demo {
  background: $primary;
}
.cell .cell:nth-child(even) .demo {
  background: $secondary;
}
.cell .cell:nth-child(odd) .demo {
  background: lighten($secondary, 30);
}

.demo {
  display: block;
  border-radius: .5rem;
  padding: $gutter / 2;
  text-align: center;
  margin-bottom: $gutter;
  color: $ghost-black;
}

.logotype {
  height: 3rem;
}


.is-primary {
  color: $primary;
}

.box {
  background: $off-white;
}

.whitespace {
  height: 2*$spacing-xl;
}

.is-whitespaced {
  margin-top: $spacing-xl;
  margin-bottom: $spacing-xl;
}

h1,h2,h3,h4,h5,h6 {
  &[id]:before {
    content: '#';
    color: $primary;
  }
}

.is-nude {
  span {
    position: relative;
  }
  span:after {
    position: absolute;
    content: '';
    display: block;
    top: 20%;
    left: 0;
    right: 0;
    bottom: 20%;
    transition: transform .1s;
    transform: rotate(3deg) scale(1);
    background: black;
  }

  &:hover span:after {
    transform: rotate(-10deg) scale(0);
  }

}

.is-stuck {
  position: fixed;
}

.is-highlighted {
  color: $primary;
}

.navigation {
  background: $white;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
}
.navigation__inner {
  border-bottom: .1rem solid $ghost-black;
  max-width: $max-width;
  position: relative;
  margin: 0 auto;
}
.navigation__link {
  text-decoration: none;
}
body {
  padding-top: $navigation-height;
}

*:focus {
  outline: none;
}