body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #dee2ff;
    font-family: 'Courier New', Courier, monospace ;
}

h1 {
    font-family: "Comic Relief", system-ui;
    font-weight: 500;
    font-style: normal;
    font-size: clamp(24px, 8vw, 48px);
    color: #f72585;
    background-color: #fae1dd;
    padding: 12px 24px;
    border-radius: 24px;
    border: 20px;
    border-style:double;
}
.footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    gap: 8px;
    width: 100%;
    margin-top: auto;
}

.github-logo {
    max-width: 24px;
}

.calculator {
    min-width: 400px;
    border: 8px solid #ff99c8;
    border-style: outset;
    border-radius: 24px;
    min-height: 720px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #ffcad4;
}

.input-field {
    min-width: 380px;
    /* background-color: aliceblue; */
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: end;
    padding: 20px;
    border-radius: 24px;
}

.input {
    min-width: 380px;
    max-width: 380px;
    height: 100px;
    margin: 16px 0 12px 0;
    background-color: #dadada;
    border-radius: 12px;
    border: 4px;
    border-style: inset;
    border-color: #ff99c8;
    font-size: 48px;
    line-height:108px;
    padding-right: 12px;
    text-align: end;
    letter-spacing: 20px;

}
/* show user input on the right side later */

.input-history {
    margin-bottom: 4px;
    font-size: 28px;
    letter-spacing: 20px;
    min-height: 34px;
}

.clear-delete-buttons {
    display: flex;
    align-items: center;
    justify-content: space-around;
    min-width: 424px;
}

.clear-btn, .delete-btn {
    padding: 24px 48px;
    margin-bottom: 24px;
    border-radius: 20px;
    font-size: 28px;
    border-width: 4px;
    border-style: outset;
    transition: background-color 0.3s, transform 0.3s, border-style 0.3s;
    font-family:'Courier New', Courier, monospace;
}

.clear-btn {
    background-color: #fb6376;
    border-color: #e5383b;
}

.delete-btn {
    background-color: #d4bbfc;
    border-color: #9a99f2;
}

.clear-delete-buttons button:hover {
    transform: scale(1.02);
    border-style: inset;
}

.clear-delete-buttons button:active {
    transform: scale(0.98);
}

.clear-btn:hover {
    background-color: #e5383b;
}

.clear-btn:active {
    background-color: #d62828;
}

.delete-btn:hover {
    background-color: #9a99f2;
}

.delete-btn:active {
    background-color: #7b7af2;
}

.button-grid {
    min-width: 424px;
    /* background-color: aliceblue; */
}

.row-1, .row-2, .row-3, .row-4 {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 24px;
}

.button-grid button {
    min-width: 84px;
    min-height: 84px;
    border-radius: 200px;
    font-size: 32px;
    background-color: #b2f7ef;
    border-width: 4px;
    border-color: #7bdff2;
    border-style: outset;
    transition: background-color 0.3s, transform 0.3s, border-style 0.3s;
    font-family:'Courier New', Courier, monospace;
}

.button-grid button:hover {
    background-color: #7bdff2;
    transform: scale(1.02); 
    border-style: inset;
}

.button-grid button:active {
    transform: scale(0.98);
    background-color: #5ed0e6;
}

.division, .multiplication, .subtraction, .addition, .equals, .decimal {
    border-radius: 20px !important;
    font-size: 42px !important; 
    background-color: #c7f9cc !important;
    border-color: #80ed99 !important;
    padding-top: 8px;
}

.division:hover, .multiplication:hover, .subtraction:hover, .addition:hover {
    background-color: #80ed99 !important;
}

.division:active, .multiplication:active, .subtraction:active, .addition:active {
    background-color: #57e383 !important;
}

.equals {
    background-color: #ffd289 !important;
    border-color: #ffc15e !important;
}

.equals:hover {
    background-color: #ffc15e !important;
}

.equals:active {
    background-color: #ffb42f !important;
}

.decimal {
    background-color: #ffee99 !important;
    border-color: #ffe14c !important;
    border-radius: 32px !important;
}

.decimal:hover {
    background-color: #ffe14c !important;
}

.decimal:active {
    background-color: #ffd700 !important;
}


.simulated-hover {
    background-color: #7bdff2;
    transform: scale(1.02); 
    border-style: inset;
}

.simulated-active {
    transform: scale(0.98);
    background-color: #5ed0e6;
}

/* Special cases for operator buttons */
.division.simulated-hover, .multiplication.simulated-hover, 
.subtraction.simulated-hover, .addition.simulated-hover {
    background-color: #80ed99 !important;
}

.division.simulated-active, .multiplication.simulated-active, 
.subtraction.simulated-active, .addition.simulated-active {
    background-color: #57e383 !important;
}

/* Special case for equals button */
.equals.simulated-hover {
    background-color: #ffc15e !important;
}

.equals.simulated-active {
    background-color: #ffb42f !important;
}

/* Special case for decimal button */
.decimal.simulated-hover {
    background-color: #ffe14c !important;
}

.decimal.simulated-active {
    background-color: #ffd700 !important;
}

/* Special cases for clear-btn and delete-btn */
.clear-btn.simulated-hover {
    background-color: #e5383b !important;
}

.clear-btn.simulated-active {
    background-color: #d62828 !important;
}

.delete-btn.simulated-hover {
    background-color: #9a99f2 !important;
}

.delete-btn.simulated-active {
    background-color: #7b7af2 !important;
}

/* Special case for button-grid buttons */
.button-grid button.simulated-hover {
    background-color: #7bdff2 !important;
}

.button-grid button.simulated-active {
    background-color: #5ed0e6 !important;
}