@import url('https://fonts.googleapis.com/css2?family=Anta:wght@400;700&display=swap');

:root {
    /* Color Variables */
    --background-color: #F0F2F5; /* Soft Light Gray */
    --display-color: #FFFFFF; /* Clean White */
    --digit-button-color: #E8EAF6; /* Light Lavender */
    --operation-button-color: #FF9800; /* Warm Orange */
    --result-button-color: #4CAF50; /* Material Green */
    --special-button-color: #F44336; /* Material Red */

    --digit-button-color-hover: #C5CAE9;
    --digit-button-color-active: #9FA8DA;
    --operation-button-color-hover: #FFA726;
    --operation-button-color-active: #F57C00;
    --result-button-color-hover: #66BB6A;
    --result-button-color-active: #43A047;
    --special-button-color-hover: #EF5350;
    --special-button-color-active: #E53935;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Anta', sans-serif;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100dvh;
    background-color: var(--background-color);

}

.calculator {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    padding: 1rem;
    min-width: 375px;
    min-height: 600px;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    background-color: var(--display-color);
    gap: 2rem;
}

.display {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0.5rem;
    background-color: var(--display-color);
    font-size: 3rem;
    border-radius: 0.5rem;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.07);
}

.previous-operand {
    color: rgba(0, 0, 0, 0.75);
    font-size: 1.5rem;
    min-height: 1.5rem;
}

.current-operand {
    color: #000000;
    font-size: 2.5rem;
    font-weight: 700;
    word-wrap: break-word;
    word-break: break-all;
}

.keyboard {
    flex: 5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    gap: 0.9rem;
}

.row {
    flex: 1;
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    gap: 0.9rem;
}

#zero {
    border-radius: 25%/50%;
}

.span-two {
    flex: 1;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    gap: 0.9rem;
}
.button {
    flex: 1;
    border-radius: 50%;
    font-weight: 700;
    font-size: 1.2rem;
    cursor: pointer;
    border: none;
    color: #333333;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Consolidated button styles */
.digit,
.operator,
.equals,
.function-key {
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.digit {
    background-color: var(--digit-button-color);
}

.operator {
    background-color: var(--operation-button-color);
}

.equals {
    background-color: var(--result-button-color);
}

.function-key {
    background-color: var(--special-button-color);
    color: white;
}

/* Consolidated hover states */
.digit:hover { background-color: var(--digit-button-color-hover); }
.operator:hover { background-color: var(--operation-button-color-hover); }
.equals:hover { background-color: var(--result-button-color-hover); }
.function-key:hover { background-color: var(--special-button-color-hover); }

/* Consolidated active states */
.digit:active,
.operator:active,
.equals:active,
.function-key:active {
    transform: scale(0.95);
}

.digit:active { background-color: var(--digit-button-color-active); }
.operator:active { background-color: var(--operation-button-color-active); }
.equals:active { background-color: var(--result-button-color-active); }
.function-key:active { background-color: var(--special-button-color-active); }