@font-face
{
  font-family: "Lato-Regular";
  src: local("Lato-Regular"),
	url("fuentes/Lato-Regular.ttf") format("truetype");
  font-display: swap;
  font-weight: 100 800;
}
@font-face
{
  font-family: "Lato-Medium";
  src: local("Lato-Medium"),
	url("fuentes/Lato-Medium.ttf") format("truetype");
  font-display: swap;
  font-weight: 100 800;
}
@font-face
{
  font-family: "Lato-Bold";
  src: local("Lato-Bold"),
	url("fuentes/Lato-Bold.ttf") format("truetype");
  font-display: swap;
  font-weight: 100 800;
}
@font-face
{
  font-family: "Objective-Black";
  src: local("Objective-Black"),
	url("fuentes/Objective-Black.otf") format("truetype");
  font-display: swap;
  font-weight: 100 800;
}
@font-face
{
  font-family: "Objective-Bold";
  src: local("Objective-Bold"),
	url("fuentes/Objective-Bold.otf") format("truetype");
  font-display: swap;
  font-weight: 100 800;
}
@font-face
{
  font-family: "Objective-Italic";
  src: local("Objective-Italic"),
	url("fuentes/Objective-Italic.otf") format("truetype");
  font-display: swap;
  font-weight: 100 800;
}

:root {
  --textoNegro: #333333;
  --textoGris: #606060;
	--textoNaranja: #f7b917;
	--fondoNaranja: #f3b61c;
	--fondoGrisClaro: #f2f2f2;
	--widthMaximo: 1950px;
}

html, body
{
  max-width: var(--widthMaximo);
  width: 100%;
  min-height: 100%;
  height: 100%;
  
}
body
{
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content:  start;
  align-items: center;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  overflow: hidden;
}

.Modal_Empezar_Juego
{
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1;
}
.Contenedor_Nombre_Colegio
{
  display: block;
  position: relative;
  width: 400px;
  height: auto;
  background-color: aqua;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 0 4px 0 #d4e574;
  border-radius: 5px;
  padding: 50px;
}
.Contenedor_Nombre_Colegio p
{
  display: block;
  position: relative;
  margin: 0 auto;
  text-align: center;
  margin-top: 10px;
  font-family: "Objective-Italic";
  color: red;
  font-size: 12px;
}
.Contenedor_Nombre_Colegio h1
{
  display: block;
  position: relative;
  font-family: "Objective-Bold";
  font-size: 25px;
  margin: 0 auto;
  text-align: center;
  color: #1c1c1c;
  margin-bottom: 25px;
}
.Contenedor_Nombre_Colegio input
{
  display: block;
  position: relative;
  width: 90%;
  margin: 0 auto;
  border: none;
  border-bottom: 2px solid #1c1c1c;
  padding: 5px;
  background: none;
  text-align: center;
  font-family: "Lato-Bold";
  font-size: 20px;
  color: gray;
  text-transform: capitalize;
  outline: none;
}
.Contenedor_Botones_Aceptar
{
  display: block;
  position: relative;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  margin-top: 30px;
}
.Boton_Aceptar
{
  display: inline-block;
  position: relative;
  background-color: #77a07a;
  color: white;
  border-radius: 1vh;
  box-shadow: 0 4px 0 #d4e574;
  //border: 3px solid #98d8c8;
  padding: 10px;
  font-size: 20px;
  font-family: "Objective-Bold";
  margin-right: 15px;
}
.Boton_Cancelar
{
  display: inline-block;
  position: relative;
  background-color: #77a07a;
  color: white;
  border-radius: 1vh;
  box-shadow: 0 4px 0 #d4e574;
  //border: 3px solid #98d8c8;
  padding: 10px;
  font-size: 20px;
  font-family: "Objective-Bold";
  margin-left: 15px;
}
.Modal_Fin
{
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1;
  text-align: center;
}
.Modal_Fin h1
{
  display: block;
  position: relative;
  font-family: "Objective-Bold";
  font-size: 35px;
  margin: 0 auto;
  text-align: center;
  color:  cornflowerblue;
  margin-bottom: 25px;
}
.Modal_Fin h2
{
  display: inline-block;
  position: relative;
  width: 100%;
  font-family: "Objective-Bold";
  font-size: 20px;
  margin: 0 auto;
  text-align: center;
  color: #1c1c1c;
}
.Modal_Fin h2 span
{
  display: inline-block;
  position: relative;
  font-family: "Objective-Bold";
  font-size: 20px;
  margin: 0 auto;
  text-align: center;
  color: darkgoldenrod;
  margin-bottom: 25px;
}
.Boton_Aceptar_Fin
{
  display: inline-block;
  position: relative;
  background-color: #77a07a;
  color: white;
  border-radius: 1vh;
  box-shadow: 0 4px 0 #d4e574;
  //border: 3px solid #98d8c8;
  padding: 10px;
  font-size: 20px;
  font-family: "Objective-Bold";
  margin: 0 auto;
}

