body{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    flex-direction: column;
    background: #dde1e7;
    
}
.container{
    width: 60%;

}
.container .wrapper{
    min-width: 750px;
    max-width: 1000px;
    border-radius: 10px;
    padding: 25px;
    background: #dde1e7;
    box-shadow: -3px -3px 7px #ffffff73 ;
    2px 2px 5px rgba(94,104,121,0,288);
}
.wrapper .keys{
    display: flex;
    justify-content: center;
}
.wrapper .keys input{
    height: 50px;
    min-width: 50px;
    padding: 10px;
    outline: none;
    border: none;
    margin: 10px;
    border-radius: 10px;
    font-size: 20px;
    color: grey;
    text-transform: uppercase;
    background: #dde1e7;
    box-shadow: -3px -3px 7px #ffffff73 ;
    2px 2px 5px rgba(94,104,121,0,288);
}
.wrapper .keys input:active{
    color: #3498db;
    font-size : 19px;
    box-shadow: inset -3px -3px 7px #ffffff73 ;
    inset 2px 2px 5px rgba(94,104,121,0,288);
}
.wrapper .keys input[value="space"]{
    width: 60%;
}
.wrapper .display{
    width: 97%;
    height: 150px;
    margin-bottom:  20px;
    user-select: none;
}
.wrapper .display textarea{
height: 100%;
width: 100%;
border: none;
outline: none;
resize: none;
padding : 5px 15px;
border-radius: 10px;
font-size: 20px;
background: #dde1e7;
pointer-events: none;
box-shadow: inset -3px -3px 7px #ffffff73 ;
box-sizing: inset 2px 2px 5px rgba(94,104,121,0,288);
}