body {
    font-family: 'Arial', 'Helvetica', sans-serif;
    margin: 0;
}
h1 {
    font-family: 'Times New Roman', 'Georgia', serif;
    font-size: 4em;
    text-transform: uppercase;
    font-weight:lighter;
    letter-spacing: 5px;
}
a {color: black; text-decoration: none;}

#main {
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    background-image: url('img/IMG_9433.jpg');
    background-repeat: no-repeat;
    background-size:  100% auto;
}
#main img {
    width: 100%;
    height: 100%;
}
header{
    background: #00000080;
    color: white;
    height: 5em;
    text-align: center;
    padding-top: 0.1em;
    padding-bottom: 4em;
}
.bottom {
    position: absolute;
    width: 100%;
    background: #00000080;
    color: white;
    text-align: center;
    padding: 0.1em 0;
    bottom: 0;
}
.bottom span {display: inline-block;}
.bottom p {font-weight: lighter;}
.bottom a {color: white;}
footer {
    padding: 1em;
}


/* === Responsive View === */
@media only screen 
    and (min-device-width: 320px)
    and (max-device-width: 1024px) {
        h1 {font-size: 1.8em;}
        #main {
            background-size: auto 100vh;
            background-position: center;
        }
        header {
            height: auto;
            padding-top: 0.25em;
            padding-bottom: 0.5em;
        }
        .bottom {padding: 0;}
        .bottom p {font-size: 16px; line-height: 16px;}
        .bottom span {display: block;}
        .bottom  p {margin-bottom: 1em;}
        footer p {font-size: 14px;}
}
/* === Querformat === */
@media only screen 
    and (min-device-width: 320px)
    and (max-device-width: 1024px)
    and (orientation: landscape){
        .bottom span {display: inline-block;}
}