style.css

html {
    box-sizing: border-box;
    height: 100%;
}

* {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

body {
    align-items: center;
    background: linear-gradient(135deg, #07ca11, #e44d07, #24c4a9);
    display: flex;
    font-display: swap;
    height: inherit;
    justify-content: center;
}

.calculator {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background: rgba(135, 135, 135, 0.3);
    border: 1px solid rgba(135, 135, 135, 0.3);
    border-radius: 25px;
    box-shadow: 0 0 20px rgba(35, 35, 35, 0.5);
    height: 552.5px;
    padding: 30px;
}

.screen {
    background: rgba(43, 43, 43, 0.8);
    border: 1px solid rgba(43, 43, 43, 0.2);
    border-radius: 16px;
    box-shadow: 0 0 10px rgba(35, 35, 35, 0.5);
    padding: 0px 10px;
    width: 320px;
    font-size: 52px;
    color: #fff;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.buttons {
    margin-top: 12.5px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
    width: 320px;
}

button {
    background: rgba(43, 43, 43, 0.9);
    border: 1px solid rgba(43, 43, 43, 0.1);
    border-radius: 50%;
    color: #fff;
    font-size: 28px;
    font-weight: bold;
    height: 72.5px;
}

button:nth-child(17) {
    grid-column: span 2;
    border-radius: 36.25px;
}

button:nth-child(4n),
button:last-child {
    background: #db7909;
    border: 1px solid #db7909;
    font-size: 35px;
}

button:first-child,
button:nth-child(2),
button:nth-child(3) {
    background: rgba(200, 200, 200, 0.5);
    border: 1px solid rgba(200, 200, 200, 0.1);
    color: #000;
    font-size: 25px;
    font-weight: bold;
}

button:active {
    background: rgb(200, 200, 200);
    border: 1px solid rgb(200, 200, 200);
}

button:nth-child(4n):active,
button:last-child:active {
    color: #db7909;
}