@import url('https://fonts.googleapis.com/css2?family=Autour+One&display=swap');

body {
    background: linear-gradient(135deg, #f7e7a2, #fcd34d);
    font-family: 'Autour One', cursive;
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.calculator {
    width: 360px;
    background-color: #2e2e2e;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    padding: 20px;
}

.display {
    width: 100%;
    height: 70px;
    font-size: 2rem;
    border: none;
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 10px;
    text-align: right;
    background-color: #3b3b3b;
    color: #fff;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

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

.button,
.acButton,
.delButton,
.eqButton {
    background-color: #111;
    color: #fff;
    font-size: 1.5rem;
    border: none;
    border-radius: 10px;
    padding: 20px;
    transition: 0.2s ease;
    cursor: pointer;
}

.button:hover,
.acButton:hover,
.delButton:hover,
.eqButton:hover {
    background-color: #ffcc00;
    color: #000;
}

.acButton {
    background-color: #e63946;
}

.acButton:hover {
    background-color: #ff6b6b;
    color: white;
}

.delButton {
    background-color: #444;
    grid-column: span 2;
}

.delButton:hover {
    background-color: #777;
    color: white;
}

.eqButton {
    background-color: #00a86b;
    grid-column: span 2;
    font-size: 1.8rem;
}

.eqButton:hover {
    background-color: #2dd36f;
    color: white;
}
