body {
    background-color: pink;
    display: grid;
    justify-content: center;
    align-content: center;
    height: 100vh;
  }
  
    .key-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr auto;
    width: 30vw;
  }
  
  .keys:hover {
    background-color: #e69ea9;
  }
  
  h1, h2 {
    grid-column: auto / span 12;
    font-family: Courier, Serif;
    text-align: center;
  }
  
  p {
    grid-column: auto / span 12;
    margin-left: 10%;
    margin-right: 10%;
  }
    
  .keys {
  grid-column: auto / span 3;
  border: dotted white 2px;
  margin: 10px;
}
    
  .keys img {
    width: 100%;
  }
  
  .keys img:hover {
    opacity: 90%;
  }
  
  @media only screen and (max-width: 750px) {
    .keys {grid-column: auto / span 6;}
    .key-container {width: 95vw;}
}