// Header
//
// Header is displayed at the top of the page and it consists
// of title, logo and tagline.
//
// Markup:
// <div class="header">
//   <h1>Starter Project</h1>
//   <svg width="500" height="500" viewBox="0 0 500 500"><defs><filter id="starter-project-a" width="105.2%" height="105.2%" x="-2.6%" y="-1.9%" filterUnits="objectBoundingBox"><feOffset dy="3" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="3"></feGaussianBlur><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"></feColorMatrix><feMerge><feMergeNode in="shadowMatrixOuter1"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter><linearGradient id="starter-project-b" x1="0%" y1="50%" y2="50%"><stop offset="0%" stop-color="#BA1ADA"></stop><stop offset="100%" stop-color="#D91A79"></stop></linearGradient><linearGradient id="starter-project-c" x1="100%" x2="0%" y1="50%" y2="50%"><stop offset="0%" stop-color="#1ED9D9"></stop><stop offset="100%" stop-color="#1EBADA"></stop></linearGradient><path id="starter-project-d" d="M250 225l-150 75V100l150 75v-75h50v200h-50v-75z"></path><filter id="starter-project-e" width="103%" height="103%" x="-1.5%" y="-1.5%" filterUnits="objectBoundingBox"><feGaussianBlur in="SourceAlpha" result="shadowBlurInner1" stdDeviation="2"></feGaussianBlur><feOffset dy="2" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset><feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"></feComposite><feColorMatrix in="shadowInnerInner1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"></feColorMatrix></filter></defs><g fill="none" fill-rule="evenodd" filter="url(#starter-project-a)" transform="translate(50 50)"><path fill="url(#starter-project-b)" d="M80 35h320v365H0V0h80v35z"></path><use fill="url(#starter-project-c)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#starter-project-d"></use><use fill="#000" filter="url(#starter-project-e)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#starter-project-d"></use></g></svg>
//   <h5>A set of latest best practices packed in Gulp tasks</h5>
// </div>
//
// Weight: 201
//
// Styleguide: Header
.header {
  align-items: center;
  background-image: linear-gradient(to bottom right, $color-gamma, adjust-hue($color-gamma, 10%));
  color: $color-epsilon;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  padding: rem(10px);

  h1 {
    flex: 0 0 auto;
    width: auto;
  }

  img {
    flex: 0 0 rem(50px);
    height: auto;
    margin-right: rem(10px);
    margin-top: rem(-5px);
    max-width: 100%;
    width: rem(50px);
  }

  h5 {
    flex: 0 0 100%;
    margin-bottom: rem(20px);
    margin-top: 0;
    text-align: center;
    width: 100%;
  }
}