* {
    box-sizing: border-box;
    font: 400 normal 20px "Poetsen One", sans-serif;
    outline: none;
}

:root {
    --pageBg: #ffffff;
    --calcBg: #f2f2f2;
    --dsplyBg: #e0e0e0;
    --dsplyBrdr: #333333;
    --btnBg: #333333;
    --txtClr: #000000;
}

body, html {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--pageBg);
}

#calcBody {
    color: var(--txtClr);
    background-color: var(--calcBg);
    border: 3px solid black;
    width: 300px;
    justify-content: center;
    border-radius: 50px;
    box-shadow: 15px 15px black;
}

#display {
    font-size: 46px;
    border: 3px solid var(--dsplyBrdr);
    background-color: var(--dsplyBg);
    height: 150px;
    padding: 70px 10px 0px 10px;
    margin: 10px;
    margin-bottom: 20px;
    text-align: right;
    border-radius: 40px;
}

button {
    margin-right: 10px;
    margin-bottom: 12px;
    border-radius: 50px;
}

button:hover {
    cursor: pointer;
}

#buttons {
    width: 279px;
    height: 302px;
    display: flex;
    flex-direction: column;
    margin: 10px;
}

.btn {
    width: 50px;
    height: 50px;
    border: none;
}

.top-btns,
.mid-btns,
.bot-btns {
    margin-left: 15px;
}

#clear,
#equals {
    width: 115px;
    background-color: #8b0000;
    color: #ffffff;
    box-shadow: 5px 7px #5c0000;
}

/* Style for operator, decimal, and backspace buttons */
.operateBtn,
#decimal,
#backspace {
    background-color: #383838;
    color: #ffffff;
    box-shadow: 5px 7px #1e1e1e;
}

/* Style for number buttons */
.numBtn {
    border: 1px solid #000000;
    background-color: #f2f2f2;
    color: #000000;
    box-shadow: 5px 7px #b3b3b3;
}

/* Style for clear and equals buttons */
#clear:hover,
#equals:hover {
    transform: scale(1.09);
    box-shadow: 2px 4px rgba(92, 0, 0, 0.9);
}

/* Style for operator, decimal, and backspace buttons */
.operateBtn:hover,
#decimal:hover,
#backspace:hover {
    transform: scale(1.09);
    box-shadow: 2px 4px rgba(30, 30, 30, 0.9);
}

/* Style for number buttons */
.numBtn:hover {
    transform: scale(1.09);
    box-shadow: 2px 4px rgba(179, 179, 179, 0.9);
}