@charset "UTF-8";
html, body {
  margin: 0;
  padding: 0;
}

header {
  border-bottom: 1px solid #c8c8c8;
  height: 15vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
header h1 {
  font-family: "Raleway", sans-serif;
  font-weight: bold;
  user-select: none;
  margin: 0;
}
header h2 {
  font-family: "Raleway", sans-serif;
  font-weight: bold;
  user-select: none;
  margin: 0;
  color: #48a6fd;
  margin-top: 0.5vh;
  cursor: pointer;
}

.game-container {
  display: flex;
  justify-content: space-around;
  margin-top: 2vh;
}
.game-container .column-2 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hangman {
  user-select: none;
}
.hangman img {
  width: 20vw;
}

.word {
  font-family: "Rambla", sans-serif;
  font-weight: 400;
  font-size: 50pt;
  display: flex;
  align-items: center;
  max-width: 70vw;
  display: flex;
  flex-wrap: wrap;
}
.word .letter {
  width: 3vw;
  height: 70pt;
  margin-left: 2vw;
  border-bottom: 5px solid #000;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.word .counter {
  font-size: 40pt;
  font-family: Arial, Helvetica, sans-serif;
  margin-left: 3vw;
}

.current-score {
  display: flex;
  flex-direction: row-reverse;
  font-family: "Raleway", sans-serif;
  font-weight: bold;
  font-size: 18pt;
  color: #58ff6b;
}
.current-score .text {
  user-select: none;
}

.categories-container {
  overflow-y: hidden;
}
.categories-container .categories {
  position: absolute;
  top: 15vh;
  left: 0;
  height: 85vh;
  width: 100vw;
  background-color: #e1e1e1;
  transition: opacity 0.4s ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
  padding-top: 10vh;
  padding-bottom: 10vh;
}
.categories-container .categories button, .categories-container .categories select {
  height: 10vh;
  width: 50vw;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22pt;
  border: none;
  border-radius: 10px;
  text-align: center;
  text-align-last: center;
  -moz-text-align-last: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.categories-container .categories button img, .categories-container .categories button .blank-space, .categories-container .categories select img, .categories-container .categories select .blank-space {
  height: 4vw;
  width: 4vw;
}
.categories-container .categories button.Select, .categories-container .categories select.Select {
  color: #000;
  background-color: #E96363;
  border: #e16363 solid 2px;
  cursor: pointer;
  transition: 0.4s ease-in-out;
}
.categories-container .categories button.Select:hover, .categories-container .categories select.Select:hover {
  background-color: #ef9090;
  transition: 0.4s ease-in-out;
}
.categories-container .categories button.Select:hover img, .categories-container .categories select.Select:hover img {
  animation: bounce;
  animation-duration: 0.5s;
}
.categories-container .categories button.Cities, .categories-container .categories button.Ciudades, .categories-container .categories select.Cities, .categories-container .categories select.Ciudades {
  color: #000;
  background-color: #5f9ea0;
  border: #5f9798 solid 2px;
  cursor: pointer;
  transition: 0.4s ease-in-out;
}
.categories-container .categories button.Cities:hover, .categories-container .categories button.Ciudades:hover, .categories-container .categories select.Cities:hover, .categories-container .categories select.Ciudades:hover {
  background-color: #7fb1b3;
  transition: 0.4s ease-in-out;
}
.categories-container .categories button.Cities:hover img, .categories-container .categories button.Ciudades:hover img, .categories-container .categories select.Cities:hover img, .categories-container .categories select.Ciudades:hover img {
  animation: bounce;
  animation-duration: 0.5s;
}
.categories-container .categories button.Pokemons, .categories-container .categories select.Pokemons {
  color: #000;
  background-color: #ffcb05;
  border: #f7c505 solid 2px;
  cursor: pointer;
  transition: 0.4s ease-in-out;
}
.categories-container .categories button.Pokemons:hover, .categories-container .categories select.Pokemons:hover {
  background-color: #ffd638;
  transition: 0.4s ease-in-out;
}
.categories-container .categories button.Pokemons:hover img, .categories-container .categories select.Pokemons:hover img {
  animation: bounce;
  animation-duration: 0.5s;
}
.categories-container .categories button.Programming.Languages, .categories-container .categories button.Lenguajes.De.Programación, .categories-container .categories select.Programming.Languages, .categories-container .categories select.Lenguajes.De.Programación {
  color: #fff;
  background-color: #e46f01;
  border: #dc6b01 solid 2px;
  cursor: pointer;
  transition: 0.4s ease-in-out;
}
.categories-container .categories button.Programming.Languages:hover, .categories-container .categories button.Lenguajes.De.Programación:hover, .categories-container .categories select.Programming.Languages:hover, .categories-container .categories select.Lenguajes.De.Programación:hover {
  background-color: #fe881a;
  transition: 0.4s ease-in-out;
}
.categories-container .categories button.Programming.Languages:hover img, .categories-container .categories button.Lenguajes.De.Programación:hover img, .categories-container .categories select.Programming.Languages:hover img, .categories-container .categories select.Lenguajes.De.Programación:hover img {
  animation: bounce;
  animation-duration: 0.5s;
}
.categories-container .categories button.Animals, .categories-container .categories button.Animales, .categories-container .categories select.Animals, .categories-container .categories select.Animales {
  color: #000;
  background-color: #efa482;
  border: #e7a282 solid 2px;
  cursor: pointer;
  transition: 0.4s ease-in-out;
}
.categories-container .categories button.Animals:hover, .categories-container .categories button.Animales:hover, .categories-container .categories select.Animals:hover, .categories-container .categories select.Animales:hover {
  background-color: #f5c5af;
  transition: 0.4s ease-in-out;
}
.categories-container .categories button.Animals:hover img, .categories-container .categories button.Animales:hover img, .categories-container .categories select.Animals:hover img, .categories-container .categories select.Animales:hover img {
  animation: bounce;
  animation-duration: 0.5s;
}
.categories-container .categories button.Countries, .categories-container .categories button.Países, .categories-container .categories select.Countries, .categories-container .categories select.Países {
  color: #fff;
  background-color: #9f0000;
  border: #970000 solid 2px;
  cursor: pointer;
  transition: 0.4s ease-in-out;
}
.categories-container .categories button.Countries:hover, .categories-container .categories button.Países:hover, .categories-container .categories select.Countries:hover, .categories-container .categories select.Países:hover {
  background-color: #d20000;
  transition: 0.4s ease-in-out;
}
.categories-container .categories button.Countries:hover img, .categories-container .categories button.Países:hover img, .categories-container .categories select.Countries:hover img, .categories-container .categories select.Países:hover img {
  animation: bounce;
  animation-duration: 0.5s;
}
.categories-container .categories button.Random, .categories-container .categories select.Random {
  color: #000;
  background-color: #4285f4;
  border: #4282ec solid 2px;
  cursor: pointer;
  transition: 0.4s ease-in-out;
}
.categories-container .categories button.Random:hover, .categories-container .categories select.Random:hover {
  background-color: #72a4f7;
  transition: 0.4s ease-in-out;
}
.categories-container .categories button.Random:hover img, .categories-container .categories select.Random:hover img {
  animation: bounce;
  animation-duration: 0.5s;
}
.categories-container .categories.hidden {
  opacity: 0%;
  top: 0;
  height: 85vh;
}
.categories-container .categories.hidden button, .categories-container .categories.hidden select {
  height: 5vh;
}
.categories-container .categories.show {
  opacity: 100%;
}
.categories-container .categories.stretch {
  height: auto;
  width: 100%;
}
.categories-container .categories.stretch button, .categories-container .categories.stretch select {
  margin-bottom: 5vh;
}
.categories-container .categories.stretch:last-child {
  margin-bottom: 0vh !important;
}

.defeat, .victory {
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80pt;
  background-color: rgba(0, 0, 0, 0.775);
  user-select: none;
}
.defeat h1, .victory h1 {
  padding: 5%;
  background-color: rgba(0, 0, 0, 0.775);
}

.defeat {
  color: #ff6363;
}

.victory {
  color: #58ff6b;
}

.loading {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading img {
  width: 50px;
  height: 50px;
}

.letters-registered {
  margin: 0px 5vw;
  display: flex;
  align-items: center;
  font-family: "Times New Roman", Times, serif;
  color: #918c6c;
  font-size: 50pt;
  height: 20vh;
}
.letters-registered span {
  margin-left: 1vw;
}

/*# sourceMappingURL=index.css.map */