body{
    font-family: sans-serif;
    margin: 0;
}
body.hidden {
    visibility: hidden;
  }

.container{
    padding: 20px;
}

.container-content {
    padding: 0 0 0 20px;
}

.header {
    height: 20vh;
    align-content: center;
    display: flex;
    gap: 20px;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}
.web_content {
    height: 70vh;
}
.footer{
    height: 10vh;
    align-content: center;
}

.banner{
    display: flex;
    flex-direction: row; 
    justify-self: center;
    justify-content: space-between; 
    width: 90%;
    height: 6vh;
    padding-top: 2vh;

}
button.login_button{
    background-color: #DDDE3A; 
    color: black; 
    padding: 10px 20px; 
    cursor: pointer;
    border: 3px solid #DDDE3A;
}
button.login_button:hover{
    background-color: #fff;
    color: #000; 
    padding: 10px 20px; 
    border: 3px solid #DDDE3A;
    cursor: pointer;
}
button.konto{
    background-color: #F6F6F6; 
    color: black; 
    padding: 10px 20px; 
    cursor: pointer;
    border: 3px solid #F6F6F6;
}
button.konto:hover{
    background-color: #fff;
    color: #000; 
    padding: 10px 20px; 
    border: 3px solid #F6F6F6;
    cursor: pointer;
}

.home_symbol{
    position: absolute;
    top: 8px;
    left: 8px;
    vertical-align: middle;
}
.home_symbol:hover{
    vertical-align: middle;
    filter: invert(100%) sepia(0%) saturate(2946%) hue-rotate(185deg) brightness(105%) contrast(93%);
}

.navigator {
    width: 90%;
    justify-self:center;
}

.related_info{
    display:flex; 
    flex-direction: row; 
    justify-content: space-between; 
    padding-top: 2vh;
    width: 90%;
    align-items: flex-end;
    justify-self: center;
}
text.footer{
    color: gray;
    font-size: 1em;
    font-weight:lighter;
}