*{
    margin: 0;
    padding: 0;
}

body{
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url('assests/images/background-image.jpg') center/cover no-repeat;
}

#calculator{
    height: 80vh;
    width: 28vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 50px;
    box-shadow: 0 0 50px 5px #000;
    background-color: rgba(255, 255, 255, 0.5);
}

#display{
    width: 20vw;
    height: 12vh;
    border: 1px solid #000;
    border-radius: 10px;
    text-align: right;
    margin-bottom: 35px;
    font-size: 10.5vh;
    box-shadow: 0 0 20px 1px #000;
    background-color: #f0f0f0;
}

#display:hover{
    cursor: text;
}

.buttons{
    width: 20vw;
    display: grid;
    grid-template-rows: 5;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 15px;
    column-gap: 20px;
}

.buttons > :nth-child(1),
.buttons > :nth-child(2){
    background-color: #f99154;
}

.buttons > :nth-child(1):hover,
.buttons > :nth-child(2):hover{
    background-color: #f78745;
}

.buttons > :nth-child(20){
    background-color: #dde5e6;
    color: #000;
}

.buttons > :nth-child(20):hover{
    background-color: #eaf3f5;
}

.buttons > :nth-child(3),
.buttons > :nth-child(4),
.buttons > :nth-child(8),
.buttons > :nth-child(12),
.buttons > :nth-child(16),
.buttons > :nth-child(19){
    background-color: #fed6bd;
    color: #000;
}

.buttons > :nth-child(3):hover,
.buttons > :nth-child(4):hover,
.buttons > :nth-child(8):hover,
.buttons > :nth-child(12):hover,
.buttons > :nth-child(16):hover,
.buttons > :nth-child(19):hover{
    background-color: #fde0cd;
}

.buttons > :nth-child(5),
.buttons > :nth-child(6),
.buttons > :nth-child(7),
.buttons > :nth-child(9),
.buttons > :nth-child(10),
.buttons > :nth-child(11),
.buttons > :nth-child(13),
.buttons > :nth-child(14),
.buttons > :nth-child(15),
.buttons > :nth-child(17),
.buttons > :nth-child(18){
    background-color: #332f2e;
    color: #fff;
}

.buttons > :nth-child(5):hover,
.buttons > :nth-child(6):hover,
.buttons > :nth-child(7):hover,
.buttons > :nth-child(9):hover,
.buttons > :nth-child(10):hover,
.buttons > :nth-child(11):hover,
.buttons > :nth-child(13):hover,
.buttons > :nth-child(14):hover,
.buttons > :nth-child(15):hover,
.buttons > :nth-child(17):hover,
.buttons > :nth-child(18):hover{
    background-color: #403d3d;
}

button{
    border: none;
    padding: 20px 15px;
    border-radius: 50%;
    font-size: large;
    box-shadow: 0 0 10px 1px #000;
}

button:hover{
    cursor: pointer;
}