body
{
margin: 0;
padding: 0;
color: #f6f6f6;
background-color: #2a2a2a;
font-family: 'Ubuntu', sans-serif;
text-align: center;
}

svg
{
width: 100%;
height: 300px;
}

svg text
{
fill: #f6f6f6;
}

svg path
{
shape-rendering: geometricPrecision;
}

#container
{
width: auto;
max-width: 700px;
margin: 2em auto;
text-align: center;
display: inline-block;
}

.titel
{
font-size: 36px;
}

.footer
{
margin: 4em 0 0 1em;
font-size: 12px;
line-height: 2em;
text-align: left;
}

.containers
{
width: 300px;
display: block;
margin: 1em auto;
}

.counter
{
text-anchor: middle;
font-size: 24px;
}

.heading
{
text-anchor: middle;
font-size: 16px;
}

.bg
{
fill: none;
stroke-opacity: 0.4;
}

.bg.inner
{
stroke: #fff07c;
}

.counter.second
{
fill: #fff07c;
}

.bg.outer
{
stroke: #3899c9;
}

.counter.first
{
fill: #3899c9;
}

.results
{
visibility: hidden;
}

@media screen and (min-width: 500px)
{
.containers
{
display: inline-block;
}
}