body, html {
    width: 100%;
    margin:0;
    padding:0;
    background-color: #222;
    color: #DDDDDD;
    overflow: hidden;
}
h3 {
    xbackground-color: #AAAAAA;
    xcolor: #111;
    color: #3D9970;
    padding:0.25em;
    font-family: 'Roboto', sans-serif;
    display: inline;
}

credits {
    display: block;
    clear: both;
}

credits p {
    font-family: 'Roboto', sans-serif;
    font-size: 0.8em;
}

/* thanks, s/o # 4407335 */
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

content {
    display: block;
}
.chart { }
#timeline { }
#map  { }

svg tspan, svg text { pointer-events: none }

presets { display: flex; margin-bottom:2em;  }
preset:nth-child(2) { text-align: center; }
preset:nth-child(3) { text-align: right; }
preset {
    padding: 1em;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    flex-basis: 0;
    flex-grow: 2;
}
preset:hover { text-decoration: underline; color: white }
.active  { background-color: #AAAAAA }

clr { clear: both }

@media (max-width: 620px) { svg tspan, svg text { font-size: 1.3em } }
@media (max-width: 470px) { svg tspan, svg text { font-size: 1.5em } }
@media (max-width: 400px) { svg tspan, svg text { font-size: 2em; margin-top: 4px; } }