*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
body{
    background-color: black;
    width:100vw;
    height:100vh;
    display:flex;
    align-items: center;
    justify-content: center;
}
.calculator{
    width:190vw;
    max-width:300px;
    height:380px;
    background-color: rgb(35, 34, 34);
    border-radius: 10px;
    box-shadow: 1px 5px 29px rgb(120, 120, 189);
}
.display{
    width:100%;
    height:20%;
    display:flex;
    align-items: center;
    justify-content: center;
    padding:10px ;
    
}
.buttons{
    width:100%;
    height:80%;
     display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.row{
    width:100%;
    height:20%;
    display:flex;
    align-items: center;
    justify-content: center;
    gap:20px;
}
.row button{
    width:17%;
    height:60%;
     border-radius:5px;
     box-shadow: 1px 2px 10px rgba(0,0,0,0.8),
     -1px -2px 20px rgba(0,0,0,0.8);
     border:none;
     background-color: transparent;
     color:white;
     font-size:19px;
     cursor: pointer;
}
.display input{
    width:100%;
    height:100%;
     border-radius:10px;
      box-shadow: 1px 2px 10px rgba(0,0,0,0.8),
     -1px -2px 20px rgba(0,0,0,0.8);
     border:none;
     background-color: transparent;
     color:white;
     text-align: right;
     padding:10px;
     font-size:25px;
}
#equal{
    width:40%;
    color:orange;
}
.row1 button{
    color:aquamarine;
}


.row button:hover{
    box-shadow:inset 1px 2px 10px rgba(0,0,0,0.8);
    border:0.2px solid white;
    font-size: small;
}