#header {
  align-items: center;
  display: flex;
  padding: 1rem 0;
  @include constrain-width;

  a {
    align-items: center;
    display: flex;
    text-decoration: none;
  }

  h1.small {
    display: none;
  }

  img {
    height: 4rem;
    margin-right: 1rem;
    width: 4rem;
  }

  @media (max-width: $small-breakpoint) {
    h1.big {
      display: none;
    }

    h1.small {
      display: initial;
    }

    img {
      display: none;
    }
  }

  button {
    border: none;
    margin-left: auto;

    &:hover {
      cursor: pointer;
    }

    &::before {
      background: url('../images/moon-crescent-face-right.png') center center no-repeat;
      content: '';
      display: block;
      height: 4rem;
      width: 4rem;
    }

    &.light::before {
      background: url('../images/sun.png') center center no-repeat;
    }
  }
}