*{
    margin:0;
    padding:0;
}
html, body{
    background-color: rgba(247,237,225,255);
}
html {
    font-size: 100%;
}
body {
    text-align :center;
}
@font-face{
    font-family: Permanent Marker;
    src: url('https://zimmer-auf-ruegen.apizentrum.com/fonts/google/PermanentMarker-Regular.ttf');
}
#vwrapper {
    width:80vw;
    margin-left:10vw;
}
#hwrapper{
    min-height:100%;
}
#header {
    height:15vh;
    padding: 0 5vw 0 0;
    color:rgb(79, 108, 80);
}
#logo{
    width: 300px;
    height: auto;
}
#content {
    min-height:75vh;
    background-image: url('https://zimmer-auf-ruegen.apizentrum.com/imgs/Kreidefelsen_Text1.jpg');
    background-size:cover;
    background-repeat: no-repeat;
    background-position-x:center;
    background-position-y:25%;
    color:rgb(60, 74, 58);
}
#main {
    height:100%;
    padding: 15vh 0 10vh 0;
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center
}
#footer{
    height:8vh;
    background-color: rgba(247,237,225,255);
}
#text-above {
    font-family: Permanent Marker, cursive;
    font-size:3em;
    font-variant: small-caps;
    color:white;
    text-shadow: 3px 3px 3px darkslategrey;
}
.blackwhite {
    color:rgb(60, 74, 58,255);
    text-decoration: none;
}
.blackwhite:hover {
    color:white;
    background-color: rgb(60, 74, 58,255);
    padding:5px;
}
#booking {
    border:1px solid black;
    margin:10vh 7vw 7vw;
    height: 10%;
}
#datenschutz, #impressum, #contact {
    width:auto;
    font-weight: bolder;
    padding-left:10vw;
    padding-right:10vw;
    padding: 5vw 5vw 10vh 5vw;
    background-color: rgb(230, 209, 183);
}


/* Tablet*/
@media screen and (min-width:501px) and (max-width:1200px){
    #footer{
        height: 5vh;
        /* background-color: red; */
    }
    #vwrapper {
        width:90vw;
        margin-left:5vw;
    }
    #header{
        height:8vh;
    }
    #logo{
        width:250px;
    }
    #content {
        height:88vh;
        background-image: url('https://zimmer-auf-ruegen.apizentrum.com/imgs/Kreidefelsen_Text2.jpg');
    }
    #text-above {
        font-size:2.5em;
    }
}
/* Tablet quer */
@media screen and (min-width:501px) and (max-width:1200px) and (orientation:landscape){
    /* #footer{
        background-color: blue;
    } */
    #header{
        height:12vh;
    }
    #content{
        min-height:78vh;
    }
}
/* Handy */
@media screen and (max-width:500px){
    footer{
        background-color: brown;
        height:6vh;
    }
    #vwrapper {
        width:96vw;
        margin-left:2vw;
    }
    #header{
        height:10vh;
    }
    #logo{
        width:160px;
    }
    #content {
        height: 84vh;
        background-image: url('https://zimmer-auf-ruegen.apizentrum.com/imgs/Kreidefelsen_Text2.jpg');
    }
    #text-above {
        font-size:1.2em;
    }
};
@media screen and (max-width:500px) and (orientation:landscape){
    #logo{
        width:100px;
    }
}