styles.css

body{
    height: 100%;
    background-color: #e7e7e7;
}
.calculator{
    color: #fff;
    background-color: rgb(149, 149, 149);
    height: 450px;
    width: 350px;
    border: 3px solid #DC7633;
    margin: 100px auto;
}

.calculator__screen{
    overflow: hidden;
    resize: none;
    font-size: 50px;
    text-align: right;
    padding: 0 20px;
    margin-left: 50px;
    margin-top: 20px;
    background-color: #212121;
    width: 200px;
    height: 60px;
}

.calculator__keys{
    padding: 0 10px;
    margin-top: 20px;
    display: grid;
    grid-gap: .25rem;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
    height: 330px;
}




.calculator__keys button{
    font-size: 25px;
    border: none;
    outline: none;
}

[data-math=add],
[data-operation=equals]{
    grid-row: span 2;
}

[data-number="0"]{
    grid-column: span 2;
}