* {
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

body {
    background-color: hsl(222, 26%, 31%);
    color: hsl(0, 0%, 100%);
}

.result {
    background-color: hsl(224, 36%, 15%);
}

.calc {
    background-color: hsl(223, 31%, 20%)
}

.calcbutton {
    background-color: hsl(30, 25%, 89%);
    color: hsl(221, 14%, 31%);
    box-shadow: 0 5px hsl(28, 16%, 65%);
}

.deletebutton {
    background-color: hsl(225, 21%, 49%);
    color: hsl(0, 0%, 100%);
    box-shadow: 0 5px hsl(224, 28%, 35%);
}

.resetbutton {
    background-color: hsl(225, 21%, 49%);
    box-shadow: 0 5px hsl(224, 28%, 35%);
}

.equalbutton {
    background-color: hsl(6, 63%, 50%);
    box-shadow: 0 5px hsl(6, 70%, 34%);
}

.toggle-inputs {
    background-color: hsl(223, 31%, 20%);
}

.toggle-slider {
    background-color: hsl(6, 63%, 50%);
}