.Contenedor_Juego
{
  width: 100%;
  height: 70%;
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: #0E3B43;
  padding: 30px;
  margin: 0 auto;
  box-shadow: 0 6px 0 cornflowerblue;
  //border-radius: 2vh;
}
.Titulo_Principal
{
  display: block;
  position: relative;
  width: 90%;
  height: auto;
  text-align: center;
  color: white;
  font-family: "Objective-Black";
  font-size: 3vw;
  margin: 0 auto;
  margin-top: 2vh;
}
.Logo_Juventud
{
  display: block;
  position: absolute;
  width: 6vw;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.Logo_JAV
{
  display: block;
  position: absolute;
  width: 9vw;
  top: 70%;
  right: 0;
  transform: translateY(-50%);
}
.Titulo_Principal span
{
  color: lightskyblue;
}

.Contenedor_Estadisticas
{
  display: flex;
  position: relative;
  width: 85%;
  margin: 0 auto;
  justify-content: center;
  align-content:  center;
  align-items: center;
  padding: 5vh;
}
.Boton_Empezar
{
  background-color: #77a07a;
  color: white;
  border-radius: 1vh;
  box-shadow: 0 4px 0 #d4e574;
  //border: 3px solid #98d8c8;
  padding: 10px;
  font-size: 1.3vw;
  font-family: "Objective-Bold";
}
.Tiempo
{
  width: auto;
  height: auto;
  background-color: #77a07a;
  color: white;
  border-radius: 1vh;
  box-shadow: 0 4px 0 #d4e574;
  //border: 3px solid #98d8c8;
  padding: 10px;
  font-family: "Objective-Bold";
  font-size: 1.3vw;
  margin-left: 50px;
  margin-right: 50px;
}
.Tiempo h1
{
  display: inline;
  position: relative;
  font-family: "Objective-Black";
  font-size: 1.2vw;
}
.Minutos,.Segundos
{
  display: inline-block;
  position: relative;
  width: auto;
  height: auto;
  font-size: 1.2vw;
  font-family: "Objective-Black";
}
.Movimientos
{
  width: auto;
  height: auto;
  background-color: #77a07a;
  color: white;
  border-radius: 1vh;
  box-shadow: 0 4px 0 #d4e574;
  //border: 3px solid #98d8c8;
}
.Movimientos h1
{
  display: inline;
  position: relative;
  font-family: "Objective-Bold";
  font-size: 1.3vw;
  padding: 10px;
}
.Movimientos span
{
  display: inline-block;
  position: relative;
  width: auto;
  height: auto;
  padding: 10px;
  font-size: 1.2vw;
  font-family: "Objective-Bold";
  padding-left: 0;
}

.Contenedor_Cartas
{
  width: 90%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-content:  flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2vh;
  background-color: #0E3B43;
  border-radius: 2vh;
  margin: 0 auto;
}

.Carta
{
  aspect-ratio: 1;
  cursor: pointer;
  flex-basis: auto;
  flex: 0 1 calc((100% - (8 * 25px)) / 8); 
  /* CRITICAL: Prevents long text or large images from stretching the column */
  min-width: 0;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}
//.Carta:hover{transform: scale(1.08);}

.Carta_Atras, .Carta_Frente
{
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Carta_Frente
{
  background-color: aqua;
  color: white;
  box-shadow: 0 4px 0 #d4e574;
  //border: 3px solid #98d8c8;
  transform: rotateY(-180deg);
  transform-style: preserve-3d;
  transition: transform 0.6s;
}
.Carta_Frente img
{
  display: block;
  position: relative;
  width: 80%;
  height: auto;
}

.Carta_Atras
{
  background-color: #77c3ef;
  color: white;
  overflow: hidden;
  box-shadow: 0 4px 0 #BFEDC1;
  //border: 3px solid #98d8c8;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}
.Carta_Atras img
{
  display: block;
  position: relative;
  width: 80%;
  height: auto;
}
.Carta_Coincide
{
  background-color: cornflowerblue;
}

.Carta_Seleccionada_Frente
{
  transform: rotateY(0deg);// scale(1.08);
}
.Carta_Seleccionada_Atras
{
  transform: rotateY(180deg);// scale(1.08);
}
//.Carta_Seleccionada:hover{transform: scale(1.08);}

.Contenedor_Jugadores
{
  display: flex;
  position: relative;
  width: 90%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  justify-content: center;
  padding: 30px;
  gap: 15px;
}
.Jugador
{
  background-color: azure;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 4px 0 lightgreen;
  border: 3px solid #98d8c8;
}
.Jugador h1
{
  display: inline-block;
  position: relative;
  margin: 0;
  font-family: "Lato-Bold";
  font-size: 1em;
  color: #1c1c1c;
}
.Jugador h2
{
  display: inline-block;
  position: relative;
  margin: 0;
  font-family: "Lato-Bold";
  font-size: 1em;
  color: magenta;
  
}
.Jugador_Resultados
{
  display: block;
  margin-top: 10px;
}

Confetti
{
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 8px;
  background: red;
  opacity: 0;
}

@keyframes explosionConfetti
{
  from
  {
    transform: translate3d(0,0,0);
    opacity: 1;
  }
}