@font-face {
    font-family: 'Public Bold';
    src: url('VulfSans-Bold.eot');
    src: local('Public Sans Bold'), local('PublicSans-Bold'),
        url('PublicSans-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Public Regular';
    src: url('public-Regular.eot');
    src: local('public Sans'), local('public-Regular'),
        url('PublicSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Public Medium';
    src: url('Public-Medium.eot');
    src: local('Public Sans Medium'), local('Public-Medium'),
        url('./PublicSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

 

@font-face {
    font-family: 'public Black';
    src: url('public-Black.eot');
    src: local('public Sans Black'), local('public-Black'),
    url('./PublicSans-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}



@font-face {
    font-family: 'public LightItalic';
    src: url('public-LightItalic.eot');
    src: local('public Sans Light Italic'), local('public-LightItalic'),
        url('./PublicSans-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}



@font-face {
    font-family: 'Public Light';
    src: url('Public-Light.eot');
    src: local('Public Sans Light'), local('Public-Light'),
        url('PublicSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}


:root {
    /* Font variables */
    --public-bold: 'Public Bold', sans-serif;
    --public-regular: 'Public Regular', sans-serif;
    --public-medium: 'Public Medium', sans-serif;
    --public-black: 'Public Black', sans-serif;
    --public-lightitalic: 'Public LightItalic', sans-serif;
    --public-light: 'Public Light', sans-serif;
  }