:root {

    /* color */

    --black-rgb: 7, 7, 8;
    --black: rgb(var(--black-rgb));

    --grey-dark: rgb(var(--grey-dark-rgb));
    --grey-dark-rgb: 49, 49, 49;

    --grey-medium: rgb(var(--grey-medium-rgb));
    --grey-medium-rgb: 115, 115, 115;

    --grey-light: rgb(var(--grey-light-rgb));
    --grey-light-rgb: 205, 205, 206;

    --white: rgb(var(--white-rgb));
    --white-rgb: 255, 255, 255;

    --orange: rgb(var(--orange-rgb));
    --orange-rgb: 255, 118, 20;

    --blue: rgb(var(--blue-rgb));
    --blue-rgb: 69, 118, 253;

    --blue-dark: rgb(var(--blue-dark-rgb));
    --blue-dark-rgb: 0, 0, 176;

    --yellow: rgb(var(--yellow-rgb));
    --yellow-rgb: 226, 226, 98;

    --red: rgb(var(--red-rgb));
    --red-rgb: 252, 67, 21;

    --green: rgb(var(--green-rgb));
    --green-rgb: 98, 246, 53;

    --main-height: 4.88rem;
    --footer-height: 75vh;
    --padding: 4.88rem;
    --main-gap: 7.20rem;
    --small-gap: 2.22rem;

    --max-width: 1800px;
}

@media screen and (max-width: 1150px) {
    :root {
        --padding: 3.5rem;
    }
}

@media screen and (max-width: 650px) {
    :root {
        --padding: 1rem;
        --footer-height: 50vh;
    }
}


/* font face */

@font-face {
    font-display: swap;
    font-family: 'Trap';
    src: local('Trap'),
    url('../../assets/font/Trap/Trap-Regular.woff2') format('woff2'),
    url('../../assets/font/Trap/Trap-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-display: swap;
    font-family: 'Trap';
    src: local('Trap'),
    url('../../assets/font/Trap/Trap-Medium.woff2') format('woff2'),
    url('../../assets/font/Trap/Trap-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-display: swap;
    font-family: 'WorkSans';
    src: local('WorkSans'),
    url('../../assets/font/WorkSans/WorkSans-Light.woff2') format('woff2'),
    url('../../assets/font/WorkSans/WorkSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-display: swap;
    font-family: 'WorkSans';
    src: local('WorkSans'),
    url('../../assets/font/WorkSans/WorkSans-Regular.woff2') format('woff2'),
    url('../../assets/font/WorkSans/WorkSans-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-display: swap;
    font-family: 'WorkSans';
    src: local('WorkSans'),
    url('../../assets/font/WorkSans/WorkSans-Medium.woff2') format('woff2'),
    url('../../assets/font/WorkSans/WorkSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-display: swap;
    font-family: 'WorkSans';
    src: local('WorkSans'),
    url('../../assets/font/WorkSans/WorkSans-SemiBold.woff2') format('woff2'),
    url('../../assets/font/WorkSans/WorkSans-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}