@font-face {
    font-family: "Segment7Standard";
    src: url("../fonts/Segment7Standard.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: large;
    background-color: aliceblue;
}

button {
    font-family: inherit;
    font-size: inherit;
    border: 3px solid black;

    box-shadow:
    0 3px 0 #000,                     
    0 6px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);

    cursor: pointer;
}

.container {
    border: 3px solid black;
    border-radius: 9px;
    width: 279px;
    height: 420px;
    margin: 50px auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0;

    background-color: deeppink;
    box-shadow: 
        0 6px 0 rgba(0, 0, 0, 0.25),
        0 10px 20px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.display {
    border: 3px solid black;
    border-radius: 9px;
    width: 250px;
    max-height: 59px;
    flex: 1;
    padding: 0 10px;
    box-sizing: border-box;
    font-family: Segment7Standard, monospace;
    font-size: large;
    overflow: hidden;
    background-color: antiquewhite;

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

}

.value {
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    display: flex;
    align-items: center;
    font-size: 1.5rem;

    transform: translateY(2px);
}

.value::-webkit-scrollbar {
    display: none;
}

.caret {
    width: 2px;
    height: 1.5em;
    margin-left: 2px;
    background: black;
    animation: blink 1s steps(1) infinite;
    align-items: center;
}

@keyframes blink {
    50% { opacity: 0; }
}

.row {
    display: flex;
    justify-content: space-between;
    width: 261px;
}

.divide-operator {
    width: 61.25px;
    height: 55px;
    border-radius: 9px;
    margin: 5px;
}

.row .ac,
.row .del {
    width: 92.875px;
    height: 55px;
    border-radius: 9px;
    margin: 5px;
}

.row button {
    width: 61.25px;
    height: 55px;
    border-radius: 9px;
    margin: 5px;
}

.row .equals {
    width: 132.50px;
    height: 55px;
    border-radius: 9px;
    margin: 5px;
}