@font-face {
  font-family: 'Default';
  src: url('/assets/FuzzyBubbles-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Default';
  src: url('/assets/FuzzyBubbles-Regular.ttf') format('truetype');
  font-weight: bold;
  font-style: bold;
}

@font-face {
  font-family: 'Ruby';
  src: url('/assets/RubikDirt-Regular.ttf') format('truetype');
  font-weight: bold;
  font-style: bold;
}

* {
  font-family: 'Default';
  font-size: 1rem;
  font-weight: bold;
}

input[type='text'],
div.solution {
  font-family: 'Ruby';
  font-family: 'Ruby';
  font-weight: bold;
  letter-spacing: 5px;
  font-size: 1.7rem;
  text-transform: uppercase;
}

.keyboard button {
  font-weight: bold;

}

::selection {
  background-color: rgb(17 94 89);
  color: white;
}

@keyframes loadScene {
  from {
     opacity: .5;
    transform: translateY(-100%) scale(0);
  }
  to {
    transform: translateY(0) scale(1);
  }
}

@keyframes fadeIn {
  from {
    opacity: .3;
  }
  to {
    opacity: 1;
  }
}

.animate-scene {
  opacity: .3;
  animation: loadScene 0.5s ease-out, fadeIn .5s ease-out 0.5s;
  animation-fill-mode: forwards;
}