/// Color from starter-project palette
/// @access public
/// @author Silvestar Bistrović <me@silvestarbistrovic.from.hr>
/// @example color: $color-alpha;
/// @group 1.2 Colors
/// @name color-alpha
/// @since 1.0.0
$color-alpha: #ba1ada;

/// Color from starter-project palette
/// @access public
/// @author Silvestar Bistrović <me@silvestarbistrovic.from.hr>
/// @example color: $color-beta;
/// @group 1.2 Colors
/// @name color-beta
/// @since 1.0.0
$color-beta: #d91a79;

/// Color from starter-project palette
/// @access public
/// @author Silvestar Bistrović <me@silvestarbistrovic.from.hr>
/// @example color: $color-gamma;
/// @group 1.2 Colors
/// @name color-gamma
/// @since 1.0.0
$color-gamma: #1ed9d9;

/// Color from starter-project palette
/// @access public
/// @author Silvestar Bistrović <me@silvestarbistrovic.from.hr>
/// @example color: $color-delta;
/// @group 1.2 Colors
/// @name color-delta
/// @since 1.0.0
$color-delta: #1ebada;

/// Color for text from starter-project palette
/// @access public
/// @author Silvestar Bistrović <me@silvestarbistrovic.from.hr>
/// @example color: $color-text;
/// @group 1.2 Colors
/// @name color-text
/// @since 1.0.0
$color-text: #383738;

body {
  color: $color-text;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.wrapper {
  flex: 1 1 auto;
}

// Signature
//
// Signature is displayed at the bottom of the page.
// The main function of this element is to display
// "Powered by Starter Project" text. Help others by
// sharing this package.
// https://github.com/maliMirkec/starter-project
//
// Markup:
// <div class="sig">
//   <p>Powered by <a class="sig__link" href="https://github.com/maliMirkec/starter-project"><svg width="500" height="500" viewBox="0 0 500 500" class="sig__icon"><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> Starter Project</a>.</p>
// </div>
//
// Weight: 901
//
// Styleguide: Signature
.sig {
  align-items: baseline;
  background-image: linear-gradient(to right, transparentize($color-gamma, 0.85), transparentize($color-delta, 0.85));
  color: $color-text;
  display: flex;
  justify-content: center;
  line-height: 1;
  padding: rem(6px) rem(10px);

  p {
    font-size: ms(-1);
    margin: 0;
  }
}

.sig__link {
  align-items: baseline;
  display: inline-flex;
  text-decoration: none;
  transition: all $trd $tra;

  svg {
    height: rem(20px);
    margin-right: rem(2px);
    transform: translateY(rem(4px));
    transform-origin: center;
    transition: all $trd $tra forwards;
    width: rem(20px);
  }
}