/* Variables */

/* Layout*/
$container-width: 700px;
$header-padding: 15%;
$footer-height: 100px;
$footer-height-sm: 250px;
$number-footer-sections: 5;

/* Colors*/
$body-background: #f7f7f7;
$primary: #7cb7de;
$primary--darker: #53a1d4;
$primary--darkest: #3189c3;

/* credit: https://github.com/tylerchilds/cutestrap/blob/master/src/sass/variables/_colors.scss */
$gray1: #3c3c3d !default;
$gray2: #5a5a5b !default;
$gray3: #7d7d7e !default;
$gray4: #cdcdce !default;
$gray5: #dededf !default;
$gray6: #efeff0 !default;

$alert--success--base: #a1d490;
$alert--success--background: #dff0da;
$alert--success--border: #3b6e2a;
$alert--success--text: $alert--success--border;

$alert--error--base: #e88282;
$alert--error--background: #f8d8d8;
$alert--error--border: #b12020;
$alert--error--text: $alert--error--border;

$alert--neutral--base: #999;
$alert--neutral--background: #f2f2f2;
$alert--neutral--border: #333333;
$alert--neutral--text: $alert--neutral--border;

/* Typography*/
$fs-smaller: 0.7em;
$lh-smaller: 1.5em;
$font-family: 'Roboto', sans-serif;

/* buttons*/
$border-radius: 0;

/* Mixins*/

@mixin flex-wrapper-baseline() {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

@mixin flex-wrapper-middle() {
  display: flex;
  flex-wrap: wrap;
  align-items: middle;
}

@mixin flex-wrapper-top() {
  display: flex;
  flex-wrap: wrap;
  align-items: top;
}
