dogCalculator.css

html, body {
    height: 100%;
    width: 100%;
  }
  
  body{
      background-color: #a9bd7e;
  }
  
  h1 {
    text-align: center;
    font-family: 'Luckiest Guy', cursive;
    color: #7542ff;
    font-size: 75px;
    padding-top: 50px;
  }
  
  img {
    position: absolute;
    height: 300px;
    right: 10px;
    bottom: 5px;
  }
  
  #calculator {
    display: flex;
    justify-content: center;
    text-align: center;
    border: 10px black solid;
    border-radius: 5px;
    max-width: 500px;
    margin: 0 auto;
    padding: 10px;
  }
  
  input {
      outline: 0;
      position: relative;
      left: 5px;
      top: 5px;
      border: 0;
      color: #495069;
      background-color: 4px;
      width: 60px;
      height: 50px;
      float: left;
      margin: 5px;
      font-size: 20px;
      box-shadow: 0 4px rgba(0,0,0,0.2);
  }
  
  .input{
      width: 270px;
      font-size: 26px;
      text-align: center;
      background-color: #f1faeb;
      float: left;
  }
  
  .clear{
      float: left;
      position: relative;
      display: block;
      background-color: #ff9fa8;
      margin-bottom: 15px;
  }
  
  .equals{
      background-color: #f1ff92;
      position: relative;
  }
  
  .result {
    color: black;
    text-align: center;
    font-family: Helvetica, sans-serif;
    padding-top: 20px;
  }
  
  
  
  /* answer hover effect */
  .input:hover{
      width: 270px;
      font-size: 26px;
      text-align: center;
      box-shadow: 0 4px rgba(0,0,0,0.2);
      background-color: #f1faeb;
  }
  
  
  /* hover */
  .equals:hover{
      background-color: #e7f56b;
      box-shadow: 0 4px #b7c259;
  }
  /* hover */
  .clear:hover{
      float: left;
      display: block;
      background-color: #f297a0;
      margin-bottom: 15px;
      box-shadow: 0 4px #cc7f86;
  }