:root {
    font-family: 'Avenir', Arial, sans-serif;
    --background-color: #f4f0e8; 
    background-color: var(--background-color);
    
    /* Legend colors */
    --reward-color: #53a584;
    --bad-color: #d2042d;
    --main-color: steelblue;
}

html, body {
    font-size: 16pt;
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

h1 {
    text-align: center;
}

.text-section {
    max-width: 600px;
    margin: 0 auto;
}

.scrolly-section {
    margin: 3rem auto;
}

svg text {
    font-size: 10pt;
}

.chart {
    display: block;
}

.two-col-widget {
    display: grid;
    grid-template-columns: 1.62fr 1fr;
}

button {
    padding: 1em;
}

table {
    border-collapse: collapse;
}

th {
    border-bottom: 1px solid black;
}

th, td {
    font-size: 0.8em;
    padding: 0.2em 0.8em;
}

.legend {
    text-decoration: underline;
    text-decoration-thickness: 4px;
}

.reward {
    color: var(--reward-color);
}
rect.reward, circle.reward {
    fill: var(--reward-color);
}
path.reward, line.reward {
    stroke: var(--reward-color);
    fill: none;
}

.main {
    color: var(--main-color);
}
rect.main, circle.main {
    fill: var(--main-color)
}
path.main, line.main {
    stroke: var(--main-color);
    fill: none;
}

.bad {
    color: var(--bad-color);
}
rect.bad, circle.bad {
    fill: var(--bad-color);
}
path.bad, line.bad {
    stroke: var(--bad-color);
    fill: none;
}