html {
    font-size: 62.5%;
    box-sizing: border-box;
  }
  
  *,
  *::before,
  *::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
  }
  
  .calculator {
    border: 1px solid rgb(255, 0, 0);
    border-radius: 5px;
    width: 400px;
  }
  
  .calculator-screen {
    width: 100%;
    height: 80px;
    border: none;
    background-color: #464646;
    color: #fff;
    text-align: right;
    padding-right: 20px;
    padding-left: 10px;
    font-size: 4rem;
  }
  
  button {
    height: 60px;
    font-size: 2rem!important;
  }
  
  .equal-sign {
    height: 98%;
    grid-area: 2 / 4 / 6 / 5;
  }
  
  .calculator-keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    padding: 20px;
  }

  @media (min-width: 320px) and (max-width: 767px) {
    .calculator-screen {
        width: 100%;
        height: 60px;
        border: none;
        background-color: #464646;
        color: #fff;
        text-align: right;
        padding:30px;
        font-size: 4rem;
      }
      
      button {
        height: 40px;
        font-size: 2rem!important;
      }
      
      .equal-sign {
        height: 90%;
        grid-area: 2 / 4 / 6 / 5;
      }
      
      .calculator-keys {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 10px;
        padding:30px;
      }
      .calculator {
        border: 1px solid rgb(255, 0, 0);
        border-radius: 5px;
        width: 300px;
      }
  }