style.css

@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap');

* {
  margin: 0 auto;
}
html {
    font-size: 10px;
    background: url(https://bit.ly/2m2oGwk) bottom center;
    background-size: cover; /* ajusta a imagem o mais largamente possível e mantém sua proporção e não fica esticada */ 
    height: 100%;
    width: 100%;
  }
  
  body,html {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
  }

  .container{
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 90vh;
    justify-content: center;
  }

  h1,p {
    color: #fff;
    font-size: 32px;
    text-shadow: 2px 2px black;
  }
  .teclas {
    display: flex; /* propriedade do flexbox*/
    /* min-height: 100vh; Viewport Dimension vh = view height unidade do CSS, utilizando ele, o elemento em si acompanha a largura ou altura conforme o tamanho da tela, seja adicionando um certo tamanho ou diminuindo */
    align-items: center;
    justify-content: center;
    list-style-type: none;
  }
  
  .tecla {
    border: 4px solid black;
    border-radius: 6px; 
    margin: 6px;
    font-size: 16px;
    padding: 6px 5px;
    transition: all .07s ease; /* transition = propriedade do CSS onde é possível criar como se fosse uma animação no elemento */
    width: 100px;
    text-align: center;
    color: white;
    background: rgba(0,0,0,0.4);
    text-shadow: 0 0 black;
  }
  
  .playing {
    transform: scale(1.2); 
    border-color: #80d8ff;
    box-shadow: 0 0 24px #80d8ff;
  }
  
  kbd {
    display: block;
    font-size: 56px;
  }
  
  .som {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px; /* propriedade de espaçamento entre letras */
    color: #ff3d00;
  }