styles.css

html {
    background-color: hsl(31, 31%, 63%);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.calculator{
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(37,37,36,1) 51%, rgba(42,42,40,1) 82%, rgba(47,47,45,1) 100%);
    border-radius: 40px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: solid white 5px;
}

.display{
    display: flex;
    flex-direction: column;
    width: 420px;
    height: 145px;
    box-sizing: border-box;
    margin-bottom: 20px;
    background-color: hsl(50,56%,53%);
    border-radius: 20px;
    border : solid black 2px;
    box-shadow: inset -2px -2px 5px black, inset 2px 2px 5px black;
}

.sub-display{
    display: flex;
    justify-content: end;
    padding: 10px;
    box-sizing: border-box;
    height: 65px;
    width: 420px;
    font-family: "Londrina Sketch",sans-serif;
    font-size: 30px;
    font-weight: bold;
}

.main-display{
    display: flex;
    justify-content: end;
    padding: 10px;
    box-sizing: border-box;
    height: 80px;
    width: 420px;
    font-family: "Londrina Sketch",sans-serif;
    font-size: 45px;
    font-weight: bold;
}

.buttons{
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    height: auto;
    width: 420px;
}

.deletions{
    display: flex;
    justify-content: space-around;
}

.clear,
.delete{
    height: 50px;
    width: 160px;
    background-color: hsl(27,100%,60%);
    border-radius: 20px;
}

.numbers-and-operations{
    display: flex;
}

.numbers{
    display: flex;
    row-gap: 20px;
    column-gap: 28px;
    flex-wrap: wrap;
}

.operations{
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.operatorBtn{
    background-color: hsl(27,100%,60%);
}

.equalsBtn{
    background-color: hsl(27,100%,50%);
}

.numberBtn, 
.decimalBtn{
    background-color: hsl(50,56%,53%);
}

.operatorBtn,
.equalsBtn,
.numberBtn,
.decimalBtn{
    border-radius: 100%;
}

.clear,
.delete,
.operatorBtn,
.equalsBtn,
.numberBtn,
.decimalBtn{
    font-family: "Londrina Sketch",sans-serif;
    font-size: 42px;
    font-weight: bold;
    padding: 40px;
    border: solid black 2px;
    box-shadow: 2px 4px 0px black;
    border-color: transparent;
    outline: none;
}

button{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 50px;
}

.hover{
    transform: scale(1.1,1.1);
    transition: transform 200ms;
}

.hoverNumbersDecimal{
    background-color: hsl(50, 76%, 60%);
}

.hoverEquals{
    background-color: hsl(27, 100%, 57%);
}

.hoverOperators{
    background-color: hsl(27, 100%, 65%);
}

.hoverClearDelete{
    background-color: hsl(27, 100%, 65%);
}

.hoverRemove{
    transition: transform 100ms;
}