_sass/header.scss

header {
  padding: 77px 0;
  margin-bottom: 2rem;
  background-color: $background-color;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' width='100%25' height='100%25' %3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='0' y1='0' y2='1' gradientTransform='rotate(197)'%3E%3Cstop offset='0' stop-color='%23173d48'/%3E%3Cstop offset='1' stop-color='%23333333'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpattern id='b' width='14' height='14' patternUnits='userSpaceOnUse'%3E%3Ccircle fill='%23fdfdfd' cx='7' cy='7' r='7'/%3E%3C/pattern%3E%3Crect width='100%25' height='100%25' fill='url(%23a)'/%3E%3Crect width='100%25' height='100%25' fill='url(%23b)' fill-opacity='0.1'/%3E%3C/svg%3E");
  background-attachment: fixed;

  #title {
    display: block;
    text-decoration: none;
    text-align: center;
    color: $background-color;
    &:focus,
    &:hover {
      color: darken($background-color, 10%);
    }
    &:after {
      display: block;
      content: '';
      width: 5rem;
      height: 1px;
      margin: 10px auto;
      background-color: $background-color;
    }
  }
}

#header-page-list {
  margin: 0;
  text-align: center;

  a {
    color: darken($background-color, 10%);
    &:focus,
    &:hover {
      color: darken($background-color, 20%)
    }
  }
}