html {
  font-size: 10px;
  background: url(#) bottom center;
  background-size: cover;
  font-family: 'Fjalla One', sans-serif;
}
body, html {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
a{
  text-decoration: none;
  text-decoration-color: black;
  color: black;
}
article{
  border: .5rem solid black;
  margin: .5em;
}
header{
  font-size: 55px;
}

.container{
  margin-left: 10em;
}

button{
  display: flex;
  font-size: 55px;
  text-align: center;
  align-content: center;
  justify-content: center;
}

.keys {
  display: flex;
 /* flex: 1;*/
  align-items: center;
  justify-content: center;
}

.key {
  border: .8rem solid white;
  border-radius: 80%;
  /*margin: 0;*/
  font-size: 1.5rem;
  padding: 5rem .5rem;
  transition: all 0.07s ease;
  width: 30rem;
  text-align: center;
  color: white;
  background: rgba(0,0,0,0);
  text-shadow: 0 0 .5rem black;
}

.playing {
  transform: scale(0.75);
  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: #fff5c4;
}

#tariparaumove{
  margin-top: -35rem; 
  margin-left: 20rem;
}

.buttons{
  font-size: 15px;
}

p,footer{
  text-align: center;
}

.st0{fill:#603813;}
.st1{fill:#54200A;}
.st2{fill:#89450E;}
.st3{fill:#66330C;}
.st4{fill:none;}
.st5{fill:#79210B;}
.st6{fill:#472106;}


.st0--{fill:#C69C6D;stroke:#000000;stroke-miterlimit:10;}
.st1--{fill:#A35B26;}
.st2--{fill:#A8A8A8;}
.st3--{fill:#A0480B;}
.st4--{fill:#683716;}
.st5--{fill:#FFFFFF;}
.st6--{fill:#6D6D6D;}
.st7--{fill:#527184;}
.st8--{fill:#AAAAAA;}