/* 
    colors
    bg #000
    orange #ff9501
    grey #a6a6a6
    white #fdfdfd
*/

.calc {
    margin: 50px auto;
    width: 300px;
    height: 500px;
    /* border:1px solid #000; */
    border-radius: 20px;
    background: #000;
    color: #fff;
    font-family: Arial;
    padding: 18px;
    box-shadow: 4px 4px 4px #4f4f4f;
}

.calc-screen {
    height: 125px;
    padding: 10px;
    display: grid;
    justify-items: end;
    align-items: end;
    margin-bottom: 25px;
}

.calc-screen p {
    text-align: right;
    font-size: 4rem;
    margin: 0;
}

.buttons {
    display: grid;
    grid-template-areas: "ac plus-minus percent division" "seven eigth nine multi" "four five six minus" "one two three plus" "zero zero dot equal";
    grid-gap: 7px;
    justify-items: center;
}

.btn {
    width: 60px;
    height: 60px;
    background: #333;
    border-radius: 50%;
    text-align: center;
    line-height: 60px;
    font-size: 1.5rem;
    cursor: pointer;
    user-select: none;
}

.btn.zero {
    grid-area: zero;
    width: 100%;
    border-radius: 34px;
}

.btn:hover {
    filter: brightness(120%);
}

.btn:active {
    filter: brightness(90%);
}

.btn.bg-grey {
    background: #a6a6a6;
}

.btn.bg-orange {
    background: #ff9501;
}