body
{
margin: 0;
padding: 0;
font-family: Arial;
}

svg
{
overflow: hidden;
}

#chart
{
width: 95vw;
margin: 15px auto 0 auto;
position: relative;
}

.units
{
fill: none;
stroke: #636363;
stroke-opacity: 0;
}

.overlay
{
fill: none;
stroke: #000000;
stroke-width: 2px;
}

.lh
{
stroke: none;
fill: #000000;
font-size: 10px;
}

.label, .values
{
stroke: none;
fill: #000000;
font-size: 12px;
text-anchor: middle;
}

.values
{
font-size: 10px;
}

#tool
{
position: absolute;
display: none;
max-width: 150px;
background-color: rgba(255, 255, 255, 0.9);
font-size: 12px;
padding: 3px;
pointer-events: none;
cursor: default;
border: solid 1px #636363;
border-radius: 3px;
}

.symbols
{
font-size: 10px;
stroke: none;
fill: #000000;
}

#name
{
font-size: 16px;
text-align: center;
}

#what
{
text-align: center;
font-size: 24px;
}

#footer
{
width: 100%;
font-size: 12px;
line-height: 1.5em;
}

@media screen and (min-width: 1024px)
{
#footer
{
width: 75%;
font-size: 12px;
}
}

@media screen and (min-width: 1200px)
{
#footer
{
width: 50%;
font-size: 12px;
}
}