body {
    background: linear-gradient(to right, #80ccff, #80072f);
    display: flex;
    justify-content: center;
    align-items: center;    
    height: 100vh;  
}
  
.calculator {    
    background: #ffffff; 
    padding: 30px; 
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
}

#display {
    width: 100%;
    height: 50px;
    font-size: 24px;
    text-align: right;
    border: none;
    background: #f4f4f4;
    border-radius: 5px;
    margin-bottom: 10px;
}

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

button {
    width: 60px;
    height: 60px;
    font-size: 20px;
    background: #80072f;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.2s;
}

button:hover {
    background: #005700;
  
}
button:nth-child(4),
button:nth-child(8),
button:nth-chlid(12),
button:nth-child(16){
    background: #ff6b6b;
}
button:nth-child(4):hover,
button:nth-child(8):hover,
button:nth-chlid(12):hover,
button:nth-child(16):hover {
    background: #d94394;
}