*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
}

.calculator__display {
    position: fixed;
    width: 28rem;
    height: 35rem;
    left: 8rem;
    top: 5rem;
    background: #4C4C4C;
    border-radius: 12px 12px 12px 12px;
    box-shadow: 0rem 1rem 3rem 0rem grey;
}

#display--number {
    position: fixed;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    width: 4rem;
    height: 6rem;
    left: 31rem;
    top: 2.5rem;
    font-weight: 400;
    font-size: 6rem;
    line-height: 2rem;
    color: #FFFFFF;
}

button{
    position: fixed;
    width: 7rem;
    height: 6rem;
    font-weight: 400;
    font-size: 3rem;
    line-height: 2rem;
    color: #000000;
    border: 0.5px solid #787878;
    cursor: pointer;
} 

.clear--all {
    left: 8rem;
    top: 13rem;
}

#plus-minus--sign{
    left: 15rem;
    top: 13rem;
}

#key--percentage{
    left: 22rem;
    top: 13rem;
}

#key--div{
    left: 29rem;
    top: 13rem;
    background: #F6932E;
    color: #FFFFFF;
}

.key--7{
    left: 8rem;
    top: 18.5rem;
}

.key--8{
    left: 240px;
    top: 18.5rem;
}

.key--9{
    left: 352px;
    top: 18.5rem;    
}

#key--mult{
    left: 464px;
    top: 18.5rem;
    background: #F6932E; 
    color: #FFFFFF;
}

.key--4{
    left: 8rem;
    top: 24rem;
}

.key--5{
    left: 240px;
    top: 24rem;
}

.key--6{
    left: 352px;
    top: 24rem;
}

#key--sub{
    left: 464px;
    top: 24rem;
    background: #F6932E;
    color: #FFFFFF;
}

.key--1{
    left: 8rem;
    top: 475px;
}

.key--2{
    left: 240px;
    top: 475px;
}

.key--3{
    left: 352px;
    top: 475px;
}

#key--add{
    left: 464px;
    top: 475px;
    background: #F6932E;
    color: #FFFFFF;
}

.key--0{
    width: 224px;
    left: 8rem;
    top: 564px;
    border-radius: 0px 0px 0px 12px;
}

#key--dot{
    left: 352px;
    top: 564px;
}

.key--equal{
    left: 464px;
    top: 564px;
    background: #F6932E;
    color: #FFFFFF;
    border-radius: 0px 0px 12px 0px;
}