#calculator{

    margin: auto;
    background-color: black;
    border-radius: 50px;
    max-width: 415px;
    overflow: hidden;

}

#display{

    font-family: Helvetica;
    font-weight: lighter;

    margin-left: 7.2%;
    margin-top: 5%;
    width: 350px;
    height: 130px;
    font-size: 4em;
    text-align: right;
    background-color: black;
    color: white;
    overflow-x: scroll;
    border: none;



}

#buttons{

    font-family: Helvetica;
    font-weight: lighter;
    
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    padding: 25px;

}

.darkGrey{

    background-color: #333333;    ;

}

.darkGrey:hover{

    background-color: #575757;    ;

}


.darkGreyBig{

    background-color: #333333;
    grid-column: 1 / span 2;
    width: 175px;
    text-align: left;
    padding-left: 32px;

}

.darkGreyBig:hover{

    background-color: #575757;    ;

}

.lightGrey{

    background-color: #a5a5a5;
    color: #000000;

}

.lightGrey:hover{

    background-color: #c6c6c6;

}

.orange{

    background-color: #ff9f0a;

}

.orange:hover{

    background-color: #feb84e;

}

button{
    
    width: 80px;
    height: 80px;
    border-radius: 50px;
    border: none;
    background-color: gray;
    color: white;
    font-size: 2em;
    cursor: pointer;

}