/*Estilos generales*/
:root {
  font-size: 62.5%;
  --titulo: #a0f78b;
  --azul: #1f8f1f;
  --blanco: #ffffff;
  --negro: #1f8f1f;
  --principal: #a0f78b;
  --secundario: #1f8f1f;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Silkscreen', cursive;
}

main {
  overflow-x: hidden;
}

.game-container {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  background: #795548;
  background-image: radial-gradient(white 1px, transparent 1px), radial-gradient(white 1px, transparent 1px);
  background-position: 0 0, 50px 50px;
  background-size: 100px 100px;
  animation: moveBackground 10s linear infinite;
}

.game {
  box-sizing: initial;
  border: 2px solid var(--azul);
  box-shadow: -6px 6px 0 var(--negro);
  background-color: var(--blanco);
  margin: 0 auto;
  margin-top: 10px;
  padding: 0px 4px 4px 4px;
}


/*Titulo: Skull Game */
h1 {
  font-size: 2.4rem;
  font-weight: 300;
  color: var(--blanco);
  background-color: var(--titulo);
  padding: 5px;
  border-radius: 6px;
  margin-top: 10px;
  margin-bottom: 20px;
}

h1 span {
  display: inline-block;
  padding: 3px;
  background-color: var(--negro);
}

/*Botonesqqq*/

.btns {
  width: 100vw;
  max-width: 900px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 20px;
  margin-top: 20px;
}

.btn-game {
  background: var(--negro);
  color: #fff;
  margin: 0.5em;
  padding: 1em 2em;
  -webkit-transition: 0.25s;
  transition: 0.25s;
  box-shadow: 0.3em 0.3em 0 0 var(--titulo), inset 0.3em 0.3em 0 0 var(--titulo);
}

.btn-game:hover,
.btn-game:focus {
  box-shadow: 0 0 0 0 var(--titulo), inset 6em 3.5em 0 0 var(--titulo);
  color: black;
}

.btn-game:not(:last-child) {
  margin-right: 10px;
}

/*Mensajes*/

.messages {
  width: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px auto 0 auto;
  gap: 4px;
}

