body {
    background-color: #000;
    color: #ccc;
    font-size:16px;
    margin:0.5em;
    padding:0.5em;
}

p {
    font-size:16px;
    margin:1.5em 0 0.5em 0;
    padding:0;
    max-width:35em;
}
ul {
    padding-left:2.25em;
}
li {
    list-style-type:square;
}
li p {
    margin-left:0em;
}

a {
    color: #888;
    text-decoration: underline;
}

h1 {
    margin:0px;
    font-size:32px;
    font-weight:bold;
}

h2:first-child {
    margin:0px;
}

h2 {
    margin:2em 0 0 0;
    border:0px;
    font-size:120%;
    font-weight:normal;
}

#header {
    margin-bottom: 2em;
    margin-top: 1em;
    margin-left:auto;
    margin-right:auto;
    padding:0px;
    width: 100%;
    text-align: center;
}
#header img {
    width: 100%;
    max-width:1000px;
    margin: 0;
}
#header .willkommen {
    font-size:130%;
}
#header p {
    margin:0px;
    max-width:inherit;
}

.main {
    margin: 0px auto;
    padding: 0px;
    width: 38em;
}

.fbox {
    border: 2px solid white;
    padding: calc(1.5em - 2px);
    margin: 5px 0px;
    overflow:auto;
}

iframe {
    width: 100%;
    height: 25em;
    border: 0px;
    margin: 0px;
    padding: 0px;
}

#fortschritt {
    margin-top: 1.5em;
}

#fortschritt p {
    color:#ffffff;
    font-size:10px;
    font-weight:bold;
    margin-top:0px;
    max-width:inherit;
    padding-left:1px;
}

#fortschritt p span {
    background:#4d44ff;
    color:#ffffff;
    display:inline-block;
}

.impressum
{
    background:#000000;
    color:#ffffff;
    font-size:90%;
    text-align:right;
}

@media screen and (max-width: 40em)
{
  .main {
    width: 100%;
  }
}