@font-face {
    font-family: 'Roboto';
    src: url('/fonts/roboto.ttf') format('truetype');
    font-weight: 100 900;
    font-stretch: 75% 100%;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/open-sans.ttf') format('truetype');
    font-weight: 100 900;
    font-stretch: 75% 100%;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/montserrat.ttf') format('truetype');
    font-weight: 100 900;
    font-stretch: 75% 100%;
}

@font-face {
    font-family: 'Nunito';
    src: url('/fonts/nunito.ttf') format('truetype');
    font-weight: 100 900;
    font-stretch: 75% 100%;
}

@font-face {
    font-family: 'Caveat';
    src: url('/fonts/caveat.ttf') format('truetype');
    font-weight: 100 900;
    font-stretch: 75% 100%;
}

@font-face {
    font-family: 'Russo One';
    src: url('/fonts/russo-one.ttf') format('truetype');
    font-weight: 100 900;
    font-stretch: 75% 100%;
}

@font-face {
    font-family: 'Commissioner';
    src: url('/fonts/commissioner.ttf') format('truetype');
    font-weight: 100 900;
    font-stretch: 75% 100%;
}

@font-face {
    font-family: 'Shantell Sans';
    src: url('/fonts/shantell-sans.ttf') format('truetype');
    font-weight: 100 900;
    font-stretch: 75% 100%;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/fonts/ibm-plex-sans.ttf') format('truetype');
    font-weight: 100 900;
    font-stretch: 75% 100%;
}

@font-face {
    font-family: 'Playfair';
    src: url('/fonts/playfair.ttf') format('truetype');
    font-weight: 100 900;
    font-stretch: 75% 100%;
}

@font-face {
    font-family: 'Balsamiq Sans';
    src: url('/fonts/balsamiq-sans.ttf') format('truetype');
    font-weight: 400;
    font-stretch: 75% 100%;
}

@font-face {
    font-family: 'Balsamiq Sans';
    src: url('/fonts/balsamiq-sans-bold.ttf') format('truetype');
    font-weight: 700;
    font-stretch: 75% 100%;
}

@font-face {
    font-family: 'PT Serif';
    src: url('/fonts/pt-serif.ttf') format('truetype');
    font-weight: 400;
    font-stretch: 75% 100%;
}

@font-face {
    font-family: 'PT Serif';
    src: url('/fonts/pt-serif-bold.ttf') format('truetype');
    font-weight: 700;
    font-stretch: 75% 100%;
}

@font-face {
    font-family: 'Andika';
    src: url('/fonts/andika.ttf') format('truetype');
    font-weight: 400;
    font-stretch: 75% 100%;
}

@font-face {
    font-family: 'Andika';
    src: url('/fonts/andika.ttf') format('truetype');
    font-weight: 700;
    font-stretch: 75% 100%;
}

:root {
    --font-family: 'Roboto', sans-serif;
    --header-background-color: #ffffff;
    --header-text-color: #2cb3ea;
    --menu-background-color: #ffffff;
    --menu-text-color: #2cb3ea;
    --footer-background-color: #67c150;
    --footer-text-color: #ffffff;
    --main-services-color: #67c150;
    --secondary-app-color: '{secondary_app_color}';
    --background-app-color: '{background_app_color}';
    --main-team-color: '{main_team_color}';
    --background-services-color: #ffffff;
    --background-team-color: '{background_team_color}';
    --disabled: #eee;
    --error: #dc3545;
    --light-gray: #f9f9f9;
}

body {
    font-family: var(--font-family), sans-serif !important;
}