/* Colors */
$primary-color: white;
$secondary-color: black;
$tertiary-color: #575757;
$tertiary-color-light: #EAEAEA;

/* Font */
$base-font-family: "Roboto", Arial;
$base-font-color: $secondary-color;

$base-font-size: 16px;
$big-font-size: 18px;
$biggest-font-size: 20px;

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Regular.ttf");
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Bold.ttf");
    font-weight: bold;
}

/* Layout */
$screen-width-extra-small: 320px;
$screen-width-small: 600px;
$screen-width-medium: 900px;
$screen-width-large: 1200px;

@mixin extra-small-screen {
    @media only screen and (min-width: #{$screen-width-extra-small}) {
        @content;
    }
}

@mixin small-screen {
    @media only screen and (min-width: #{$screen-width-small}) {
        @content;
    }
}

@mixin medium-screen {
    @media only screen and (min-width: #{$screen-width-medium}) {
        @content;
    }
}

@mixin large-screen {
    @media only screen and (min-width: #{$screen-width-large}) {
        @content;
    }
}

$header-height: 80px;
$content-max-width: 780px;