// Colors
$dark: #252830;
$light: #FFFFFF;
$red: #ff362e;
$yellow: #fecb00;
$purple: #a355ea;
$green: #0fb755;
$orange: #f19c1f;
$primary-color: #333447;
$primary-bg-color: #FFF;
$secondary-color: #00aeef;
// Fonts
$system-fonts: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Helvetica,
Arial,
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol";

@mixin font-1($weight) {
    font-family: 'Lato', sans-serif;
    font-weight: $weight;
}

@mixin font-2($weight) {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: $weight;
}
@mixin font-3($weight) {
    font-family: 'Open Sans', sans-serif;
    font-weight: $weight;
}

@mixin transition($speed) {
    -webkit-transition: all $speed ease-in-out;
    -moz-transition: all $speed ease-in-out;
    -o-transition: all $speed ease-in-out;
    transition: all $speed ease-in-out;
}
@mixin input($width) {
    outline: none;
    display: block;
    @include transition(0.4s);
    width: $width;
    padding: 5px 0;
    border-left: none;
    font-weight: 100;
    font-size: 1em;
    border-right: none;
    border-top: none;
    color: lighten($dark, 20%);
    border-bottom: 2px lighten($dark, 70%) solid;
}