*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: rgb(180, 180, 180);
}

.calculator-body{
    background-color: rgb(180, 180, 180);
    margin:125px auto ;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 400px;
    height: 680px;
    border-radius: 10px; 
    background-image: linear-gradient(130deg, rgb(165 164 164), rgb(176 176 176));;
    border: none;
    box-shadow: -4px -4px 6px rgb(255 255 255 / 42%), 2px 2px 6px rgb(0 0 0 / 33%);
    font-family: 'Orbitron', sans-serif;
    color: rgb(51 50 50);
}

.screen{
    text-align: right;
    font-weight: bold;
    background-color: rgb(180, 180, 180);
    width: 91%;
    height: 161px;
    border-radius: 10px;
    margin-top: 18px;
    background-image: linear-gradient(130deg, rgb(165 164 164), rgb(176 176 176));
    box-shadow: inset -1px -1px 8px rgb(255 255 255), inset 1px 1px 5px rgb(0 0 0 / 90%);
}
.sub-screen-1, .sub-screen-2 {
    font-size: 28px;
    margin: 10px;
}
.total{
    font-size: 36px;
    margin: 10px; 
}
.buttons-container{
    margin: 24px;
    display: grid;
    grid-template-columns: repeat(4, 70px);
    grid-template-rows: repeat(5, 70px);
    grid-gap: 18px;
    
}
.button{
   background-image: linear-gradient(130deg, rgb(165 164 164), rgb(255 255 255));
   border-radius: 50px;
   border: none;
   box-shadow: -1px -1px 5px rgba(255, 255, 255, 100), 1px 1px 5px rgba(0, 0, 0, 0.9) ;
   font-size: 25px;
   color: rgb(51 50 50);
}
.button:active{
    box-shadow: inset -3px -1px 8px rgb(255 255 255), inset 1px 1px 5px rgb(0 0 0 / 90%);
}

.equals{
    font-size: 25px;
   color: rgb(51 50 50);
    grid-column-start:3; 
    grid-column-end: 5;
    background-image: linear-gradient(130deg, rgb(241, 92, 92), rgb(252, 153, 153));
   border-radius: 50px;
   border: none;
   /*box-shadow: -1px -1px 3px rgba(241, 92, 92,100), 1px 1px 2px rgba(252, 173, 173, 0.877) ;*/
   box-shadow: -1px -1px 5px rgba(255, 255, 255, 100), 1px 1px 5px rgba(0, 0, 0, 0.9);
}
.equals:active{
    box-shadow: inset -3px -4px 6px rgb(252, 136, 136), inset 1px 1px 8px rgb(99, 12, 12);
}

.invisible{
    visibility: hidden;
}