* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;   
}

body {
    font-family: "Helvetica Neue", sans-serif;
}

.container {
    background: linear-gradient(#F1A23D, #4A494F, #4A494F );
    height: 100vh;
    width: 100vw;
    display: grid;
    align-items: center;
    justify-content: center;
}

.calculator {
    height: 480px;
    width: 320px;
    box-shadow: 0px 3px 16px 6px rgb(0 0 0 / 50%);
    background-color: gray
}

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
}

.display {
    grid-column: 1/5;
    background-color: #4A494F;
    border-radius: 0.3rem 0.3rem 0 0;
    font-size: 50px;
    color: white;
    text-align: end;
    line-height: 80px;
    padding-right: 15px;
    padding-left: 15px;
    border: none;
    opacity: 0.9;
}

.zero {
    grid-column: 1 / 3
}

.item {
    font-size: 24px;
    color: white;
    outline: none;
    border: 0.5px solid black;
    cursor: pointer;
}

.item:hover {
    opacity: 0.5;
}

.item:active {
    background-color: white;
    opacity: 0.9;
    color: #75757D;
}

.botton-right {
    background-color: #F1A23D;
}

.botton-numbers {
    background-color: #75757D;
}

.botton-top {
    background-color: #5A5663;
}