html {
    font-size: 10px;
    background: url(https://images.pexels.com/photos/162389/lost-places-old-decay-ruin-162389.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940) bottom center;
    background-size: cover;
  }
  body,html {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
  }
  .logo{
    background: url('logo.png');
    height:100px;
    padding:25px;
    opacity: .7;
    -webkit-transform-origin: 50% 0; /* for Safari and older Chrome */
    transform-origin: 50% 0;
    -webkit-animation: logo 3.5s ease-in-out forwards infinite;
    animation: logo 3.5s ease-in-out forwards infinite;
  }
  .hero{
    margin-top:5em;
    display:flex;
    flex-direction: row;
    justify-content: space-around;
    width:100%;
    opacity: .8;
  }
  .content{
    margin: 0 auto;
    margin-top:7em;
    padding:20px;
    position: relative;
    background-color: black;
    width:75vw;
    opacity:.8;
    box-shadow: 0px 0px 70px 40px black;
  }
  .content p{
    padding:30px;
    color:white;
    text-align: center;
    vertical-align: middle;
    line-height: 30px;
    padding:5px;
    font-size: 2em;
    font-family: 'Frijole', cursive;
  }
  
  .keys {
    padding-top:5em;
    padding-bottom:5em;
    margin:0 auto;
    display: flex;
    flex: 1;
    width:50vw;
    align-items: center;
    align-content: flex-start;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .key {
    border: .4rem solid rgb(255, 94, 0);
    border-radius: .5rem;
    margin: 1rem;
    font-size: 1.5rem;
    padding: 1rem .5rem;
    transition: all 1s ease;
    width: 10rem;
    text-align: center;
    color: white;
    background: rgba(0,0,0,0.4);
    text-shadow: 0 0 .5rem black;
  }
  
  .playing {
    transform: scale(1.2);
    border-color: #ffc600;
    box-shadow: 0 0 1rem #ffc600;
  }
  
  kbd {
    display: block;
    font-size: 4rem;
  }
  
  .sound {
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: .1rem;
    color: #ffc600;
  }

 @keyframes logo{
    0%{transform: rotate(10deg);}
    50%{transform: rotate(-5deg)}
    100%{transform: rotate(10deg);}
 }


  @media only screen and (max-width: 550px) {
    .content p{
            font-size: 1em;
}
  }