@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto/Roboto-Regular.ttf') format('truetype');
}

:root{
    --color1: #821938;
    --color1shadow: #2a2121;
    --color2: #666666;
    --color3: #F9FAFB;
    --white: #FFFFFF;
    --grey: #9d8b8d;
    --lightgrey: #F9F9F9;
    --textprimary: #ffffff;
    --textsecondary: #666666;
    --gray200: #F9FAFB;
    --color2: #21272A;

    --sb-text: #ffffff;
    --sb-text-dim: rgba(255,255,255,0.85);
    --sb-text-mute: rgba(255,255,255,0.70);
    --sb-pill-bg: rgba(255,255,255,0.10);
    --sb-pill-active: rgba(255,255,255,0.22);
    --sb-border: rgba(255,255,255,0.25);
    --sb-header-h: 160px;
    --sb-footer-h: 0px;
}

h1,h2,h3,h4,h5,h6{
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
}

h1{
    font-size: 2rem;
    color: var(--textsecondary);
}
h2{
    font-size: 1.5rem;
    color: var(--textsecondary);
}
h3{
    font-size: 1.6rem;
    color: var(--textsecondary);
}
h4{
    font-size: 1.4rem;
    color: var(--textsecondary);
}
h5{
    font-size: 1.2rem;
    color: var(--textsecondary);
}
h6{
    font-size: 1rem;
    color: var(--textsecondary);
}