@font-face {
    font-family: 'epoch';
    src: url('assets/font/epoch.ttf');
}


.letter-input {
  font-family: 'epoch', sans-serif;
  background-color: #fff;
  color: #333;
  border: 2px solid #FF5B22;
  border-radius: 5px;
  padding: 5px;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: bold;
}

input:focus {
  outline: none !important;
  box-shadow: none !important;
  color: #333;
  border: 2px solid #FF5B22;
  border-radius: 5px;
  padding: 5px;
  font-size: 14px;
  text-transform: uppercase, bold;
  font-weight: bold;
}

input:-webkit-autofill {
  box-shadow: 0 0 0px 1000px #f3f3f3 inset !important;
  -webkit-text-fill-color: #333 !important;
  border-radius: 6px;
}

.buttonMessage, .buttonInfo, .buttonTutorial{
  background-color: #FF5B22;
  color: white;
  border: none;
  border-radius: 100px;
  padding: 10px 20px;
  font-size: 16px;
  transition: 0.3s;
}

.buttonMessage:hover, .buttonInfo:hover, .buttonTutorial:hover{
  background-color: #852c0f;
}

.buttonPause {
  width: 90px;
  background-color: #ffffff5b;
  color: rgb(0, 0, 0);
  border: 1.5px solid black;
  border-radius: 100px;
  padding: 10px 20px;
  font-size: 16px;
  transition: background-color 0.3s;
  cursor: pointer;
}

.buttonPause:hover {
  background-color: #ffffff;
}

.buttonSound {
  width: 40px;
  height: 40px;
  background: transparent url('assets/sound/volume-off.png') no-repeat center center;
  background-size: 15px;
  border: 1.5px solid black;
  border-radius: 100px;
}

.buttonSound.active {
  width: 40px;
  height: 40px;
  background: transparent url('assets/sound/volume.png') no-repeat center center;
  background-size: 15px;
  border: 1.5px solid black;
  border-radius: 100px;
}

.buttonPlayAgain {
  width: 160px;
  background-color: #000000;
  color: rgb(255, 255, 255);
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 20px;
  cursor: pointer;
}

.buttonPlayAgain:hover {
  background-color: #FF5B22;
}