$font-color: #222 !default;
$font-size: 1em !default;
$line-height: 1.4 !default;
$selected-background-color: #b3d4fc !default;
$hr-color: #ccc !default;

@mixin h5bp-main {
  @include h5bp-base-styles;
}

// Base styles: opinionated defaults
@mixin h5bp-base-styles {
  html {
      color: $font-color;
      font-size: $font-size;
      line-height: $line-height;
  }

  // Remove text-shadow in selection highlight:
  // https://twitter.com/miketaylr/status/12228805301
  // These selection rule sets have to be separate.
  // Customize the background color to match your design.
  ::-moz-selection {
      background: $selected-background-color;
      text-shadow: none;
  }

  ::selection {
      background: $selected-background-color;
      text-shadow: none;
  }

  // A better looking default horizontal rule
  hr {
      display: block;
      height: 1px;
      border: 0;
      border-top: 1px solid $hr-color;
      margin: 1em 0;
      padding: 0;
  }

  // Remove the gap between audio, canvas, iframes,
  // images, videos and the bottom of their containers:
  // https://github.com/h5bp/html5-boilerplate/issues/440
  audio,
  canvas,
  iframe,
  img,
  svg,
  video {
      vertical-align: middle;
  }

  // Remove default fieldset styles.
  fieldset {
      border: 0;
      margin: 0;
      padding: 0;
  }

  // Allow only vertical resizing of textareas.
  textarea {
      resize: vertical;
  }
}