styles.css

*, *::before, *::after {
    box-sizing: border-box;
    font-family: Gotham Rounded, sans-serif;
    font-weight: normal;
  }

  body {
    margin: 0;
    padding: 0;
    background: linear-gradient(to right, rgb(103, 106, 45), rgb(93, 19, 35));

    }

    .calculator-grid {
        display: grid;
        justify-content: center;
        align-content: center;
        min-height: 100vh;
        grid-template-columns: repeat(4, 100px);
        grid-template-rows: minmax(120px, auto) repeat(5, 100px);
        }


        .calculator-grid > button {
            cursor: pointer;
            font-size: 1.3rem;
            border: 1px, solid #FFFFFF;
            outline: none;
            background-color: rbga(255, 255, 255, .75);
          }


          .calculator-grid > button:hover {
            background-color: #bd3232;
          }

        
          .span-two {
            grid-column: span 2;
            
          }

          .output {
            grid-column: 1 / -1 ;
            background-color:rgba(92, 16, 16, 0.75) ;
            display: flex;
            align-items: flex-end;
            justify-content: space-around;
            flex-direction: column;
            padding: 10px;
            word-wrap:break-word;
            word-break: break-all;
    
          } 

          .output .current-operand{
         color:rgba(255, 255 , 255 , .75);
         font-size: 1.5rem;
 
     } 


     .output .current-operand{
      color:white;
      font-size: 2.5rem;

       }


          

       @media only screen and (max-width: 767px) {
        .calculator-grid {
          grid-template-columns: repeat(4, 70px);
          grid-template-rows: minmax(120px, auto) repeat(5, 80px);
          margin: 10px;
          padding: 10px;
        }
      
      
      }