body {
    margin: 40px auto;
    width: 470px;
    height: 391px;
}

html {
    background: #000000ad;
    
}

button {
    background: rgba(237, 234, 234, 0.59);
    width: 100px;
    height: 50px;
    border: none;
    border-radius: 5px;
    font-size: larger;
    outline: none;
    color: #000000c7;
}

.background {
    display: inline-block;
    border: thin solid #000000ad;
    background: #fbfbfbbf;
    box-shadow: inset 0px 0px 20px -4px;
    padding: 30px;
    border-radius: 20px;
}
.calculator {
    display: grid;
    grid: repeat(5, 50px) / repeat(4, 100px);
    grid-area: 2 / 2 / 2 / 2; 
    grid-gap: 2px 2px;
    height: 330px;
    
}

.screen {
    grid-area: 1 / 1 / 1 / span4;
    background: #ffffffc7;
    color: #000000c7;
    border-radius: 5px;
    text-align: end;
    padding: 10px 5px;
    font-size: xx-large;
    font-family: serif;
}

.whipe {
    display: grid;
    grid-area: 2 / 1 / 2 / span 4;
    grid: 50px / repeat(4, 100px);
    grid-gap: 2px 2px;
    margin-top: 20px;
}

.whipe button {
    width: 202px;
    height: 50px;
}

.backspace {
    display: grid;
    grid-area: 1 / 1 / 1 / span 2;
    align-content: end;
}

.clear {
    display: grid;
    grid-area: 1 / 3 / 1 / span 2;
    align-content: end;
}


.numpad {
    display: grid;
    grid-area: 3 / 1 / span 4 / span 3;
    grid: repeat(4, 50px) / repeat(3, 100px);
    grid-gap: 2px 2px;
    margin-top: auto;
}

.mouseoverBright{
    background: rgba(237, 234, 234, 0.96);
}

.mouseclickBright {
    background: rgba(253, 253, 253, 0.95);
}


.operations {
    display: grid;
    grid-area: 3 / 4 / span 4/ 4;
    grid: repeat(4, 50px) / 100px;
    grid-gap: 2px 2px; 
    margin-top: auto;
}

.dark button {
    background: #8080803b;
}

.mouseoverDark {
    background: rgba(128, 128, 128, 0.4196078431372549) !important;
}

.mouseclickDark {
    background: rgba(128, 128, 128, 0.52) !important;
}