*{
    box-sizing: border-box;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
    
    background-color: #000;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    
    font-family: Arial,Helvetica,sans-serif;
    color: white;
}

#page-selection{
    display: flex;
    width: 100%;
}

#page-selection #benkel,
#page-selection #doerr{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 80px;
}

#page-selection #benkel{
    margin-right: -2vw;
    clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%);
    transition: 0.5s transform;
    
    background: #676765;
}

#page-selection #doerr{
    margin-left: -2vw;
    clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
    transition: 0.5s transform;
    
    background: #FFFFFF;
}

#page-selection #benkel img,
#page-selection #doerr img{
    width: 100%;
    height: auto;
}

@media (max-width: 979px) {
    #page-selection{
        flex-direction: column;
    }
    
    #page-selection #benkel,
    #page-selection #doerr{
        width: 100%;
        height: 50vh;
        padding: 20px;
        margin: 0;
        
        clip-path: none;
    }
    
    #page-selection #benkel img,
    #page-selection #doerr img{
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
    }
}

@media (min-width: 979px){
    #page-selection #doerr:hover{
        transform: scale(1.1);
    }

    #page-selection #benkel:hover{
         transform: scale(1.1);
    }
}