styles.css

* {
    box-sizing: border-box;
}

@font-face {
    font-family: digital7;
    src: url(Digital7-rg1mL.ttf);
}

html, body {
    height: 100%;
}

html, body, .equation, .result, .buttons, .addition {
    width: 100%;
}

body {
    background-image: url('images/bg.jpg');
    justify-content: space-around;
}

body, .calculator, .display-background, .display, .equation, .result, .solar-cell-frame, .solar-cell, .buttons, .clear-buttons, .number-buttons, .number-buttons div, .operator-buttons div, .operator-buttons, footer {
    display: flex;
}

body, .calculator, .display, .clear-buttons, .number-buttons, .operator-buttons {
    flex-direction: column;
}

body, .calculator, .display-background, .solar-cell-frame, footer {
    align-items: center;
}

.calculator {
    border: 3px solid #3f3c59;
    width: 43rem;
    height: 45rem;
    background-color: #68618f;
    box-shadow: #3f3c59 1px 1px 0,
                #3f3c59 2px 2px 0,
                #3f3c59 3px 3px 0,
                #3f3c59 4px 4px 0,
                #3f3c59 5px 5px 0,
                #3f3c59 6px 6px 0,
                #3f3c59 7px 7px 0,
                #3f3c59 8px 8px 0,
                #3f3c59 9px 9px 0,
                #3f3c59 10px 10px 0,
                #3f3c59 11px 11px 0,
                #3f3c59 12px 12px 0,
                #3f3c59 13px 13px 0,
                #3f3c59 14px 14px 0,
                #3f3c59 15px 15px 0,
                #3f3c59 16px 16px 0,
                #3f3c59 17px 17px 0,
                #3f3c59 18px 18px 0,
                #3f3c59 19px 19px 0,
                #3f3c59 20px 20px 0,
                #3f3c59 21px 21px 0,
                #3f3c59 22px 22px 0,
                #3f3c59 23px 23px 0,
                #3f3c59 24px 24px 0,
                #3f3c59 25px 25px 0,
                #3f3c59 26px 26px 0,
                #3f3c59 27px 27px 0;
}

.calculator, .buttons {
    justify-content: space-evenly;
}

.buttons button:active {
	background-color: #584d6e;
	box-shadow: #3f3c59 1px 1px 0,
                #3f3c59 2px 2px 0,
                #3f3c59 3px 3px 0,
                #3f3c59 4px 4px 0;
	transform: translateX(2px) translateY(2px);
}

.buttons button.active {
	background-color: #584d6e;
	box-shadow: #3f3c59 1px 1px 0,
                #3f3c59 2px 2px 0,
                #3f3c59 3px 3px 0,
                #3f3c59 4px 4px 0;
	transform: translateX(2px) translateY(2px);
}

.display-background {
    border: 2px solid #584d6e;
    width: 85%;
    height: 6rem;
    justify-content: center;
}

.display-background, button {
    background-color: #c5b7e2;
}

.display {
    border: 2px solid #88795e;
    width: 96%;
    height: 90%;
    background-color: #b49765;
    box-shadow: inset 4px 4px 4px rgba(0, 0, 0, 0.7),
              inset -2px -2px 4px rgba(255, 255, 255, 0.4);
    font-family: digital7, sans-serif;
    font-size: 2rem;
    padding: 0 0.5rem 0 0.5rem;
}

.equation {
    justify-content: flex-start;
}

.equation, .result, .solar-cell-part {
    flex: 1;
}

.equation, .result {
    align-items: center;
}

.result {
    justify-content: flex-end;
}

.solar-cell-frame {
    border: 2px solid #865a69;
    width: 93%;
    height: 5rem;
    background-color: #af7589;
}

.solar-cell {
    border: 1px solid #88795e;
    width: 35%;
    height: 2rem;
    background-color: #b49765;
    box-shadow: inset 3px 3px 3px rgba(0, 0, 0, 0.7),
              inset -2px -2px 2px rgba(255, 255, 255, 0.4);
    margin-left: 55%;
}

.solar-cell-part {
    border: 1px solid rgb(134, 118, 91);
}

.number-buttons div button, .remainder, .multiplication, .subtraction, .division {
    width: 4.5rem;
    height: 4.5rem;
}

.clear-buttons, .operator-buttons {
    justify-content: space-between;
}

.ce, .c {
    width: 5rem;
}

.ce, .c, .addition {
    height: 9rem;
}

.number-buttons, .operator-buttons {
    gap: 1rem;
}

.number-buttons div, .operator-buttons div {
    gap: 0.8rem;
}

.remainder {
    font-size: 1.5rem;
}

.addition {
    font-size: 4rem;
}

button {
    font-size: 2rem;
    box-shadow: #473e59 1px 1px 0,
                #473e59 2px 2px 0,
                #473e59 3px 3px 0,
                #473e59 4px 4px 0,
                #473e59 5px 5px 0,
                #473e59 6px 6px 0,
                #473e59 7px 7px 0,
                #473e59 8px 8px 0;
    border: 2px solid #473e59;
    cursor: pointer;
}

button, span {
    font-family: 'Changa', sans-serif;
}

footer {
    gap: 6px;
}

span {
    font-size: 1.1rem;
    color: white;
}

img {
    width: 1.5rem;
    height: 1.4rem;
}

@media only screen and (max-width: 790px) {
    html {
        font-size: 13px;
    }
}

@media only screen and (max-width: 660px) {
    html {
        font-size: 10px;
    }
}