:root {
    --custom-primary-color: #0C0C0C;
    --custom-secondary-color: #F9CC3E;
}

body,
html {
    background-color: var(--custom-primary-color);
    color: white;
    font-family: 'Vogue', 'Roboto', sans-serif;
    font-weight: 700;
}

.bg-custom-primary {
    background-color: var(--custom-primary-color);
}

.bg-custom-secondary {
    background-color: var(--custom-secondary-color);
}

.text-custom-secondary {
    color: var(--custom-secondary-color) !important;
}

.btn-custom {
    background-color: var(--custom-secondary-color) !important;
    color: var(--custom-primary-color) !important;
    font-weight: 700;
    border-radius: 0;
}

.font-space-mono {
    font-family: 'SpaceMono';
}

h1,
h2,
h3,
h4,
h5,
h6 {
    /*  TODO: style headers  */
}

@font-face {
    font-family: 'SpaceMono';
    src: url('../fonts/SpaceMono-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SpaceMono';
    src: url('../fonts/SpaceMono-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SpaceMono';
    src: url('../fonts/SpaceMono-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SpaceMono';
    src: url('../fonts/SpaceMono-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}