* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

body {
    background-color: lightgray;
}

.debug {
    border: 1px solid black;
}

.main-container {
    margin-top: 25px;
    display: flex;
    height: 0vh;
    justify-content: center;
    align-items: flex-start;
}

.calculator {
    padding: 30px;
    background-color: #1C3144;
    border-radius: 20px;
    box-shadow: 6px 6px 10px 4px gray;
    border: 4px outset #1C3144;
}

.cal-screen {
    width: 448px;
    height: 150px;
    background-color: #C6D8D3;
    box-sizing: border-box;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 60px;
    font-weight: 600;
    overflow: hidden;
    box-shadow: 1px 1px 5px 4px #606d69 inset;
}

.upper-screen {
    height: 50%;
    font-size: 50px;
}

.upper-screen, .lower-screen {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.cal-buttons {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    height: 500px;
    width: 448px;
}


.flex-btn-main {
    width: 80px;
    height: 72px;
    box-sizing: border-box;
}

.equal-btn {
    height: 156px
}

.num-btn {
    font-weight: bold;
    font-size: 35px;
    border-radius: 24px;
    border: 4px outset black;
    border-color: inherit;
}


.operator, .negative, .equal-btn {
    font-weight: bold;
    font-size: 35px;
    background-color: #FFBA08;
    border-radius: 10px;
    border: 4px outset #FFBA08;
}

.exponent, .add, .divide, .equal-btn {
    font-size: 45px;
}

.exponent {
    padding-top: 9px;
}

.negative {
    font-size: 50px;
    padding-bottom: 7px;
}

.reset-btn, .del-btn {
    background-color: #eb4741;
    color: white;
    font-weight: bold;
    font-size: 28px;
    border-radius: 10px;
    border: 4px outset #eb4741;
}

.func, .paren, .deg-btn, .rad-btn, .prev-answer-btn {
    border-radius: 36px;
    font-weight: bold;
    font-size: 26px;
    background-color: #817E9F;
    color: white;
    border: 4px outset #8c89aa;
}

.paren {
    font-size: 34px;
    padding-bottom: 5px;
}

.paren-left {
    padding-right: 5px;
}

.paren-right {
    padding-left: 5px;
}

.active-unit-btn {
    color: #FFBA08;
}

button {
    cursor: pointer;
}

button:active {
    border-style: inset;
    padding-left: 4px;
    padding-top: 4px;
}

.exponent:active {
    padding-top: 13px;
    padding-left: 4px;
}

.paren-right:active {
    padding-left: 9px;
    padding-top: 4px;
}

.shrink {
    transform: scale(.86);
}