style.css

  html {
    font-size: 10px;
    /* Dictates the size of the pup grid */
    margin: 0;
    padding: 0;
    font-family: 'Baloo Bhaijaan', cursive;
    /* Just setting the font for the numbers  */
  }

  .bg { /* Pretty straight forward, this is the background */
    z-index: 0;
    margin: 0;
    padding: 0;
    background-size: cover;
    position: fixed;
    height: 100%;
    width: 100%;
  }

  .keys { /* This is the main grid with the pups */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 160%;
    position: absolute;
    top: 11vh;
    left: 22vw;
  }

  .wrapper { /* This houses the pups on the page */
    z-index: 1;
    position: absolute;
    padding-left: 33%;
  }

  /* Each pup has their own individual styling on the grid */

  .key-chase {
    border: .4rem solid #2b4083;
    border-radius: 6rem;
    margin: 1rem;
    transition: all .07s ease;
    text-align: center;
    background: rgba(211, 48, 49, 0.2);
    text-shadow: 0 0 .5rem black;
  }

  .key-marshall {
    border: .4rem solid #d2232a;
    border-radius: 6rem;
    margin: 1rem;
    transition: all .07s ease;
    text-align: center;
    background: rgba(254, 236, 2, 0.2);
    text-shadow: 0 0 .5rem black;
  }

  .key-skye {
    border: .4rem solid #d283a3;
    border-radius: 6rem;
    margin: 1rem;
    transition: all .07s ease;
    text-align: center;
    background: rgba(227, 56, 148, 0.2);
    text-shadow: 0 0 .5rem black;
  }

  .key-rubble {
    border: .4rem solid #f8e600;
    border-radius: 6rem;
    margin: 1rem;
    transition: all .07s ease;
    text-align: center;
    background: rgba(245, 140, 31, 0.2);
    text-shadow: 0 0 .5rem black;
  }

  .key-rocky {
    border: .4rem solid #489a45;
    border-radius: 6rem;
    margin: 1rem;
    transition: all .07s ease;
    text-align: center;
    background: rgba(25, 120, 180, 0.2);
    text-shadow: 0 0 .5rem black;
  }

  .key-zuma {
    border: .4rem solid #ed6c35;
    border-radius: 6rem;
    margin: 1rem;
    transition: all .07s ease;
    text-align: center;
    background: rgba(1, 87, 136, 0.2);
    text-shadow: 0 0 .5rem black;
  }

  .playing { /* This is the animation for the pups when they are selected via click or key down*/
    transform: scale(1.1);
    border-color: white;
    box-shadow: 0 0 1rem white;
  }

  kbd { /* This impacts the sizing of the pup grid */
    display: block;
    font-size: 4rem;
  }

  .sound { /* This is the text to click the numbers */
    font-size: 3rem;
    text-transform: uppercase;
    color: white;
  }

  #bt { /* This ID allows the button to work for the pups */

    border-style: none;
    border-width: 0;
    padding: 0;
    background: content-box;
  }

  button:focus { /* This removes the blue line from the selected pup as they are buttons */

    outline:0;
  }

  @media only screen and (max-width: 1210px) {
    .keys {
      grid-template-columns: 1fr 1fr 1fr;
      width: 220%;
      top: 18vh;
      left: 12.5vw;
    }

    @media only screen and (max-width: 600px) {
      .keys {
        grid-template-columns: 1fr 1fr;
        width: 250%;
        top: 20vh;
        left: 9vw;
      }