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

body {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    background-color: lavender;
    transition: background-color 0.5s ease, color 0.5s ease;
}

.calculator {
    background-color: white;
    border-radius: 16px;
    padding : 16px 24px;
    box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.5);
    transition: background-color 0.5s ease, color 0.5s ease;
}

.display {
    text-align: right;
    font-size: 32px;
    margin-top: 12px;
    margin-bottom : 16px;
    padding : 8px;
    background-color: rgb(255, 192, 201);
    border-radius: 8px;
}

.memory {
    height : 16px;
    color : rgb(158, 158, 158);
    text-align: right;
    font-size: 17px;
}


button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border : none;
    font-size: 24px;
    transition: filter 0.2s ease; 
    background-color: rgb(230, 230, 230);
    margin : 1px;
}

.top-btn {
    background-color: rgb(214, 214, 252);
    font-size: 18px;
}

.operator, .equals {
    background-color: rgb(255, 192, 201);
}

button:hover {
    filter: brightness(0.8);
}

.row {
    margin-bottom: 8px;
}

img {
    filter: brightness(60%)
}

body.dark-mode {
    background-color: rgb(141, 141, 215);
}

.calculator.dark-mode {
    background-color: #3f3f3f;
}

button.dark-mode {
    color: rgb(236, 236, 225);
    background-color: #787878;
}

button:hover.dark-mode {
    filter: brightness(1.2);
}

.top-btn.dark-mode {
    background-color: rgb(141, 141, 215);
}

.operator.dark-mode, .equals.dark-mode {
    background-color: rgb(177, 108, 118);
}

.display.dark-mode {
    background-color: rgb(177, 108, 118);
    color: rgb(241, 241, 231)
}