:root {
    /* CSS HEX */
    --page-background-color: #f4fdf6ff;
    --contrast-color-1: #1c5f33ff; /* This should be 278648 or darker */
    --contrast-color-2: #73288aff;
    --contrast-color-3: #2c5379ff;
}

body {
    background-color: var(--page-background-color);
    font-family: Spectral, Lucida, Helvetica, Verdana, sans-serif;
/*    font-size: 14pt;
    line-height: 150%;
    color: white; */
}

@font-face {
    font-family: "Spectral";
    src: local("Spectral"), url("Spectral-Regular.woff2") format("woff2");
}

/* Bootstrap overrides */
div.bg-body-tertiary {
    background-color: white;
    border-radius: 2em;
}

div.shadow {
    box-shadow: 0em 1em 2em rgba(0, 0, 0, .2);
}

h1.display-3 {
    color: var(--contrast-color-1);
    font-family: Montserrat, Verdana, sans-serif;
    font-size: 3.5em;
}

h2.display-5 {
    font-family: Montserrat, Verdana, sans-serif;
    font-weight: 200;
    font-style: normal;
    font-size: 2.5em;
}

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

.purple {
    color: var(--contrast-color-2);
}

.green {
    color: var(--contrast-color-1);
}

h5 {
    font-size: 100%;
    font-weight: 800;
    color: var(--contrast-color-2);
    margin-bottom: .5em;
}

h3 {
    font-weight: 400;
}

a {
    color: var(--contrast-color-1);
}

a:hover {
    color: var(--contrast-color-2);
    text-decoration: none;
}

a:visited {
    color: var(--contrast-color-1);
}

a.button {
    display: inline-block;
    padding: .5em 2em;
    border-radius: 2em;
    text-decoration: none;
}

a.button.primary {
    background: var(--contrast-color-1);
    color: white;
}

a.button.secondary {
    background: white;
    color: var(--contrast-color-1);
    border: 2px solid var(--contrast-color-1);
}

ul {
    list-style-type: none;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
}