@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&family=IM+Fell+English:ital@1&family=Old+Standard+TT:ital@1&display=swap');
@import url('https://fonts.cdnfonts.com/css/harry-potter');

.mis-graficas {
  display: flex; /*Organiza a los elementos en una fila horizontal (fila flex)*/
  flex-wrap: wrap;/* Hace que los elementos pasen a una segunda fila si no hay suficiente espacio */
  justify-content: center;

}

.mi-grafica{
  background-color: #242323; /* Color de fondo para la grafica*/
  border-radius: 10px; /*Borde redondeado para el fondo de la grafica */
  margin: 1%; /* margen del 1% alrededor externo de la grafica para que los elementos no esten pegados*/
  padding: 1%; /*Un margen del 1% hacia adentro del fondo */
  width: 30%; /*Ancho de la grafica de un 30% de acuerdo a su contenedor */
}

.otra-grafica {
  background-color: #0f0f0ff6;
  border-radius: 10px;
  margin: 1%;
  padding: 1%;
  width: 30%;
}

.descripción-graficas {
  font-family: 'IM Fell English', serif;
  border-radius: 10px;
  text-align: center; 
  font-size: 25px;
  background-color: #4e4c4cd8;
  width: 20%;
  height: 35%;
  display: inline-block; /* Hace que la descripcion se vea alineada con las graficas */
  flex-wrap: wrap; /* Hace que la descripcion se vaya a una segunda linea si no cabe */
}

.contenedor-principal {
  object-fit: contain; /*El contenido se ajustara para caber completamente dentro del contenedor*/
  text-align: center;
  width: 100%;
  height: 100%;
  max-width: 1200px; /*Ancho maximo del contenedor principal a 1200px*/
  margin: 0 auto; /*Define el margen superior e inferior en 0 y el derecho e izquierdo como automatico para centrar horizontalmente*/
  overflow: hidden; /*Oculta el contenido que salga del contenedor*/
  box-sizing: border-box; /*El ancho y la altura del contenedor incluyen  tanto el contenido como los bordes*/
}

.hp-img {
  position: relative; /*Se puede mover hacia arriba, abajo, izq o der */
  width: 40%;
  height: 0 auto; /*Establece la altura de la imagen auto para mantener la proporcion original*/
}

