* {
  font-family: sans-serif;
}
body {
  background: #509999;
}
/* memdidas generales del menú */
main {
  max-width: 1500px;
  margin: 0 auto;
}
/* cuadricula dela informacion del juego (información y la imagen*/
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  grid-auto-columns: 1fr;
  gap: 20px 20px;
  grid-auto-flow: row;
  grid-template-areas: "informacion imagen";
}
/* area de la imagen*/
.imagen {
  grid-area: imagen;
  justify-self: center;
  align-self: center;
}
/* cuadricula de la imformacion que se divide en 3 (titulo, texto y boton*/
.informacion {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 20px 20px;
  grid-auto-flow: row;
  grid-template-areas:
    "titulos-juegos"
    "texto"
    "btn";
  grid-area: informacion;
}
/* area de el titulo*/
.titulos-juegos {
  grid-area: titulos-juegos;
  justify-self: center;
  align-self: center;
}
/* area del texto */
.texto {
  grid-area: texto;
  justify-self: center;
  align-self: center;
}
/* area del boton*/
.btn {
  grid-area: btn;
  justify-self: center;
  align-self: center;
}

/* distribucion de el cuadro de informacion*/
.informacion {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-right: 10%;
}
/* estilos del texto*/
.texto {
  color: #ffffff;
  font-size: 24px;
  padding: 0px 20px;
  text-shadow: 3px 2px 3px rgb(0, 0, 0);
}
/*  estilos del titulo*/
.titulos-juegos {
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: 400;
  text-align: center;
  text-shadow: 4px 5px 4px #000;
}
/* caudricula de los juegos del grupo*/
.mas-juegos {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 30px 30px;
  grid-auto-flow: row;
  grid-template-areas:
    "juego-1 juego-2 juego-3 juego-4"
    "juego-5 juego-6 juego-7 juego-8";
  padding-top: 20px;
}
/* estilos de la imagen de cada juego*/
.mas-juegos img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* estilos del nombre de cada juego */
.juego a {
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 50px;
  border: 0;
  background-color: white;
  box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
  text-transform: uppercase;
  font-size: 16px;
  transition: all 0.5s ease;
  color: rgb(132, 0, 255);
  text-shadow: 1px 1px 1spx #0400ff;
}
/* animaciones del boton del nombre de cada juego */
.juego a:hover {
  letter-spacing: 3px;
  background-color: #5d18dc;
  color: #ffffff;
  box-shadow: rgb(93 24 220) 0px 7px 29px 0px;
}
.juego a:active {
  letter-spacing: 3px;
  background-color: hsl(261deg 80% 48%);
  color: hsl(0, 0%, 100%);
  box-shadow: rgb(93 24 220) 0px 0px 0px 0px;
  transform: translateY(10px);
  transition: 20ms;
}
/* estilos del boton Entrar al juego*/
.boton {
  text-decoration: none;
  text-shadow: 1px 1px 3px #33ff00;
  align-self: center;
  outline: none;
  cursor: pointer;
  border: none;
  padding: 1.1rem 2rem;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  position: relative;
  display: inline-block;
  font-weight: 700;
  font-size: 18px;
  border-radius: 500px;
  overflow: hidden;
  background: #66ff66;
  color: ghostwhite;
}
/* animaciones del boton Entrar al juego*/
.boton span {
  position: relative;
  z-index: 10;
  transition: color 0.4s;
}
.boton:hover span {
  color: black;
}
.boton::before,
.boton::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.boton::before {
  content: "";
  background: #000;
  width: 120%;
  left: -10%;
  transform: skew(30deg);
  transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}
.boton:hover::before {
  transform: translate3d(100%, 0, 0);
}
/* estilos del nombre de los creadores  */
.creditos {
  color: white;
  font-size: 24px;
  text-align: center;
  padding: 30px;
}

/* Grid areas de cada juego del salon*/
.juego-1 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 0.25fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "img-1"
    "nombre-1";
  grid-area: juego-1;
}
.img-1 {
  justify-self: center;
  align-self: center;
  grid-area: img-1;
}
.nombre-1 {
  justify-self: center;
  align-self: center;
  grid-area: nombre-1;
}
.juego-2 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 0.25fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "img-2"
    "nombre-2";
  grid-area: juego-2;
}
.img-2 {
  justify-self: center;
  align-self: center;
  grid-area: img-2;
}
.nombre-2 {
  justify-self: center;
  align-self: center;
  grid-area: nombre-2;
}
.juego-3 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 0.25fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "img-3"
    "nombre-3";
  grid-area: juego-3;
}
.img-3 {
  justify-self: center;
  align-self: center;
  grid-area: img-3;
}
.nombre-3 {
  justify-self: center;
  align-self: center;
  grid-area: nombre-3;
}
.juego-4 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 0.25fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "img-4"
    "nombre-4";
  grid-area: juego-4;
}
.img-4 {
  justify-self: center;
  align-self: center;
  grid-area: img-4;
}
.nombre-4 {
  justify-self: center;
  align-self: center;
  grid-area: nombre-4;
}
.juego-5 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 0.25fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "img-5"
    "nombre-5";
  grid-area: juego-5;
}
.img-5 {
  justify-self: center;
  align-self: center;
  grid-area: img-5;
}
.nombre-5 {
  justify-self: center;
  align-self: center;
  grid-area: nombre-5;
}
.juego-6 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 0.25fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "img-6"
    "nombre-6";
  grid-area: juego-6;
}
.img-6 {
  justify-self: center;
  align-self: center;
  grid-area: img-6;
}
.nombre-6 {
  justify-self: center;
  align-self: center;
  grid-area: nombre-6;
}
.juego-7 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 0.25fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "img-7"
    "nombre-7";
  grid-area: juego-7;
}
.img-7 {
  justify-self: center;
  align-self: center;
  grid-area: img-7;
}
.nombre-7 {
  justify-self: center;
  align-self: center;
  grid-area: nombre-7;
}
.juego-8 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 0.25fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "img-8"
    "nombre-8";
  grid-area: juego-8;
}
.img-8 {
  justify-self: center;
  align-self: center;
  grid-area: img-8;
}
.nombre-8 {
  justify-self: center;
  align-self: center;
  grid-area: nombre-8;
}