@font-face {
    font-family: Calculator;
    src: url("/fonts/Calculator.ttf");
}

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

body {
    background-color: #111111;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80vh;
}

#calculator-body {
    background-color: #2F302A;
    width: 550px;
    height: 650px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 13px 13px 33px 0px rgba(42, 43, 38, 0.90) inset, 
        -13px -13px 26px 0px rgba(52, 53, 46, 0.90) inset, 
        13px -13px 26px 0px rgba(42, 43, 38, 0.20) inset, 
        -13px 13px 26px 0px rgba(42, 43, 38, 0.20) inset, 
        -1px -1px 2px 0px rgba(42, 43, 38, 0.50), 
        1px 1px 2px 0px rgba(52, 53, 46, 0.30);
}

#above-display {
    display: flex;
    margin: 1.5em auto;
    width: 500px;
    height: 50px;
}

.detail-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: inherit;
    padding: 0px;
}

#branding {
    font-family: 'Orbitron';
    flex-grow: 1;
    letter-spacing: 1px;
    font-size: 20px;
    color: #E0E0DD;
}

#solar-detail {
    flex-grow: 2;
    background-color: #674D33;
    border-radius: 5px;
    box-shadow: inset 18px 18px 36px #543f2a,
                inset -18px -18px 36px #7a5b3c;
}

#detail {
    flex-grow: 1;
    color: #E0E0DD;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

#main-display {
    background-color: #948D6B;
    color: #000000;
    font-size: 60px;
    font-family: Caculator;
    border-radius: 5px;
    width: 500px;
    height: 80px;
    margin: 0 auto;
    box-shadow: inset 32px 32px 64px #726d52,
                inset -32px -32px 64px #b6ad84;
}

.edit-btn {
    background-color: #262721;
    border-radius: 5px;
    box-shadow: inset 32px 32px 64px #23241e,
                inset -32px -32px 64px #292a24;
    width: 240px;
    height: 80px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #E0E0DD;
    font-weight: 400;
    font-size: 30px;
}

#clear-btn {
    border: 0px;
    grid-column-start: 1;
    grid-column-end: 2;
    color: rgb(189, 62, 62);
}

#delete-btn {
    grid-column-start: 3;
    grid-column-end: 5;
    border: 0px;
    color: rgb(235, 133, 133);
}

#numpad-grid {
    margin: 10px auto;
    display: grid;
    justify-content: center;
    justify-content: space-between;
    align-items: center;
    grid-template-columns: 100px 100px 100px 100px;
    grid-template-rows: 80px 80px 80px 80px 80px;
    width: 500px;
    height: 430px;
    gap: 10px;
}

.numpad {
    border: 0px;
    border-radius: 5px;
    width: 105px;
    height: 80px;
    padding: 20px;
    font-size: 34px;
    font-weight: 800;
}

.operators {
    border: 0px;
    border-radius: 5px;
    width: 105px;
    height: 80px;
    padding: 20px;
    font-size: 34px;
    font-weight: 800;
}

.equal {
    border: 0px;
    border-radius: 5px;
    width: 105px;
    height: 80px;
    padding: 20px;
    font-size: 34px;
    font-weight: 800;
}