.site-header {
  font-family: $heading-font-family;
  font-weight: bold;
  position: fixed;
  top: 0px;

  bottom: 0px;
  width: 100%;

  a:hover {
    text-decoration: none;
  }

  .content {
    height: 128px;
    width: 595px;
    position: absolute;
    top: 50%;
    left: 50%;
    @include transform(translate(-50%, -50%));
  }
}

.site-avatar {
  width: 128px;
  height: 128px;
  margin-bottom: 4px;
  border: 2px solid white;
  position: absolute;
  top: 0;
  left: 0;
  @include border-radius(400px);
  @include box-shadow(0px, 0px, 7px, rgba(0, 0, 0, 0.3));
}

.header-content {
  display: block;
  color: $name-color;
  font-size: 47px;
  line-height: 40px;
  margin-bottom: 5px;
  position: absolute;
  top: 30px;
  left: 160px;

  .site-name {
    text-transform: uppercase;
  }
  .site-nickname {
    color: $nickname-color;
    text-transform: lowercase;
  }
}

.site-description {
  font-size: 14px;
  margin-bottom: 8px;
  color: $sub-title-color;
  text-transform: uppercase;
  position: absolute;
  top: 28px;
  left: 11px;
}

.site-links {
  position: absolute;
  top: 52px;
  left: 7px;
  font-size: 22px;

  a {
    color: $link-color;
    position: relative;
    padding: 0px 5px;

    .link-text {
      visibility: hidden;
      font-size: $base-font-size;
      position: absolute;
      top: 20px;
      left: 50%;
      @include transform(translate(-50%, 0%));
    }
    &:hover {
      color: $link-hover-color;
      .link-text {
        visibility: visible;
      }
    }
  }
}