@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: "Be Vietnam Pro", sans-serif;
  font-weight: bold;
  user-select: none;
  margin: 0;
}
header h2 {
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: bold;
  user-select: none;
  margin: 0;
  color: #48a6fd;
  margin-top: 0.5vh;
  cursor: pointer;
}
header .redirect-button {
  position: absolute;
  left: 5%;
  width: 10vw;
  padding: 2vh 0px;
  background-color: #e76f4b;
  border: 1px solid #ff6233;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  transition: ease-in-out 0.1s;
}
header .redirect-button:hover {
  background-color: #ce694b;
  transition: ease-in-out 0.2s;
}
header .account-preview {
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: bold;
  position: absolute;
  left: 88%;
  top: 1vh;
  padding: 2vh 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
header .account-preview .initials {
  height: 8vh;
  width: 8vh;
  color: #fff;
  background-color: #5151ff;
  font-size: 3vh;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}
header .account-preview .initials.inclusive {
  font-size: 11pt;
}
header .account-preview .full-name {
  width: 5vw;
  margin-top: 0.5vh;
  background-color: rgba(0, 0, 0, 0.658);
  color: #fff;
  display: flex;
  justify-content: center;
  opacity: 0%;
  transition: 0.4s ease-in-out;
  text-align: center;
  padding: 0px 2vw;
  padding-bottom: 1vh;
  border-radius: 10px;
  user-select: none;
}
header .account-preview .full-name.show {
  opacity: 100%;
  transition: 0.4s ease-in-out;
}
@media (max-width: 991.98px) {
  header .account-preview {
    left: 80%;
  }
  header .account-preview .full-name.show {
    opacity: 0%;
  }
}

@media (max-width: 991.98px) {
  header h2 {
    color: #fff;
    background-color: #48a6fd;
    padding: 1vh 1vw;
    border-radius: 5px;
    transition: 0.2s ease-in-out;
  }
  header h2:active {
    background-color: #1f476d;
    transition: 0.4s ease-in-out;
  }
}
@media (max-width: 576px) {
  header {
    padding: 3vh 0px;
    height: auto;
  }
  header h2 {
    margin-bottom: 1vh;
  }
  header .redirect-button {
    width: 20vw;
    position: initial;
  }
  header .account-preview {
    position: initial;
  }
  header .account-preview .full-name {
    height: 0;
  }
  header .account-preview .full-name.show {
    opacity: 0%;
  }
}
.game-container {
  display: flex;
  justify-content: space-around;
  margin-top: 2vh;
}
.game-container .column-2 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (max-width: 991.98px) {
  .game-container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .game-container .column-1 {
    order: 10;
  }
  .game-container .column-1 .hangman img {
    width: 30vw;
  }
  .game-container .column-2 {
    order: 0;
    margin-bottom: 10vh;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
/*@media (max-width: 576px) {

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

.word {
  font-family: "Be Vietnam Pro", 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 .letter.blank {
  border: none;
}
.word .counter {
  font-size: 40pt;
  font-family: Helvetica, sans-serif;
  margin-left: 3vw;
}

@media (max-width: 991.98px) {
  .word .letter {
    font-size: 10vw;
  }
  .word .counter {
    align-self: flex-end;
  }
}
@media (max-width: 576px) {
  .word .counter {
    font-size: 10vw;
  }
}
.current-score {
  display: flex;
  flex-direction: row-reverse;
  font-family: "Be Vietnam Pro", 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;
}
.categories-container .categories button, .categories-container .categories select {
  height: 10vh;
  width: 50vw;
  font-family: 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;
}

@media (max-width: 991.98px) {
  .categories-container .categories {
    padding: 0;
  }
  .categories-container .categories button, .categories-container .categories select {
    font-size: 4vw !important;
  }
}
.defeat, .victory {
  font-family: Helvetica, sans-serif;
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7vw;
  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;
}

@media (max-width: 991.98px) {
  .defeat, .victory {
    height: 100%;
    width: 100%;
  }
}
.loading {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading img {
  width: 50px;
  height: 50px;
}

@media (max-width: 991.98px) {
  .loading {
    height: 150vh;
  }
}
.letters-registered {
  padding: 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;
}

.letter-input-container {
  height: 30vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.letter-input-container #letter-input {
  width: 10vw;
  height: 10vw;
  text-align: center;
  font-size: calc(10vw - 20px);
  border-radius: 5px;
  border: none;
  outline: none;
  border: 2px solid #f87665;
  background-color: #303030cd;
  color: #ffffff5f;
}

.form-container {
  font-family: Helvetica, sans-serif;
}
.form-container .message {
  padding: 4vh 5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: bold;
  user-select: none;
  margin: 0;
  font-size: 22pt;
  color: #fff;
}
.form-container .message.error {
  background-color: #ff4e4e;
}
.form-container .message.sucess {
  background-color: #80ff4e;
}
.form-container .options-container {
  display: flex;
  height: 10vh;
  width: 100%;
}
.form-container .options-container .option {
  color: #fff;
  background-color: #3670c9;
  cursor: pointer;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: ease-in-out 0.2s;
}
.form-container .options-container .option.active {
  cursor: initial;
  background-color: #364f75;
  transition: ease-in-out 0.4s;
}
.form-container form {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 3vh;
}
.form-container form input {
  width: 33vw;
  height: 5vh;
  padding: 0;
  box-sizing: content-box;
  margin-bottom: 0.5vh;
  border: 0;
  border-bottom: 1px solid #797979;
  outline: none;
}
.form-container form input[type=submit] {
  margin-top: 1vh;
  border-bottom: 0;
  border: 1px solid #797979;
}
.form-container p.aditional-text {
  color: #3670c9;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.form-container .loading {
  opacity: 70%;
}

@media (min-width: 991.98px) {
  .form-container {
    margin: 0px 20vw;
  }
}
.message-container {
  padding: 4vh 5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ff4e4e;
}
.message-container h2 {
  color: #fff;
  margin: 0;
}

.control-panel .buttons-container {
  height: 60vh;
  max-width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 5vh 15vw;
}
.control-panel .buttons-container button {
  width: 16vw;
  max-width: 250px;
  height: 16vw;
  max-height: 250px;
  margin: 0px 3vw;
  margin-bottom: 5vh;
  font-size: 1.5vw;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.control-panel .buttons-container button {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.control-panel .buttons-container button:hover, .control-panel .buttons-container button:focus, .control-panel .buttons-container button:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.control-panel .buttons-container button.add-words {
  background-color: #77b3d6;
  border: 1px solid #77a3bd;
  transition: ease-in-out 0.4s;
}
.control-panel .buttons-container button.add-words.active {
  background-color: #9ec9e2;
  transition: ease-in-out 0.4s;
  transform: scale(1.1);
  border-bottom: 3px solid #7e7e7e;
}
.control-panel .buttons-container button.add-words:hover {
  background-color: #9ec9e2;
  transition: ease-in-out 0.4s;
}
.control-panel .buttons-container button.add-category {
  background-color: #c469cc;
  border: 1px solid #ad69b3;
  transition: ease-in-out 0.4s;
}
.control-panel .buttons-container button.add-category.active {
  background-color: #d38fd9;
  transition: ease-in-out 0.4s;
  transform: scale(1.1);
  border-bottom: 3px solid #7e7e7e;
}
.control-panel .buttons-container button.add-category:hover {
  background-color: #d38fd9;
  transition: ease-in-out 0.4s;
}
.control-panel .buttons-container button.delete-category {
  background-color: #f79143;
  border: 1px solid #de8643;
  transition: ease-in-out 0.4s;
}
.control-panel .buttons-container button.delete-category.active {
  background-color: #f9ae74;
  transition: ease-in-out 0.4s;
  transform: scale(1.1);
  border-bottom: 3px solid #7e7e7e;
}
.control-panel .buttons-container button.delete-category:hover {
  background-color: #f9ae74;
  transition: ease-in-out 0.4s;
}
.control-panel .buttons-container button.delete-word {
  background-color: #df6767;
  border: 1px solid #c66767;
  transition: ease-in-out 0.4s;
}
.control-panel .buttons-container button.delete-word.active {
  background-color: #e89191;
  transition: ease-in-out 0.4s;
  transform: scale(1.1);
  border-bottom: 3px solid #7e7e7e;
}
.control-panel .buttons-container button.delete-word:hover {
  background-color: #e89191;
  transition: ease-in-out 0.4s;
}
.control-panel .buttons-container button.edit-word {
  background-color: #7dbb4e;
  border: 1px solid #72a24e;
  transition: ease-in-out 0.4s;
}
.control-panel .buttons-container button.edit-word.active {
  background-color: #98c973;
  transition: ease-in-out 0.4s;
  transform: scale(1.1);
  border-bottom: 3px solid #7e7e7e;
}
.control-panel .buttons-container button.edit-word:hover {
  background-color: #98c973;
  transition: ease-in-out 0.4s;
}
.control-panel .buttons-container.nav-mode {
  height: 5vw;
  padding: 1vh 5vw;
  align-items: initial;
  justify-content: space-between;
}
.control-panel .buttons-container.nav-mode button {
  height: 5vh;
  width: 15vw;
  margin: 0px 0.5vw;
  font-size: 1vw;
}
.control-panel .action-form {
  box-sizing: border-box;
  padding: 0px 16.5vw;
  display: flex;
  justify-content: center;
}
.control-panel .action-form form {
  height: 100%;
  max-width: 742px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-top: 3vh;
}
.control-panel .action-form form select {
  height: 4vh;
  outline: none;
}
.control-panel .action-form form textarea {
  resize: none;
  outline: none;
  font-family: Helvetica, sans-serif;
}
.control-panel .action-form form input[type=submit] {
  font-size: 12pt;
  margin-top: 1vh;
  height: 5vh;
  background-color: #2f71d5;
  color: #fff;
  border: none;
  border: 1px solid #5597fc;
}
.control-panel .action-form form input[type=submit]:hover {
  background-color: #397de5;
}
.control-panel .action-form form input[type=text] {
  height: 5vh;
  font-family: Helvetica, sans-serif;
  font-size: 1.2vw;
  outline: none;
  border: none;
  border-bottom: 1px solid #a2a2a2;
}
.control-panel .action-form.add-word form select {
  margin-bottom: 0.5vh;
}
.control-panel .action-form.add-word form textarea {
  margin-top: 2vh;
}
.control-panel .action-form.add-category form .frist-row {
  margin-bottom: 3vh;
}
.control-panel .action-form.add-category form .frist-row, .control-panel .action-form.add-category form .second-row {
  display: flex;
  flex-direction: column;
}
.control-panel .action-form.add-category form .frist-row input[type=text], .control-panel .action-form.add-category form .second-row input[type=text] {
  margin-bottom: 1vh;
}
.control-panel .action-form.delete-word .loading {
  position: absolute;
  top: 25vh;
  height: 30vh;
}
.control-panel .action-form.delete-word form select {
  margin-bottom: 0.5vh;
}
.control-panel .action-form.edit-word form select {
  margin-bottom: 0.5vh;
}
.control-panel .action-form.edit-word form input[type=text]:disabled {
  opacity: 40%;
}
@media (max-width: 991.98px) {
  .control-panel .action-form form input[type=submit] {
    font-size: 2.4vw;
  }
  .control-panel .action-form form input[type=text] {
    font-size: 12pt;
  }
}
@media (max-width: 576px) {
  .control-panel .action-form {
    padding-left: 0;
    padding-right: 0;
  }
  .control-panel .action-form form select {
    border: none;
    border-bottom: 1px solid #a2a2a2;
    background-color: #fff;
  }
  .control-panel .action-form form input[type=submit] {
    font-size: 12pt;
  }
  .control-panel .action-form form input[type=text] {
    font-size: 12pt;
  }
}
.control-panel .message {
  padding: 4vh 5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: bold;
  user-select: none;
  margin: 0;
  font-size: 22pt;
  color: #fff;
}
.control-panel .message.error {
  background-color: #ff4e4e;
}
.control-panel .message.sucess {
  background-color: #80ff4e;
}
.control-panel .loading {
  position: initial;
  height: 100%;
}

@media (max-width: 991.98px) {
  .control-panel .buttons-container {
    height: auto;
    flex-direction: column;
    justify-content: space-around;
    align-items: initial;
    flex-wrap: nowrap;
  }
  .control-panel .buttons-container button {
    max-width: none;
    max-height: none;
    width: 66vw;
    height: 20vh;
    font-size: 3vw;
    margin-bottom: 3vh;
  }
  .control-panel .buttons-container.nav-mode {
    padding: 0;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: stretch;
  }
  .control-panel .buttons-container.nav-mode button {
    transition: 0.4 ease-in-out;
    box-sizing: border-box;
    height: 8vh;
    border-radius: 0;
    width: 50vw;
    flex-grow: 1;
    align-self: stretch;
    margin: 0;
    font-size: 2vw;
  }
  .control-panel .buttons-container.nav-mode button {
    display: initial;
    vertical-align: none;
    -webkit-transform: none;
    transform: none;
    box-shadow: none;
  }
  .control-panel .buttons-container.nav-mode button:hover, .control-panel .buttons-container.nav-mode button:focus, .control-panel .buttons-container.nav-mode button:active {
    -webkit-transform: none;
    transform: none;
  }
  .control-panel .buttons-container.nav-mode button.active {
    transform: none;
    border-bottom: none;
  }
}
@media (max-width: 576px) {
  .control-panel .buttons-container button {
    font-size: 12pt;
  }
  .control-panel .buttons-container.nav-mode button {
    font-size: 12pt;
  }
}
.control-panel .demo-message-container {
  display: flex;
  justify-content: center;
  padding-top: 5vh;
}
.control-panel .demo-message-container .demo-message {
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: bold;
  background-color: #f7f7f7;
  width: 40vw;
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #c4c4c4;
  border-radius: 5px;
}

header.demo h1 {
  height: 100%;
  display: flex;
  align-items: center;
}
header.demo h1 span.demoSpan {
  background: -webkit-linear-gradient(118deg, #ffaa3b 0%, #ff6b00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  align-items: center;
}
header.demo h1 span.demoSpan:hover {
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
header.demo h1 span.demoSpan:hover, header.demo h1 span.demoSpan:focus, header.demo h1 span.demoSpan:active {
  -webkit-transform: rotate(4deg);
  transform: rotate(4deg);
}

.info-account {
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 400;
}
.info-account .loading {
  position: initial;
  height: max-content;
  height: 50vh;
}
.info-account .person {
  width: 50vw;
  margin-left: 15vw;
  border-bottom: 1px solid #cabf9e;
}
.info-account .person h3 {
  font-weight: 300;
}
.info-account .functions {
  width: 50vw;
  margin-left: 15vw;
  margin-top: 2vh;
  display: flex;
}
.info-account .functions .close-session {
  width: 20vw;
  height: 10vh;
  font-size: 15pt;
  background: #b9b9b9;
  transition: ease-in-out 0.4s;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
.info-account .functions .close-session:hover {
  background: #ffa5a5;
  transition: ease-in-out 0.4s;
}
.info-account .functions .reffer-code-container {
  margin-left: 5vh;
  flex-grow: 1;
  display: flex;
  align-items: center;
}
.info-account .functions .reffer-code-container p {
  width: 100%;
  flex-grow: 1;
}
.info-account .functions .reffer-code-container button {
  width: 3vw;
  height: 3vw;
  background-color: white;
  border: 0;
  border: 1px solid #535353;
  border-radius: 100%;
}
.info-account .functions .reffer-code-container button:hover {
  background-color: white;
  border: 3px solid #535353;
  background-color: rgba(0, 0, 0, 0.035);
}
.info-account .functions .reffer-code-container button:active {
  border: 4px solid #535353;
}

@media (max-width: 991.98px) {
  .info-account .functions {
    flex-direction: column;
  }
  .info-account .functions .close-session {
    width: 100%;
    margin-bottom: 1vh;
  }
  .info-account .functions .reffer-code-container {
    margin-left: 0;
  }
}
@media (max-width: 576px) {
  .info-account .person {
    width: auto;
    margin: 0px 10vw;
    margin-top: 2vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;
  }
  .info-account .person h2, .info-account .person h3 {
    margin: 0;
    margin-bottom: 1vh;
  }
  .info-account .functions .reffer-code-container {
    flex-direction: column;
  }
  .info-account .functions .reffer-code-container button {
    border-radius: 10px;
    width: 20vw;
    height: 7vw;
  }
}
.made-with-love .link {
  color: #ff8787;
}

.made-with-love {
  color: #b9b9b9;
  margin-top: auto;
  width: 100%;
  padding-top: 5vh;
  padding-bottom: 5vh;
  padding-left: 3vw;
  box-sizing: border-box;
  position: absolute;
  bottom: 0px;
}

@media (max-width: 991.98px) {
  .made-with-love {
    position: initial;
  }
}
.credits {
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 400;
}

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