@import url('https://fonts.googleapis.com/css2?family=Handjet:wght,ELSH@100..900,2&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

* {
    box-sizing: border-box;
}

body {
    width: 100vw;
    height: 100vh;

    margin: 0;
    border: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    background-image: radial-gradient(rgb(45, 45, 45), black);
}

p {
    color: white;
    line-height: 0;
}

.calculator-body {
    background-color: black;
    width: 300px;
    height: 600px;
    border-radius: 25px;
    padding: 15px 25px;
    padding-bottom: 25px;

    box-shadow: -1px -1px 25px 0 #404040 inset;
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.titles-container .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.titles-container #model-logo {
    font-family: 'Nunito';
    font-weight: bold;
    font-size: 16px;
}

.titles-container #model-txt {
    font-family: 'IBM Plex Mono';
    font-weight: 500;
    font-style: italic;
    font-size: 10px;
}

.titles-container p {
    text-align: center;

    font-family: 'Ubuntu';
    font-weight: 500;
    font-style: italic;
    font-size: 14px;
}

.display-container #edition-txt {
    font-family: 'Nunito';
    font-weight: 600;
    font-size: 10px;

    text-align: right;
    margin-right: 5px;
}

.display {
    height: 100px;
    padding: 25px 15px 35px 20px;
    border-radius: 8px;

    background-image: linear-gradient(to top, #53615f);
    box-shadow: 0 0 15px 0 #c4c4c4 inset;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.display p {
    text-align: right;
    font-family: 'Handjet';
    margin: 0;

    color: black;
    font-weight: bold;

    filter: drop-shadow(0 0 1px rgb(0, 0, 0));
}

.display #stored-field {
    font-size: 24px;
}

.display #entered-field {
    -webkit-text-stroke: 0.5px #0e0e0e;
    font-size: 48px;
}

.bottom-anchor {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.power-button {
    margin-right: 8px;
    margin-bottom: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
}

.power-button p {
    font-family: 'Nunito';
    font-weight: 500;
    font-size: 10px;
}

.power-button .icon {
    font-size: 14px;
    text-align: center;

    width: 15px;
    height: 15px;
    border-radius: 15px;

    background-color: rgb(216, 11, 11);
    box-shadow: -0.25px -0.25px 5px 0 #ffffff inset;

    display: flex;
    justify-content: center;
    align-items: center;
}

.buttons-container {
    height: 320px;
    padding: 10px;
    background-color: rgb(19, 19, 19);

    border-radius: 8px;
    box-shadow: 0 0 15px 0 #3a3a3a inset;

    display: flex;
    flex-direction: column;
    gap: 10px;
}

.buttons-container .row {
    flex: 1 1;
    display: flex;
    gap: 10px;
}

.row button {
    flex: 1;

    border: none;
    border-radius: 5px;
    background-color: rgb(98, 98, 98);
    box-shadow: -0.25px -0.25px 10px 1px #000000 inset;

    text-align: center;
    line-height: 0;
    color: rgb(225, 225, 225);
    font-size: 22px;
    font-weight: bolder;
    font-family: 'Nunito';
}

.row .controller {
    font-size: 18px;
    box-shadow: -0.25px -0.25px 10px 1px #000000 inset;
    background-color: orange;
}
.row .controller:hover {
    box-shadow: 2px 2px 15px 1px #423206 inset;
    background-color: rgb(171, 111, 0);
}

.row button:hover {
    background-color: rgb(98, 98, 98);
    box-shadow: 2px 2px 15px 1px #000000 inset;
}

.row #equals {
    flex: 2.5;
    background-color: rgb(54, 146, 54);
}
.row #equals:hover {
    box-shadow: 2px 2px 15px 1px #0d0f0e inset;
    background-color: rgb(44, 118, 44);
}

.row .operator {
    background-color: rgb(167, 167, 167);
}
.row .operator:hover {
    background-color: rgb(142, 142, 142);
    box-shadow: 2px 2px 15px 1px #353535 inset;
}