.bienvenida-container {
  background-image: linear-gradient(to bottom, #12151bd7,  #151e27d3, #082538cc, #03122ead);
  border-radius: 20px;
  width: 60%;
  font-size: 25px;
  line-height: 1.5;
  text-align: center;
  display: inline-block; /*Visualizacion para el contenedor como linea*/
}

.msj-bienvenida {
  color: rgb(255, 246, 246);
  text-shadow: 1px 1px 8px rgb(0, 0, 0);
}

.btn-container{
  margin: 0 auto;
  text-align: center;
  width: 20%;
 }

  .btn_iniciar {
    cursor: pointer;
    display: inline-block;
    padding: 1% 2%; /*ancho, alto*/
    background-color: #11192be5;
    font-size: 30px;
    border-radius: 10px;
    text-decoration: none; /*Elimina el subrayado*/
    color: #fff;
  }

.tarjetas-data {
  margin: 0 auto; /*Margen inferior y superior en 0 e izq y der auto*/
  display: flex;/*Los elementos se ordenaran en una fila en lugar de hacerlo verticalmente*/
  flex-wrap: wrap;
  justify-content: center; /*Centra horizontalmente*/
}

.title-cards {
  cursor: default;
  background-image: linear-gradient(to bottom, #12151bb4,  #0c131bb7);
  width: fit-content;
  border-radius: 10px;
  font-size: 37px;
  font-family: 'Harry Potter', sans-serif;
  color: #000000;
  text-align: center;
  text-shadow: 0px 0px 10px rgb(255, 255, 255);
  margin-top: 10px;
  margin: 0 auto;
  margin-bottom: 10px;
}

.buscador-container {
  text-align: center;
  margin: 0 auto;
}

.buscador {
  cursor: help;
  background-color: #ada4a4;
  border: 3px solid black;
  box-shadow: 2px 2px 10px #000000;
  border-radius: 5px;
  height: 20px;
  width: 150px;
  outline: none; /*Quita el borde que aparece alrededor del input cuando se selcciona*/
  font-size: 15px;
}

.etiqueta-buscador {
  font-family: 'IM Fell English', serif;
  font-size: 25px;
  color: #000000;
  text-shadow: 2px 2px 5px rgb(255, 255, 255);
}

.buscador:hover {
  background-color: #796666;
}

.card {
  cursor: pointer;
  max-width: 200px;
  height: 18em;
  border-radius: 15px;
  perspective: 1000px;/*Permite que se apliquen transformaciones 3d*/
  display: flex;
  flex-direction: column;/*Elementos secundarios se ordenan verticalmente*/
  align-items: center;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;/*Transicion de .8seg para cualquier transformacion*/
  transform-style: preserve-3d;/*Permite que se apliquen transformaciones 3d*/
}

.card:hover .card-inner {/*Seleccionar .card-inner cuando el usuario ponga el mouse sobre card*/
  transform: rotateY(180deg);/*Rotacion en el eje Y(horizontal) de 180 grados a card inner lo que crea el efecto de volteo*/
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;/*Evitan que las caras de la tarjeta sean visibles al rotarla*/
  border: 3px solid rgb(0, 0, 0);
}

.card-front {
  border-radius: 10px;
  overflow: hidden;/*Oculta lo que salga de la tarjeta*/
  display: flex;
  flex-direction: column; /*Los elementos dentro de la card se colocan uno debajo de otro*/
  justify-content: center;/*Centra verticalmente los elementos*/
  font-size: 15px;
  background-image: url("https://i.pinimg.com/474x/4a/00/5f/4a005fd9632d6ca43e574e06b3f54f22.jpg");
  flex: 1;/*Hace que la tarjeta ocupe todo el espacio disponible*/
  text-align: center;
  margin-top: 5px;
}

.card-back {
  object-fit: contain;
  padding: 10px;/*10px entre el borde y el contenido*/
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: rotateY(180deg);/*Aplica una rotacion en el eje Y de 180 grados haciendo que se muestre el lado contrario de la card*/
  font-size: 16px;
  background-image: url("https://i.pinimg.com/474x/4a/00/5f/4a005fd9632d6ca43e574e06b3f54f22.jpg");
  flex: 1;
  text-align: center;
}

.card-back p {
  padding-top: 3px;
  margin-bottom: 0;
  word-wrap: break-word;/*Divide palabras si es necesario*/
  white-space: pre-wrap;/*Permite que se muestren los espacios en blanco dentro de 'p'*/
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  object-fit: contain;
  font-size: 18px;
}

.card-front img {
  display: block; /*Hace que la img se muestre como un bloque y no un elemento en linea*/
  margin: auto;
  margin-top: 10px;
  width: 80%;
  height: 180px;
  object-fit: contain;
}

.card-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.card-container>div {
  margin: 10px;/*Margen alrededor de cada elemento*/
  padding: 10px;
  width: 280px;
}

.spell-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.spell-container>div {
  margin: 10px;
  padding: 10px;
  width: 280px;
}

.funFact-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.funFact-container>div {
  margin: 10px;
  padding: 10px;
  width: 280px;
  font-size: 15px;
}

.book-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  object-fit: contain;
}

.book-container>div {
  margin: 10px;
  padding: 10px;
  width: 280px;
}

.potion-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.potion-container>div {
  margin: 10px;
  padding: 10px;
  width: 280px;
}

.menu {
  height: 70px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.menu_container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.menu_links {
  font-family: 'IM Fell English', serif;
  height: 100%;
  display: flex;
  font-size: 28px;
  z-index: 1;
  box-sizing: border-box;
}

.menu_item {
  list-style: none; /*Elimina los marcadores de lista por defecto*/
  position: relative;
  height: 100%;
  --clip: polygon(0 0, 100% 0, 100% 0, 0 0);/*El poligono es un rectangulo con altura 0 y 100% de ancho por lo que el elemento no es visible*/
  --transform: rotate(-90deg);/*El elemento gira -90grados lo que lo hace invisible*/
  box-sizing: border-box;
}

.menu_item:hover {
  --clip: polygon(0 0, 100% 0, 100% 100%, 0 100%);/*El poligono ya cubre todo el elemento, el menu se muestra*/
  --transform: rotate(0);/*El elemento esta en su orientacion original*/
  box-sizing: border-box;
}

.menu_link {
  background-color: #1c2441;
  border-radius: 10px;
  font-size: 28px;
  text-shadow: 2px 2px 10px #000000;
  width: fit-content;  /*Indica que el ancho del fondo de color se debe adaptar a su contenido */
  color: #9c8d8d;
  text-decoration: none;
  padding: 0 20px;
  margin-right: 10px;
  display: flex;
  height: 100%;
  align-items: center;
  border: 3px solid black;
  box-shadow: 2px 2px 10px #000000;
}

.menu_link:hover, .menu_link:hover .menu_arrow {
  background-color: #4e3819;
}

.menu_in {
  list-style:none;
  transition: clip-path .3s;
  clip-path: var(--clip);
  position:absolute;
  right: 0;
  bottom: 0;
  width: max-content;
  border-radius: 2px;
  transform: translateY(100%);/*Desplaza el elemento hacia abajo*/
}

.menu_arrow {
  transform: var(--transform);/*Rota la flecha*/
  transition: transform .3s;
  display: block; 
  margin-left: 3px;
  background-color: #1c2441;
  box-sizing: border-box;
}

.menu_link--inside {
  padding: 10px 60px 10px 5px;
} 

.menu_link--inside:hover {
  background-color: #4e3819;
}

.menu_hamburger {
  height: 100%;
  display:flex;
  align-items: center;
  padding: 0 15px;
  cursor: pointer;
  display: none; 
}

.menu_img{
  background-color: #303236;
  display: block;
  width: 45px;
  position: absolute;
  top: 20px;
  right: 25px;
  height: auto;
}

@media (max-width: 1500px){
    body {
      background-image: url("https://fondosmil.com/fondo/38514.jpg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed;
      object-fit: contain;
    }

    .hp-img {
      position: relative;
      width: 40%;
      height: 0 auto;
    }

    .bienvenida-container{
      width: 100%;
      font-size: 30px;
    }

    .btn-container {
      text-align: center;
      width: 80%;
    }

    .tarjetas-data{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    .card {
      width: 25%;
    }

    .menu_hamburger{
      display: none;
    }
  }


  @media (max-width: 1100px){
    body {
      background-image: url("https://fondosmil.com/fondo/38514.jpg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed;
      object-fit: contain;
    }

    .hp-img {
      position: relative;
      width: 40%;
      height: 0 auto;
    }

    .mi-grafica{
      background-color: #242323;
      width: 40%;
      flex-wrap: wrap;
    }

    .otra-grafica {
      background-color: #0f0f0ff6;
      width: 40%;
      flex-wrap: wrap;
    }

    .descripción-graficas {
      width: 40%;
      flex-wrap: wrap;
      font-size: 30px;
      margin-right: 5%;
    }

    .bienvenida-container{
      width: 80%;
      font-size: 25px;
    }

    .btn-container {
      text-align: center;
      width: 80%;
    }

    .tarjetas-data{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }

    .card {
      width: 33.33%;
    }

    .menu_hamburger{
      display: none;
    }
  }

  @media (max-width: 950px){
    body {
      background-image: url("https://fondosmil.com/fondo/38514.jpg");
      object-fit: contain;
    } 

    .hp-img {
      position: relative;
      width: 70%;
      height: 0 auto;
    }

    .bienvenida-container{
      width: 100%;
      font-size: 25px;
    }

    .btn-container {
      text-align: center;
      width: 100%;
    }

    .mi-grafica{
      background-color: #242323;
      margin: 1%;
      width: 70%;
      height: 0 auto;
    }

    .otra-grafica {
      background-color: #0f0f0ff6;
      margin: 1%;
      width: 70%;
      height: 0 auto;
    }

    .descripción-graficas {
      background-color: #706969f6;
      width: 70%;
      flex-wrap: wrap;
      font-size: 40px;
      margin-right: 5%;
    }

    .tarjetas-data{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    .card {
      width: 50%;
    }
  }

  @media (max-width:800px){
    body {
      background-image: url("https://fondosmil.com/fondo/15598.jpg");
      object-fit: contain;
    } 

    .title-cards {
      background-image: linear-gradient(to bottom, #637eced7,  #8bafdfb7);
    }

    .mi-grafica{
      background-color: #242323;
      width: 70%;
      flex-wrap: wrap;
    }

    .otra-grafica {
      background-color: #0f0f0ff6;
      width: 70%;
      flex-wrap: wrap;
    }

    .descripción-graficas {
      background-color: #706969f6;
      width: 70%;
      flex-wrap: wrap;
      font-size: 35px;
      margin-right: 5%;
    }

    .menu_hamburger{
      display: flex;
      margin-left: 10px;
    }

    .menu_links{
      position: fixed;
      max-width: 215px;
      top: 70px;
      bottom: 0;
      right: 0;
      background-color: #1a1a1bec;
      border-radius: 10px;
      height: fit-content;
      width: fit-content;
      overflow-y: auto;
      display: grid;
      grid-auto-rows:max-content; 
      transform: translateX(100%); 
    } 

    .menu_link{
      padding: 25px 0;
      padding-left: 30px;
      height: auto;
    }

    .menu_arrow{
      margin-left: auto;
      margin-right: 20px;
    }

    .menu_in{
      display:grid;
      position: unset;
      width: 100%;
      transform: translateY(0);
      height: 0;
      transition: height .3s;
    }

    .menu_link--inside{
      width: 90%;
      margin-left: auto;
      border-left: 1px solid #18243b ;
    } 

    .menu_item{
      --clip:0; 
      overflow: hidden; 
    }
     
    .menu_item--active{ 
      --transform: rotate(0);
      --background: #18243b; 
    }

    .menu_item--show{
      background-color: var(--background);
    }
  
    .menu_links--show{
      transform: unset;
      width: 100%;
    }
  } 

  @media (max-width: 600px){
    body {
      background-image: url("https://fondosmil.com/fondo/15598.jpg");
      object-fit: contain;
    } 

    .hp-img {
      position: relative;
      width: 70%;
      height: 0 auto;
    }

    .bienvenida-container{
      width: 100%;
      font-size: 25px;
    }

    .btn-container {
      text-align: center;
      width: 100%;
    }

    .mi-grafica{
      background-color: #242323;
      margin: 1%;
      width: 90%;
    }

    .otra-grafica {
      background-color: #0f0f0ff6;
      margin: 1%;
      width: 90%;
      height: 0 auto;
    }

    .descripción-graficas {
      background-color: #706969f6;
      width: 90%;
      flex-wrap: wrap;
      font-size: 30px;
      margin-right: 5%;
    }

    .title-cards {
      background-image: linear-gradient(to bottom, #7180acd7,  #8bafdfb7);
    }

    .tarjetas-data{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }

    .card {
      width: 50%;
    }
  }

  @media (max-width: 400px){
    body {
      background-image: url("https://fondosmil.com/fondo/15598.jpg");
      object-fit: contain;
    }

    .hp-img {
      position: relative;
      width: 70%;
      height: 0 auto;
    }

    .bienvenida-container{
      width: 100%;
      font-size: 20px;
      margin-top: 10%;
    }

    .btn-container {
      text-align: center;
      width: 100%;
    }

    .mi-grafica{
      background-color: #242323;
      margin: 1%;
      width: 100%;
      height: 0 auto;
    }

    .otra-grafica {
      background-color: #0f0f0ff6;
      margin: 1%;
      width: 100%;
      height: 0 auto;
    }

    .descripción-graficas {
      background-color: #706969f6;
      width: 100%;
      flex-wrap: wrap;
      font-size: 27px;
      margin-right: 5%;
    }

    .title-cards {
      background-image: linear-gradient(to bottom, #7180acd7,  #8bafdfb7);
    }

    .tarjetas-data{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }

    .card {
      width: 100%;
    }
  }

  @media (max-width: 300px){
    .contenedor-principal {
      width: 100%;
      align-items: center;
      object-fit: contain;
    }

    body {
      background-image: url('https://fondosmil.com/fondo/15598.jpg');
      width: 100%;
      object-fit: cover;
    }

    .hp-img {
      position: relative;
      width: 60%;
      height: 0 auto;
    }

    .bienvenida-container{
      width: 80%;
      font-size: 16px;
      margin-top: 10%;
    }

    .btn-container {
      text-align: center;
      width: 100%;
    }

    .mi-grafica{
      background-color: #242323;
      width: 100%;
      height: 0 auto;
    }

    .otra-grafica {
      background-color: #0f0f0ff6;
      width: 100%;
      height: 0 auto;
    }

    .descripción-graficas {
      background-color: #706969f6;
      width: 100%;
      flex-wrap: wrap;
      font-size: 20px;
    }

    .title-cards {
      background-image: linear-gradient(to bottom, #7180acd7,  #8bafdfb7);
    }

    .tarjetas-data{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }

    .card {
      width: 100%;
    }
  }

  /*Comentario*/