body {
    font-family: 'Roboto', sans-serif;
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 40px 20px;
    background-color: whitesmoke;
    justify-content: center;
}
header {
    padding: 0 0 30px 0;
    font-size: 30px;
}
#pad {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding: 40px;
    width: 40vmin;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 0 25px rgba(0,0,0,.2);
}
div[id="pad"] input {
    height: 1.5em;
    margin: 0 0 40px 0;
    text-align: center;
    font-size: 4em;
    border: none;
    border-radius: 20px;
    background-color: white;
    box-shadow: 0 0 25px rgba(0, 0, 0, .1);
}
#pad .keyboard {
    display: grid;
    grid-template-columns: repeat(3, 1fr);;
    grid-template-rows: repeat(4, 1fr);
    gap: 20px;
}
#pad .keyboard .key {
    display: flex;
    height: calc(40vmin / 3 - 20px / 2 );
    flex-direction: column;
    justify-content: center;
    text-align: center;    
    border-radius: 20px;
    box-shadow: 0 0 25px rgba(0, 0, 0, .1);
}
#pad .keyboard .key.number {
    font-size: 4em;
}
#pad .keyboard .key:not(.number) {
    font-size: 2em;
}
#pad .keyboard .key.clear {
    grid-area: 4 / 1 / 4 / 3;
}