.messages p {
  padding: 8px;
  color: var(--titulo);
  border-radius: 6px;
  font-size: 1.5rem;
  min-width: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.messages p span:nth-child(1) {
  min-width: 86px;
  text-align: center;
  margin-right: 6px;
}

.messages p span.record {
  display: inline-block;
  padding: 8px;
  background-color: var(--negro);
  border-radius: 4px;
}

/*Win Container*/
.win-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.win-container span {
  font-size: 100px;
}

.win-container h2 {
  text-align: center;
  line-height: 70px;
  font-weight: bold;
  font-size: 50px;
}

.win-container input {
  width: 390px;
  height: 80px;
  border-radius: 15px;
  border: 2px solid white;
  background-color: #f60;
  font-size: 35px;
  font-weight: bold;
  color: white;
  margin-bottom: 20px;
}

.win-container input:hover {
  width: 490px;
  background-color: #fdef05;
}

.win-container .newrecord {
  text-align: center;
  margin: auto;
  font-size: 20px;
}

/*Fin Win Container*/

/*Start Container*/
body .btn-bg {
  width: 100%;
  height: 100vh;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

body .btn-bg.Pokemon,
#game-over {
  background: #795548;
  background-image: radial-gradient(white 1px, transparent 1px), radial-gradient(white 1px, transparent 1px);
  background-position: 0 0, 50px 50px;
  background-size: 100px 100px;
  animation: moveBackground 10s linear infinite;
}


.btn {
  margin: 0 30px 30px 30px;
  display: block;
}

.btn-info {
  margin-bottom: 10px;
  text-align: center;
  font-family: 'Silkscreen';
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  font-size: 6.5em;
  color: var(--principal);

}

.btn-mention {
  margin-bottom: 70px;
  text-align: center;
  font-family: 'Lato';
  letter-spacing: 0.1em;
  font-size: 1.1em;
  color: var(--principal);
  animation: moveTitle 5s linear infinite alternate;
}

.btn-mention span {
  font-size: 2.2em;
  font-weight: 600;
}

body .btn-bg.Pokemon .btn-group .ball button {
  border: 5px solid var(--principal);
  border-radius: 5px;
  background: transparent;
  overflow: hidden;
  position: relative;
}

body .btn-bg.Pokemon .btn-group .ball button:hover {
  border-color: #729869;
}

body .btn-bg.Pokemon .btn-group .ball button:hover .pokemon-ball::before {
  transform: translate3d(0, -100%, 0);
  transition: transform 0.25s;
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

body .btn-bg.Pokemon .btn-group .ball button:hover .pokemon-ball::after {
  transform: translate3d(0, 100%, 0);
  transition: transform 0.25s;
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

body .btn-bg.Pokemon .btn-group .ball button:hover a {
  transition: none;
  color: transparent;
  z-index: 999;
}

body .btn-bg.Pokemon .btn-group .ball button:hover a::before {
  transform: translate3d(100%, 0, 0);
}

body .btn-bg.Pokemon .btn-group .ball button:hover a span:first-child::before,
body .btn-bg.Pokemon .btn-group .ball button:hover a span:nth-child(2)::before {
  transition-delay: 0.3s;
  transform: translate3d(0, 0, 0);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

body .btn-bg.Pokemon .btn-group .ball button .pokemon-ball {
  position: absolute;
  content: 'Go!';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
}

body .btn-bg.Pokemon .btn-group .ball button .pokemon-ball::before,
body .btn-bg.Pokemon .btn-group .ball button .pokemon-ball::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: #795548;
  transform: translate3d(0, 0, 0);
  transition: transform 0.25s;
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

body .btn-bg.Pokemon .btn-group .ball button .pokemon-ball::after {
  top: 50%;
  background: #795548;
}

body .btn-bg.Pokemon .btn-group .ball button a {
  color: #a0f78b;
  font-weight: 600;
  font-size: 1.5em;
  transition: color 0.5s 0.25s;
  overflow: hidden;
  display: inline-block;
  position: relative;
  z-index: 999;
}

body .btn-bg.Pokemon .btn-group .ball button a::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 5px;
  background: var(--principal);
  top: calc(50% - 2.5px);
  transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);
  transform: translate3d(-100%, 0, 0);
}

body .btn-bg.Pokemon .btn-group .ball button a span {
  position: absolute;
  width: 100%;
  height: 50%;
  top: 0;
  left: 0;
  overflow: hidden;
}

body .btn-bg.Pokemon .btn-group .ball button a span::before {
  position: absolute;
  content: attr(data-letters);
  left: 0;
  width: 100%;
  color: #fff;
  transition: transform 0.5s;
}

body .btn-bg.Pokemon .btn-group .ball button a span:first-child::before {
  top: 0;
  color: #ef594f;
  transform: translate3d(0, 100%, 0);
}

body .btn-bg.Pokemon .btn-group .ball button a span:nth-child(2) {
  top: 50%;
}

body .btn-bg.Pokemon .btn-group .ball button a span:nth-child(2)::before {
  bottom: 0;
  transform: translate3d(0, -100%, 0);
}

.btn-go {
  cursor: pointer;
  overflow: visible;
  outline: none;
  color: #fff;
  position: relative;
  letter-spacing: 0.1em;
  font-weight: 400;
  padding: 1rem 3rem 1rem 3rem;
  text-transform: uppercase;
  font-family: "Lato";
  font-size: 1.5em;
}

.btn-go a {
  text-decoration: none;
}

/*Fin Start Container*/

.inactive {
  display: none;
}


/*Game over*/

#game-over {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 50px;
  position: absolute;
  top: 0;
  left: 0;
  font-family: 'LVDC Game Over 2', sans-serif;
  color: white;
  background-color: #795548;
}

#game-over p:first-child {
  color: var(--principal);
  font-size: 5.5em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid white
}


#game-over p:nth-child(2) {
  color: white;
  font-size: 2.2em;
  font-weight: 600;
}

#button-gameover {
  display: flex;
  align-items: center;
  justify-content: center;
}

#button-gameover button {
  margin: 0 30px;
  padding: 10px 30px;
  width: auto;
  background-color: #729869;
  border-radius: 8px;
  font-family: inherit;
  cursor: pointer;
  color: white;
  transition: transform 0.3s ease-in-out;
}

#button-gameover button:hover {
  transform: scale(0.95);
}

@keyframes moveBackground {
  from {
    background-position: 0 0, 50px 50px;
  }

  to {
    background-position: 100px 100px, 150px 150px;
  }
}

@keyframes moveTitle {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(50px);
  }
}

@media (max-width: 760px) {
  .messages {
    width: 100%;
    flex-direction: column;
  }
}

@media (max-width: 800px) {
  .btns {
    width: 100%;
    max-width: 350px;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    padding: 0 6px;
    gap: 15px;
  }

  .btns .btn-game {
    width: 90%;
    place-self: center;
  }

  .btns .btn-game:nth-child(1),
  .btns .btn-game:nth-child(4) {
    width: 50%;
  }

  .btn-game#up {
    grid-column-start: 1;
    grid-column-end: 3;
  }

  .btn-game#down {
    grid-column-start: 1;
    grid-column-end: 3;
  }
}