.instructions {
  overflow-y: scroll;
  width: 95%;
  margin: 20px auto;
  height: 500px;
  line-height: 2.25rem;
  max-width: 500px
}

.instructions p {
    font-size: 18px;
    font-family: Georgia, "Times New Roman", Times, serif;
    margin: 10px 20px 1rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid #242323;
  }

.highlight {
  background-color: #f0ee82;
  padding: 5px;
  text-align: center;
}

.btn {
  background-color: #fff;
  color: #005761;
  padding: 5px;
  text-align: center;
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid #005761;
}

.btn:hover {
  background-color: #005761;
  color: #fff;
  transition: all 0.3s;
  border-radius: 10px;
}

.keybo {
  background-color: #262626;
  color: #fff;
  border-radius: 10px;
  border: 1px solid #000;
  padding: 5px 10px;
  text-align: center;
  line-height: 33px;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0 3px;
}

.double {
  padding: 5px 15px;
  text-align: left;
}

@media (max-width: 703px) {
  .title {
    justify-content: center
    
  }
    .title  h1{
      padding-left: 0;
      font-size: 3rem;
    }
}

@media (max-width: 404px) {   
    .title  h1{
      font-size: 2.5rem;
    }    
    .instructions  p{     
      font-size: 1rem;
    }
}

@media (max-width: 300px) {   
    .title  h1{
      font-size: 1.5rem;
    }    
    .instructions  p{     
      font-size: 1rem;
    }
}