*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
header, footer {
    background-color: rgba(10, 124, 218, 0.45);
    
    
}
body{
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-rows: 50px 40px 1fr 20px;
    grid-template-columns: 100%;
    grid-template-areas: 
        "header"
        "nav"
        "sitecontent"
        "footer";
    justify-items: center;
    gap:0;
}

header{
    grid-area: header;
    /* background-color: rgba(9, 92, 160, 0.596); */
    background-image: linear-gradient(rgba(68, 136, 192, 0.205), rgba(9, 92, 160, 0.7));
    color: white;
    font-size: 1.4em;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
    height: 80px;
    width: 100%;
    
}

nav{
    grid-area: nav;
    background-color: rgba(25, 75, 116, 0.39);
    box-shadow: 5px 5px 10px  rgba(0, 0, 0, 0.356);
    /* border-radius: 0 10px 10px 0;  */
    height: 40px;
    width: 100%;
}
main{
    grid-area: sitecontent;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background-color: rgba(9, 92, 160, 0.226);
    padding: 15px;
    float: left;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 50% 50%;
    grid-template-areas: 
        "section top_btn_right";
    justify-items: center;
    overflow-y: scroll;
    overflow-x: hidden;

}

footer{
    grid-area: footer;
    background-color: rgba(9, 92, 160, 0.521);
    box-shadow: 5px 5px 10px 10px rgba(0, 0, 0, 0.356);
    height: 20px;
    width: 100%;
    position: absolute;
    bottom: 0;
}

img{
    width: 100%;
    border: 5px solid white;
    box-shadow: 5px 5px 10px 10px rgba(0, 0, 0, 0.356);
}
#bild_left{
    transform: rotate(-8deg);
}
#bild_right{
    transform: rotate(8deg);
}
.float_left{
    grid-area: bottom_left;
    width: 80%;
    padding:30px;
}
.float_right{
    grid-area: bottom_right;
    float: right;
    width: 80%;
    padding:30px;

}
.btn_left{
    grid-area: top_btn_left;
}
.btn_right{
    grid-area: top_btn_right;
}
.btn{
    width:150px;
    height: 35px;
    /* background-color: rgba(13, 63, 104, 0.596); */
    background-image: linear-gradient( rgba(13, 63, 104, 0.596),  rgba(13, 63, 104, 0.884));
    border-radius: 5px;
    color: rgba(255, 255, 255, 0.788);
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 1.2em;
    line-height: 35px;
    text-align: center;
    cursor: pointer;
    border: 1px solid rgba(13, 63, 104, 0.897);
    margin: 20px;
}
.btn:hover{
    background-color: rgba(61, 109, 148, 0.719);
    background-image: none;
    color: rgba(10, 41, 66, 0.877);
}

.trans_ausblenden{
    opacity: 0;
    filter: blur(20px);
    transform: rotateY(360deg);
    
}
#div_left, #div_right{
    transition: all 0.5s linear;
}

@media screen and (max-width: 530px) {
    main{
        display: grid;
        grid-template-rows: auto 1fr auto 1fr;
        grid-template-columns: 100%;
        grid-template-areas: 
        "top_btn_left"
        "bottom_left"
        "top_btn_right"
        "bottom_right"
    ;
    }
    header{
        background-color: rgba(24, 4, 112, 0.096);
        color: black;
    }
    nav{
        font-size: 1.3em;
        /* border-radius: 0px 0px 10px 10px; */
    }
    #bild_left{
    transform: rotate(0deg);
    }
    #bild_right{
        transform: rotate(0deg);
    }
}