* {
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: #EAE1C2;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90vh;
}

.calculator {
    background-color: #275C6E;
    width: 380px;
    height: auto;
    border-radius: 1rem;
    padding: 2rem 1rem;
}

.screen {
    background-color: #dbdbdb;
    width: 100%;
    height: 100px;
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: end;
    margin-bottom: 1rem;
    overflow: hidden;

    #previousOperation {
        margin-bottom: 10px;
    }

    #currentOperation {
        font-size: 2.2rem;
    }
}

.top-buttons {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;

    #clearBtn {
        flex: 1;
        background-color: #DB6E5A;
        color: #ffffff;
        padding: 1rem;
        font-size: 1.125rem;
        font-weight: 500;
        text-transform: uppercase;
        border-radius: 8px;
        border: none;
        cursor: pointer;
    }

    #deleteBtn {
        flex: 1;
        background-color: #dbdbdb;
        padding: 1rem;
        font-size: 1.125rem;
        font-weight: 500;
        text-transform: uppercase;
        border-radius: 8px;
        border: none;
        cursor: pointer;
    }
}

.buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;

    button {
        flex: 1 0 20%;
        padding: 1rem;
        font-size: 20px;
        border: none;
        background-color: #eee;
        border-radius: 8px;
        cursor: pointer;

        &:hover {
            background-color: #dfdfdf;
        }
    }
}