@font-face {
    font-family: "Promixa Nova";
    src: url("/font/proxima-nova/proximanova-regular.otf") format("opentype");
}

@font-face {
    font-family: "Promixa Nova Bold";
    src: url("/font/proxima-nova/proximanova-bold.otf") format("opentype");
}

@font-face {
    font-family: "Source Sans 3";
    src: url("/font/source-sans-3/SourceSans3-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Source Sans 3 Bold";
    src: url("/font/source-sans-3/SourceSans3-Bold.ttf") format("truetype");
}

:root {
    /* COLORS */
    --green: #77b300;
    --violet: #5b0091;
    --process-blue: #0082ca;
    --orange: #ff7900;
    --red: #cd202c;
    --gold: #f8b200;
    --blue: #00609c;
    --teal: #00a19c;
    --gray: #666666;
    --light-gray: #d1d1d1;
    --off-white: #f2f2f2;
    --delta-red: #a12b2f;
    --delta-green: #007836;
    --delta-blue: #0b1f8f;
    /* FONTS */
    --font-stack: "Proxima Nova", sans-serif, serif;
    --font-stack-titular: "Proxima Nova Bold", sans-serif, serif;
}

html, body {
    background-color: var(--off-white);
    font-family: var(--font-stack);
}

a {
    color: var(--blue);
    font-weight: bold;
    text-decoration: none;
}

a:hover {
    color: var(--process-blue);
}

input {
    padding: 0 0.5em;
}

select {
    background: white;
    border: solid gray thin;
    border-radius: 0.15em;
    padding: 0 0.25em;
}

.font-titular {
    font-family: var(--font-stack-titular);
}

/* Color Classes */
.green {
    color: var(--green);
}

.violet {
    color: var(--violet);
}

.process-blue {
    color: var(--process-blue);
}

.blue {
    color: var(--blue);
}