body {
    background-color: blue;
}
.box{
    display: flex;
    flex-direction: row;
    width: 100vw;
    height: 100vh;
}

.text-box{
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 60vw;
}

.name {
    display: flex;
    height: 70vh;
    width: 60vw;
    text-align: right;
    align-items: center;            
    justify-content: end;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 8vw;
    color: rgb(243, 243, 243);
}

.quelle {
    display: flex;
    height: 30vh;
    width: 60vw;
    text-align: right;
    align-items: start;            
    justify-content: end;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 3.5vw;
    color: rgb(243, 243, 243);
}

.button-container {
    display: flex;
    height: 100vh;
    width: 40vw;
    justify-content: center;
    place-items: center;
    flex-direction: column;

}

.button{
    font-size: 2vw;
    color: rgb(243, 243, 243);
    background-color: blue;
    width: 18vw;            
    height: 7vw;
    margin: 10%;
    border: solid 3px  rgb(243, 243, 243) ;
    transition-property: all;
    transition-duration: 200ms;
    transition-delay: 0ms;
}

button:hover{
    background-color: rgb(243, 243, 243) ;
    color: blue;
}