/* style.css */
.calculator {
    width: 320px;
    margin: 50px auto;
    padding: 15px;
    background: #222;
    border-radius: 10px;
    box-shadow: 0 4px 20px #0008;
}

.display {
    width: 85%;
    height: 50px;
    background: #111;
    color: #fff;
    font-size: 2em;
    margin-bottom: 15px;
    padding: 0 10px;
    border: none;
    text-align: right;
    border-radius: 5px;
}

.buttons-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.number-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 2;
}

.button-row {
    display: flex;
    gap: 8px;
}

.calc-btn {
    flex: 1;
    padding: 15px;
    font-size: 1.2em;
    background: #333;
    color: #fff;
    border: none;
    border-radius: 3px;
    transition: background 0.2s;
    cursor: pointer;
}

.calc-btn.clear {
    background: #A52A2A;
    color: #D2691;
    font-weight: bold;  
}

.operator-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-left: 10px;
    flex: 1;
}

.calc-btn.operator,
.calc-btn.equals {
    background: #388e3c;
    color: #fff;
}

/* Optional: styling for equals */
.calc-btn.equals {
    background: #1976d2;
}