/**
 * Normalize
 */
@import "normalize";
@import "mixins";



/**
 * Fonts
 */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Thin-webfont.woff') format('woff');
  font-style: normal;
  font-weight: 100;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Light-webfont.woff') format('woff');
  font-style: normal;
  font-weight: 300;
}


@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Regular-webfont.woff') format('woff');
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Medium-webfont.woff') format('woff');
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Bold-webfont.woff') format('woff');
  font-style: normal;
  font-weight: 700;
}



/**
 * Variables
 */
$blue-dark: #1b325f;
$black-012: rgba(0, 0, 0, 0.12);
$black-026: rgba(0, 0, 0, 0.26);
$black-054: rgba(0, 0, 0, 0.54);

$wrapper-medium: 750px;
$wrapper-large: 970px;
$wrapper-xlarge: 1170px;

$tabs-transition-duration: 0.25s;
$tabs-transition-delay: 0.075s;
$tabs-transition-function: cubic-bezier(0.35, 0, 0.25, 1);

$navigation-width: 240px;



/**
 * Scaffolding
 */

// Reset the box-sizing
//
// Credit: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  // Sets a specific default `font-size` for user with `rem` type scales.
  // font-size: $font-size-root;
  // Changes the default tap highlight to be completely transparent in iOS.
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
  line-height: 1em;
  background: #f9f9f9;
  color: #333;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-top: 56px;

  @include medium {
    padding-top: 64px;
  }

}

main {
  flex: 1;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 2px;
  padding-bottom: 10px;
  font-size: 13px;

  @include medium {
    /**
     * Cards have a margin of 8px => left = 40px and top = 20px
     */
    padding-right: 0;
    padding-left: 0;
    padding-top: 20px;
    padding-bottom: 20px;
    width: $wrapper-medium;
    margin-left: auto;
    margin-right: auto;
  }

  @include large {
    width: $wrapper-large;
  }

  @include xlarge {
    padding-left: $navigation-width;
    width: $wrapper-xlarge;
  }
}