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

$color-black: #353535;
$color-white: #ffffff;
$color-orange: #fd5d1f;
$color-orange-dark: #742100;
$color-primary-pastel: #fcf4f5;
$color-gray: #D3D3D3;
$color-php: #8892bf;
$color-breaking: #de5f5f;
$color-primary: #fe2977;
$color-secondary: #000;
$color-body: #111;
$color-primary-light: #FCF4F5;

$em-base: 16px;

$width-container: 1200px;
$width-container-mobile: 420px;
$width-container-mobile-lrg: 640px;
$width-base: 85ch;
$width-mobile: 460px;

@mixin clearfix() {
    clear: both;
    content: ' ';
    display: block;
}


$font-title: "Avenir", "Helvetica Neue", "Helvetica", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$font-title-comic: Bangers, Verdana, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$font-subtitle: Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$font-body: "Avenir",  ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

$font-serif: Times, "Times New Roman", serif;
$font-code: Menlo, Monaco, "Ubuntu Mono", "Courier New", monospace;

@mixin wrapper($width: $width-base, $padding-right: 0px) {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: $width;
    padding-right: $padding-right;

    @media (max-width: $width-base) {
        padding-right: 10px;
        padding-left: 10px
    }
}

@mixin outOfBox() {
    @media(min-width: 880px) {
        width: calc(100% + 48px);
        margin-left: -24px;
    }
}

@mixin outOfBoxWide() {
    @media(min-width: 1250px) {
        width: 1200px;
        margin-left: -200px;
    }
}


@mixin fontWeight() {
    font-weight: 400;

    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)
    {
        font-weight: 300;
    }
}
