* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 10px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background-color: rgba(120, 118, 97, 0.2);
}
.navigation, .input, .keyboard {
  max-width: 700px;
  margin: 0 auto;
  padding: 5px 50px;
}
.navigation{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.levels{
  padding: 20px 50px;
  margin: 0 auto;
}
.level--input:first-child{
  margin-left: 40px;
}
.level--input{
  vertical-align: text-bottom;
  margin: auto 5px;
}
.levels--label{
  margin: 20px auto;
  font-size: 2.6rem;
  text-align: center;
}
.level--label{
  font-size: 1.6rem;
  margin: 20px 40px auto 5px;
}
.roundsLabel {
  font-size: 2.0rem;
  margin: 0 auto;
  padding: 20px;
  color:black;
}
.roundsLabel--disable{
  color: rgb(226, 225, 229);
}
.buttomContainer {
  display: flex;
  justify-content: center;
  flex-direction: row;
}
.buttonReStart, .buttonRepeat, .buttonStart, .buttonNext {
  display: none;
  width: 150px;
  height: 40px;
  margin: 0 10px;
  border-radius: 5px;
  border: 2px solid rgb(117, 115, 143);
  cursor: pointer;
  color: rgb(42, 38, 86);
  font-size: 1.4rem;
}
.buttonRepeat:disabled, .buttonReStart:disabled {
  border: 2px solid rgb(190, 188, 203);
  cursor:auto;
  color: #516d80;
}
.buttonStart{
  font-size: 1.6rem;
}
.output {
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.output--p {
  margin: 0 auto;
  font-size: 1.6rem;
  color: rgb(27, 55, 84);
}
.keyboard{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.green {
  color: green;
}
.red {
  color: green;
}
.key {
  display: none;
  border-radius: 5px;
  height: 30px;
  border: 2px solid #9dc6e1;
  transition: box-shadow 350ms ease-in-out;
  transition: background-color 350ms ease;
  cursor: pointer;
  font-size: 1.6rem;
}
.key:focus{
  border: 2px solid #5caee4;
}
.key:active{
  background-color: #6b97b4;
}
.key.active {
  border: 2px solid #146194;
  box-shadow: rgba(20, 97, 148, 0.25) 0px 50px 100px -20px inset;
  transition: border 350ms ease-in-out;
}
.keyboardContainer--numbers{
  width: 8%;
  margin: 5px 5px 10px 5px;
}
.keyboardContainer--letter {
  width: 6%;
  margin: 3px;
}
.visible {
  display: inline-block;
}
@media (max-width: 615px) {
  .navigation, .input, .keyboard {
    padding: 5px 25px;
  }
  .keyboardContainer--numbers{
    width: 7.5%;
    margin: 5px 6px 10px 5px;
  }
  html {
    font-size: 9px;
  }
  .levels{
    padding: 10px 35px;
  }
  .level--label{
    margin: 20px 30px auto 5px;
  }
}
@media (max-width: 520px) {
  .navigation, .input, .keyboard {
    padding: 5px 15px;
  }
  .keyboardContainer--numbers{
    min-width: 8.5%;
    margin: 5px 2px 10px 2px;

  }
  .keyboardContainer--letter {
    /* width: 6%; */
    margin: 1.5px;
  }
  .levels{
    padding: 10px 15px;
  }
  .levels--label{
    font-size: 2.0rem;
  }
  .level--label{
    margin: 20px 10px auto 0px;
  }
}