* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: sans-serif;
    background: linear-gradient(to bottom right, #32448c, #6a30a4);
}
.container {
    height: 100vh;
    display: grid;
    place-items: center;
}

.calculator {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    position: relative;
    transition: 0.3s;
}

/* DARK MODE */
.calculator.dark {
    background: #071115;
}

/* TOGGLE BUTTON */
.theme-toggler {
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
    font-size: 20px;
}

/* DISPLAY */
#display {
    height: 100px;
    max-width: 260px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    font-size: 28px;
    margin-bottom: 15px;
    overflow-x: auto;
    color: #000;
}

.calculator.dark #display {
    color: #fff;
}

/* BUTTONS */
button {
    height: 60px;
    width: 60px;
    margin: 5px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 18px;
    transition: 0.2s;
}

button:hover {
    transform: scale(1.1);
}

/* BUTTON COLORS */
.btn-number {
    background: #c3eaff;
}

.btn-operator {
    background: #ffd0fb;
}

.btn-equal {
    background: #adf9e7;
}

/* DARK BUTTONS */
.calculator.dark .btn-number {
    background: #1b2f38;
    color: #fff;
}

.calculator.dark .btn-operator {
    background: #2e1f39;
    color: #fff;
}

.calculator.dark .btn-equal {
    background: #223323;
    color: #fff;
}

/* EQUAL HEIGHT */
#equal {
    height: 130px;
}