@font-face {
    font-family: 'MarkPro';
    src: url('MarkPro-Hairline.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'MarkPro';
    src: url('MarkPro-HairlineItalic.otf') format('opentype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'MarkPro';
    src: url('MarkPro-Thin.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'MarkPro';
    src: url('MarkPro-ThinItalic.otf') format('opentype');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'MarkPro';
    src: url('MarkPro-ExtraLight.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'MarkPro';
    src: url('MarkPro-ExtraLightItalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'MarkPro';
    src: url('MarkPro-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'MarkPro';
    src: url('MarkPro-LightItalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'MarkPro';
    src: url('MarkPro-Book.otf') format('opentype');
    font-weight: 350;
    font-style: normal;
}

@font-face {
    font-family: 'MarkPro';
    src: url('MarkPro-BookItalic.otf') format('opentype');
    font-weight: 350;
    font-style: italic;
}

@font-face {
    font-family: 'MarkPro';
    src: url('MarkPro.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'MarkPro';
    src: url('MarkPro-Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'MarkPro';
    src: url('MarkPro-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'MarkPro';
    src: url('MarkPro-MediumItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'MarkPro';
    src: url('MarkPro-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'MarkPro';
    src: url('MarkPro-BoldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'MarkPro';
    src: url('MarkPro-Heavy.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'MarkPro';
    src: url('MarkPro-HeavyItalic.otf') format('opentype');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'MarkPro';
    src: url('MarkPro-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'MarkPro';
    src: url('MarkPro-BlackItalic.otf') format('opentype');
    font-weight: 900;
    font-style: italic;
}

html {
    font-family: 'MarkPro', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}