@font-face {
  font-family: 'Inter UI';
  font-style:  normal;
  font-weight: 400;
  src: url("../fonts/Inter-UI-Regular.woff2") format("woff2"),
       url("../fonts/Inter-UI-Regular.woff") format("woff");
}
@font-face {
  font-family: 'Inter UI';
  font-style:  italic;
  font-weight: 400;
  src: url("../fonts/Inter-UI-Italic.woff2") format("woff2"),
       url("../fonts/Inter-UI-Italic.woff") format("woff");
}

@font-face {
  font-family: 'Inter UI';
  font-style:  normal;
  font-weight: 500;
  src: url("../fonts/Inter-UI-Medium.woff2") format("woff2"),
       url("../fonts/Inter-UI-Medium.woff") format("woff");
}
@font-face {
  font-family: 'Inter UI';
  font-style:  italic;
  font-weight: 500;
  src: url("../fonts/Inter-UI-MediumItalic.woff2") format("woff2"),
       url("../fonts/Inter-UI-MediumItalic.woff") format("woff");
}

@font-face {
  font-family: 'Inter UI';
  font-style:  normal;
  font-weight: 700;
  src: url("../fonts/Inter-UI-Bold.woff2") format("woff2"),
       url("../fonts/Inter-UI-Bold.woff") format("woff");
}

@font-face {
  font-family: 'Inter UI';
  font-style:  italic;
  font-weight: 700;
  src: url("../fonts/Inter-UI-BoldItalic.woff2") format("woff2"),
       url("../fonts/Inter-UI-BoldItalic.woff") format("woff");
}

@font-face {
    font-family: 'GT Walsheim';
    src: url('../fonts/GTWalsheim-Bold.woff2') format('woff2'),
        url('../fonts/GTWalsheim-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

// Config
support-for-ie = false
vendor-prefixes = webkit moz ms official

// Colors
color-default = #40444b
color-title = #000
color-gray = #777F86
color-border = #e3e3e3
color-navy = #363763
color-background = #F2F2F5
color-background-light = #fff
color-main-link = #fff
color-link = #fa9d01
color-link-hover = lighten(color-link, 10%)

// Typography
font-sans = "Inter UI", "Helvetica Neue", Helvetica, Arial, sans-serif
font-mono = "Inter UI", Monaco, Menlo, Consolas, monospace
font-title = "Inter UI", font-sans
font-size = 16px
line-height = 24px

// Layout
max-width = 1200px
gutter-width = 20px
sidebar-width = 30%
mobile-nav-width = 260px

// Media queries
mq-mobile = "screen and (max-width: 819px)"
mq-normal = "screen and (min-width: 820px)"
mq-tablet = "screen and (min-width: 480px)"