hmtl, body{
    height: 40vh;
    background-color: rgb(245, 244, 204);
}

#container{
    min-width: 550px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50vh;
    transform: translateY(-50%);
    width:90px;
}

#calculator{
    background-color: #92e7ce;
    padding: 10px;
    border-style:solid;
    border-width: 6px;
    border-color: #017951f3;
    border-radius:15px;
}

#model{
    color: rgba(185, 144, 91, 0.925);
    font-style: italic;
    text-align: left;
}

#model p{
    margin-top:0;
    margin-bottom:0;
    font-family: Roboto;
}

#screen{
    background-color:  #b8b9b9;
    text-align: right;
    height: 40px;
    font-size: 30px;
    margin-top:4px;
    margin-bottom:10px;
    border-radius:10px;
    font-family: Orbitron;
    /* direction: rtl; */
    width:100%;
}

.number{
    background-color: #768bb1;
}

#keypads{
    color: white;
    height:400px;
    font-family: Orbitron;
}

#keypads div{
    border-radius:12px;
    font-size: 30px;
}

#numbers{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
    float: left;
    width: 59%;
    line-height:90px;
}

#others{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    float: right;
    width: 39%;
    line-height:70px;
}

#keypads:hover{
    cursor: pointer;
}

.parenthesis{
    background-color: #1ee6b4;
}

.operator{
    background-color: #1de2f0;
}

#clear{
    background-color: #e72b2b;
}

#result{
    background-color: #4ec2df;
    grid-column-start: 1;
    grid-column-end: 3;
}