*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
/* 
    colors
    bg #000
    orange #ff9501
    grey #a6a6a6
    white #fdfdfd
*/


.calc {
    width: 290px;
    height: 590px;
    border: none;
    margin: 50px auto;
    background-image: url("https://cdn-files.kimovil.com/phone_front/0007/75/thumb_674950_phone_front_big.jpg");
    background-repeat: no-repeat;
    background-size:cover;
    border-radius: 40px;
    color: #fdfdfd;
    font-family: Arial;
    display: grid;
    padding: 18px;
    box-shadow: 4px 4px 6px #4f4f4f;
}

.calc-screen {
    height: 125px;
    /* padding: 18px; */
    position: relative;
    padding: 10px;
    display: grid;
    justify-items: end;
    align-items: end;
}

.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 siz minus"
    "one two three plus"
    "zero zero dot equal";
    grid-gap: 7px;
    /* padding: 10px; */
    justify-items: center;
    align-items: center;
}



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

}
.btn:hover {
    filter: brightness(130%);
}
.btn:active {
    filter: brightness(90%);
}
.bg-grey {
    background-color: #a6a6a6;
}

.bg-dark-grey {
    background-color: #333;
}

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

.btn.ac {
    
}

.btn.plus-minus {
    grid-area: plus-minus;
}

.btn.percent {
    grid-area: percent;
}

.btn.division {
    grid-area: division;
} 

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