*{
    margin: 0;
    padding: 0;
}
@font-face {
    font-family: digital;
    src: url(digital.ttf);
}
body {
    background: bisque;
    text-align: center;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.calculator-container {
    width: 250px;
    background: black;
    margin: 50px auto;
    padding: 20px;
    border-radius: 10px;
}

input#display {
    font-size: 40px;
    border: none;
    border-radius: 10px;
    text-align: right;
    color: #000;
    background: #fff;
    width: calc(100% - 10px);
    padding: 5px;
    font-family: digital;
}
.calculator-keys-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 10px;
    row-gap: 10px;
}

button.key-item {
    font-size: 25px;
    padding: 10px;
    border-radius: 10px;
    border: none;
}
button#allClear {
    background: darkorange;color: #fff;
}

button#resultDisplay {
    background: #2d8f21bd;
    color: #fff;
}
button.key-item.oparetor {
    background: darkcyan;
    color: #fff;
}


button.key-item:hover {
    box-shadow: inset 0 0 10px #c7850a;
}
input:focus-visible {
    outline: none;
}

.love{
    color: #fff;
    margin-top: 20px;
    font-family: monospace;
  }