.background{
    background-color: beige;
    margin: 10% 10% 10% 10%;
  }
/* title */
.title{
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    border: 5px black solid;
    border-radius: 20px;
}
.title a{
    text-decoration: none;
    color: black;
    border: 2px black solid;
    background-color: beige;
    border-radius: 4px;
    padding: 5px;
    margin-bottom: 5px;
}
.title a:hover{
    padding: 8px;
    background-color: khaki;
}
.title a:active{
    background-color: #F06D06;
}
/* start of calculator */
  .display{
    grid-area: display;
    text-align: right;
    color: white;
    background-color: black;
    padding: 30px;
    border-radius: 10px;
  }
/* since oprerators and numbers have a different color scheme, i decided to make them different sections */
  .operator{
    display: flex;
    justify-content: center;
    background-color: #F06D06;
    padding: 30px;
    color: black;
    border: 1px black solid;
    border-radius: 5px;
  }
  .numbers{
    border-radius: 5px;
    display: flex;
    justify-content: center;
    color: black;
    align-items: center;
    background-color:khaki;
    border: 1px black solid;
    padding: 30px;
}
/* psudo stuff */
  .operator:hover{
    background-color: #e89454;
  }
  .operator:active{
    background-color: #e4b897;
  }

    .numbers:hover{
    background-color: azure;
  }
    .numbers:active{
    background-color: whitesmoke;
  }
/* this is kind of the footer for the site, not much for a footer so i put some cute dogs */
  .end{
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
    #picture_of_cute_dog img{
      margin-top: 10px;
      width: 100px;
      height: 100px;
      border: 5px solid khaki;
      border-radius: 30px;
    }


/* I have this at the end since it looks ugly but a must  */
  .zero{
    grid-area: zer;
  }
  .divide{
    grid-area: divide;
  }
  .multiply{
    grid-area: mult;
  }
  .subtract{
    grid-area: subt;
  }
  .add{
    grid-area: addi;
  }
  .equal{
    grid-area: equal;
  }
  .clear{
    grid-area: clear;
  }
  .backspace{
    grid-area: backspace;
  }
    .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;
  }
  .calculator-layout{
    display:grid;
    grid-template-areas:
      "display display   display   display"
      "clear   clear     backspace divide"
      "seven   eight     nine      mult"
      "four    five      six       subt"
      "one     two       three     addi"
      "zer     zer        zer      equal";
  }