@font-face {
    font-family: "Gilroy";
    src: url("../fonts/Gilroy-Black.eot");
    src: local("Gilroy Black"), local("Gilroy-Black"),
        url("../fonts/Gilroy-Black.eot?#iefix") format("embedded-opentype"),
        url("../fonts/Gilroy-Black.woff") format("woff"),
        url("../fonts/Gilroy-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: "Gilroy";
    src: url("../fonts/Gilroy-Regular.eot");
    src: local("Gilroy Regular"), local("Gilroy-Regular"),
        url("../fonts/Gilroy-Regular.eot?#iefix") format("embedded-opentype"),
        url("../fonts/Gilroy-Regular.woff") format("woff"),
        url("../fonts/Gilroy-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Gilroy";
    src: url("../fonts/Gilroy-Medium.eot");
    src: local("Gilroy Medium"), local("Gilroy-Medium"),
        url("../fonts/Gilroy-Medium.eot?#iefix") format("embedded-opentype"),
        url("../fonts/Gilroy-Medium.woff") format("woff"),
        url("../fonts/Gilroy-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Gilroy";
    src: url("../fonts/Gilroy-Bold.eot");
    src: local("Gilroy Bold"), local("Gilroy-Bold"),
        url("../fonts/Gilroy-Bold.eot?#iefix") format("embedded-opentype"),
        url("../fonts/Gilroy-Bold.woff") format("woff"),
        url("../fonts/Gilroy-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "Gilroy";
    src: local("Gilroy SemiBold"), local("Gilroy-SemiBold"),
        url("../fonts/Gilroy-SemiBold.eot?#iefix") format("embedded-opentype"),
        url("../fonts/Gilroy-SemiBold.woff") format("woff"),
        url("../fonts/Gilroy-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Gilroy";
    src: url("../fonts/Gilroy-Heavy.eot");
    src: local("Gilroy Heavy"), local("Gilroy-Heavy"),
        url("../fonts/Gilroy-Heavy.eot?#iefix") format("embedded-opentype"),
        url("../fonts/Gilroy-Heavy.woff") format("woff"),
        url("../fonts/Gilroy-Heavy.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
}

/*
 * COLORS
 * e
 */

$colors: (
    white: #ffffff,
    lightest_grey: #eaeaea,
    light_grey: #e4ebf2,
    mid_grey: #929aa6,
    footer: #cecfd2,
    copyright: #94969c,
    text: #393939,
    light_text: #f7f7f7,
    primary: #84bd3a,
    secondary: #272442,
    navy: #0c111d,
);

/* 	Fonts */
/*
*/

@function color($color) {
    @return map-get($colors, $color);
}

@mixin color-modifiers($attribute: "color", $prefix: "-") {
    @each $name, $hex in $colors {
        &#{$prefix}#{$name} {
            #{$attribute}: $hex;
        }
    }
}
@mixin alt-color-modifiers($attribute: "color", $prefix: "-") {
    @each $name, $hex in $colors {
        @if (lightness($hex) > 25) {
            &#{$prefix}#{$name}:hover {
                #{$attribute}: darken($hex, 10%);
            }
        } @else {
            &#{$prefix}#{$name}:hover {
                #{$attribute}: lighten($hex, 15%);
            }
        }
    }
}

.text {
    @include color-modifiers($prefix: "--");
}

.bg {
    @include color-modifiers($attribute: "background-color", $prefix: "--");
}

.border {
    @include color-modifiers($attribute: "border-color", $prefix: "--");
}

.btn {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    svg {
        max-width: 20px;
    }
    @include color-modifiers($attribute: "background-color", $prefix: "--");
    transition: all 300ms ease-in-out;
    &:hover {
        color: #fff;
        text-decoration: none;
    }
    @include alt-color-modifiers($attribute: "background-color", $prefix: "--");
}

$spaceamounts: (
    0,
    1,
    2,
    3,
    4,
    5,
    6,
    7,
    8
); // Adjust this to include the pixel amounts you need.
$sides: (top, bottom, left, right); // Leave this variable alone

@each $space in $spaceamounts {
    .z--#{$space} {
        position: relative;
        z-index: #{$space} !important;
    }
    .gap--#{$space} {
        gap: #{$space}px !important;
    }

    @each $side in $sides {
        .m#{str-slice($side, 0, 1)}--#{$space} {
            margin-#{$side}: #{$space}em !important;
        }

        .p--#{$space} {
            padding-#{$side}: #{$space}em !important;
        }

        .p#{str-slice($side, 0, 1)}--#{$space} {
            padding-#{$side}: #{$space}em !important;
        }
    }
}
$font-weights: (
    thin: 100,
    extra-light: 200,
    light: 300,
    regular: 400,
    medium: 500,
    semi-bold: 600,
    bold: 700,
    extra-bold: 800,
    black: 900,
);

@mixin font-weight-modifiers($prefix: "-") {
    @each $name, $weight in $font-weights {
        &#{$prefix}#{$name} {
            font-weight: $weight;
        }
    }
}

.font {
    @include font-weight-modifiers($prefix: "--");
}