.calculator {

    max-width: 500px;

    margin: auto;

    background: white;

    padding: 20px;

    border-radius: 15px;

    box-shadow:
    0 4px 15px rgba(0,0,0,0.1);

}

#display {

    width: 100%;

    height: 70px;

    font-size: 24px;

    text-align: right;

    padding: 15px;

    margin-bottom: 15px;

    border-radius: 10px;

    box-sizing: border-box;

}

.btn-grid {

    display: grid;

    grid-template-columns:
    repeat(5, 1fr);

    gap: 10px;

}

.btn-grid button {

    padding: 15px;

    font-size: 18px;

    border: none;

    border-radius: 10px;

    cursor: pointer;

    background: #f1f5f9;

}

.btn-grid button:hover {

    background: #e2e8f0;

}

.equal-btn {

    grid-column: span 5;

    background: #2563eb !important;

    color: white;

    font-size: 22px;

}

.dark-mode .calculator {

    background: #2a2a2a;

}

.dark-mode #display {

    background: #121212;

    color: white;

    border: 1px solid #444;

}

.dark-mode .btn-grid button {

    background: #3a3a3a;

    color: white;

}