/* body{
    font-size: 170%;
    line-height: 1.4;
    font-family: 'Open Sans', sans-serif;
    background-color: ;
    display: flex;
    background-image: linear-gradient( rgb(111, 204, 145), white ,rgb(0, 149, 255));
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.calculator{
    box-shadow: 0 0 80px 0 blue;
    border-radius: 5px;
    overflow: hidden;
}
.calc_disp{
    color: rgb(57, 61, 66);
    background-color: rgb(158, 161, 164) ;
    width: 16.25rem;
    padding: .75rem 1rem;
    text-align: right;
}
.calc_keys{
    display: grid;
    grid-gap: 2px;
    grid-template: ;
} */

  
  /*******************
   Base styles
   *******************/
  html {
    font-size: 150%;
    font-weight: 300;
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    line-height: 1.4;
  }
  
  body {
    display: flex;
    background-image: linear-gradient(236deg, #74ebd5, #acb6e5);
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  
  /*******************
   Calculator
   *******************/
  .calculator {
    box-shadow: 0 10px 25px 10px rgb(14, 33, 49);
    border-radius: 0.5em;
    overflow: hidden;
  }
  
  /* .calc_disp{
    background-color: rgb(62, 57, 57);
    color: rgb(245, 229, 229);
    width: 16.25rem;
    height: 40px;
    padding-right: 20px;
    padding-bottom: 5px;
    text-align: right;
    font-size: calc(1rem * 1.1 * 1.5);
  } */
  #history{
    background: #272e30;
    width: 16.25rem; 
    height: 40px;
    margin: 0px;
    padding-top: 4px;
    text-align: right;
    color: #919191;
  }
  #output{
    background:#272e30;
    width: 16.25rem;
    height: 40px;
    margin: 0px;
    font-size: calc(1rem * 1.1 * 1.2);
    text-align: right;
    color: rgb(245, 229, 229);
  }
  
  .calc_keys{
    background: #6d838a ;
    display: grid;
    height: 300px;
    grid-gap: 2px;
    grid-template-areas:
      "clear backspace percent plus"
      "nine eight seven minus"
      "six five four multiply"
      "three two one divide"
      "zero decimal equal equal"
  }
  
  .calc_keys > button {
    border: 0;
  }
  .plus{
    grid-area:  plus;
  }
  .minus{
    grid-area: minus;
  }
  .multiply{
    grid-area: multiply;
  }  
  .divide{
    grid-area: divide;
  }
  .percent{
    grid-area: percent;
  }
  .one {
    grid-area: one;
  }
  .two {
    grid-area: two;
  }
  .three {
    grid-area: three;
  }
  .four {
    grid-area: four;
  }
  .five {
    grid-area: five;
  }
  .six {
    grid-area: six;
  }
  .seven {
    grid-area: seven;
  }
  .eight {
    grid-area: eight;
  }
  .nine {
    grid-area: nine;
  }
  .zero {
    grid-area: zero;
  }
  .decimal {
    grid-area: decimal;
  }
  .backspace{
    grid-area: backspace;
  }
  .clear {
    grid-area: clear;
  }

  .operator{
    background: #bdc6d0;
  }
  .num {
    background: hsl(0, 0%, 100%);
  }
  .equal {
    grid-area: equal;
    background-color: #ff0000;
  }
  
  .equal:active {
    background-color: #d65656;
  }
  .operator:active,
  .num:active {
    background: #fd4949;
  }