* {
  box-sizing: border-box;
  font-weight: normal;
}

body {
font-family: "vt323", sans-serif;
margin: 0;

  /* color general de los textos */
  color: white;

  /* color de fondo */
  background-color:black;
  min-height: 100dvh;
  

}

/* selector multiple: parrafos e items de listas  */
p,
li {
  /* se evitan "viudas" y "huerfanos" */
  text-wrap: pretty;
}

/* para que "TODAS" las imagenes NO sean
   mayores que las cajas que las contienen
   para evitar "scroll" horizontal */
img {
  /* mediran, como maximo, el tamaño
     del bloque html que las contiene */
  max-width: 100%;
}

/* "TODOS" los vinculos */
a {
  /* no estaran subrayados */
  text-decoration: none;
}

ul
{
  /* elimina bullets, numeros etc. */
  list-style: none;

  /* retira el relleno izquierdo predeterminado */
  padding: 0;
}

.contenedora {

  /* ancho maximo 1040px */
  max-width: 65rem;
  
  /* centrado horizontal (si sobra espacio,
    lo distribuye a izquierda y derecha por igual) */
  margin-inline: auto;

  /* espacio entre el borde del elemento y su contenido
  para que este no quede "pegado" a los bordes */
 
}

/* Estilos de la imagen */
.contenedora img {
  /* Estilos previos */
  max-width: 100%; /* Para que la imagen no sea más grande que su contenedor */
  
}

/*-----------------------------------------------------------
====================================
            Navegador-header 👋≧◉ᴥ◉≦
====================================
------------------------------------------------------------*/
/*-----------------------------------------------header= menu-------------------------------------------------*/

header {
  box-shadow: 0 4px 2px hsl(0 0% 0% / 0.25); /* sombra difusa  */

  /* "pegado" al borde superior de la ventana */
  position: sticky;
  /* distancia 0 del borde */
  top: 0;
  /* capa superior arriba de casi todo */
  z-index: 8000;
  background-color: black;
}

/* caja que "limita" al logo y al menu */
header .contenedora {
  display: flex; /* caja flexible */
  /* si los elementos "hijos" no caben en una fila,
     van a la fila siguiente */
  flex-wrap: wrap;
  
  /* elementos "hijos" separados en la horizontal */
  justify-content: center;
  
  /* elementos "hijos" centrados en la vertical */
  align-items: baseline;
}

header nav ul{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  -ms-flex-direction: column;
}
header nav ul li a{
  font-size: 50px;
  width: 100%;
  height: 100%;
  background-color: orange;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding:0.5em 1.5em;
}

header nav ul li a:hover{
  color: black;
  background-color:rgba(255, 127, 90, 1) ;
  transition: background-color 0.7s ease, color 0.3s ease; /* Transiciones suaves para el cambio de color */
}

/*--------------------------------- menu hamburguesa*--------------------------------*/

.menu-hamburguesa{
padding: .49rem;
width: 3rem;
aspect-ratio: 1;
cursor: pointer;
transition: all 0.3s ease-out;
position: fixed;
top: 1em;
right: 1em;
z-index: 9000;}

/*las tres lineas del menu hamburguesa*/     

.menu-hamburguesa .linea {
 width: 25px;
 height: 3px;
 background-color: rgba(255, 127, 90, 1);;
 margin: 5px;
 transition: all 0.3s ease-out;
 position: relative;
 z-index: 9000;
}


nav ul {
 background-color: orange;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 position: fixed;
 /* emplazamiento,
 estirado en toda la ventana */
 inset: 0;
 /* capa superior, arriba de casi todo */
 z-index: 8000;
 /* escondido "a la derecha" */
 translate: 100%;
 transition: all .6s ease; /* anima cuando "nav" NO tiene la clase "menuVisible" */
}

/*--------------------------- el menu cuando "nav" tiene la clase "menuVisible" -----------------------*/

.menuvisible ul {
background-color:orange ;
opacity: 80%;
transition: all .4s ease; /* anima cuando "nav" tiene la clase "menuVisible" */

/* se muestra */
translate: 0;
margin: 0;
}

main{
width: 100%; /* O el ancho deseado */

}

/*-----------------------------------------------------------
          FIN Navegador-header 👋≧◉ᴥ◉≦
------------------------------------------------------------*/


  /*-----------------------------------------------------------
====================================
            primera sección (columna 1) avatar-exp-etc
====================================
------------------------------------------------------------*/




/*---cambio de tamaño de los números h5 de recompensas, unicamente en la versión móvil----*/
@media (max-width: 450px) {
  footer .redes {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 1em;
  }
  
  footer img {
    width: 20%; /* Ajusta el ancho de las imágenes */
    margin-bottom: 1em; /* Espacio entre las imágenes */
  }
  
  footer h2 {
    font-size: 20px; /* Tamaño de fuente más pequeño */
      text-align: center;
      color:rgba(255, 127, 90, 1) ;
     }
    
  
  
  footer p {
    display: none;
  }
  .boton-integrantes {
  display: flex;
  flex-direction: column;
  align-items: center;

  }

  .boton-integrantes h1 {
    text-align: center;
    padding: 10px;
    color: white;

    border-radius: 10px;
    background: #FF7F5A;
    width: 3.8em;

    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
.usuarios {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;

    justify-items: center;
    gap: 2em;
   
}

.usuarios img {
  Aspect-ratio: 1;
  Object-fit: cover;
 }
/*-----------nombres de usuario y cuadros------------*/

.gatofadu {

  background-color: #FF7F5A;
    border-radius: 10px;
    padding: 14px 1px;
    color: #000;
    text-align: center;
    

}

.mica {
  background-color: #FF7F5A;
  border-radius: 10px;
  padding: 14px 1px;
  color: #000;
  text-align: center;  
 
}

.nico {
  background-color: #FF7F5A;
  border-radius: 10px;
  padding: 14px 1px;
  color: #000;
  text-align: center;
  
}

.fantasma {
  background-color: #FF7F5A;
  border-radius: 10px;
  padding: 14px 1px;
  color: #000;
  text-align: center;

}

/*--------------imagenes y circulos de fondo------------*/
.gatofadu-img {
  border-radius: 100%;
  width: 10rem;
  max-width: 100%;
  background:#FFFD54;  
}

.fantasmaimg {
  border-radius: 100%;
  width: 10rem;
  max-width: 100%;

}

.micaimg {
  border-radius: 100%;
  width: 10rem;
  max-width: 100%;
  background:#E9E774;  
}

.nicoimg {
    border-radius: 100%;
    width: 10rem;
    max-width: 100%;
    background:#E9E774;  
}

/*------------carga y boton pc compu----------*/

.oculto {
  display: none; /*esconde el botón de jugar al principio*/
}




  
}

/*-----------ultima sección el esperando y botón-----------*/
a {
  text-decoration: none; /* Elimina el subrayado */
  color: inherit; /* Usa el color heredado (por defecto) */
}

.cargajugar {
  text-align: center;
  display: flex;
  justify-content: center;

}
.boton-jugar {
        color: black;
        
        background-color:#FFFD54;
        font-size: 30px;
        
        justify-content: center;
        justify-items: center;
        align-items: center;
        border-radius: 0.5rem;

       
        border-radius: 10px;
        padding: 14px 1px;

        width: 10em;

}
/*-------ventana oculta (integrantes COMPU)-----------*/
.opciones-integrantes {
  background-color:#ff7e5a6e;
  width: 5.7em;
  margin-top: -1.3em;
  padding: 0.2em;
  font-weight: normal;

  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;

}

/* Estilo para los enlaces de los integrantes */
.opciones-integrantes ul li {
  color: white; /* Color original */
  text-decoration: none; /* Para quitar el subrayado del enlace */
}

/* Estilo cuando el mouse está sobre los enlaces de los integrantes */
.opciones-integrantes ul li:hover {
  color:#FFFD54 ; /* Cambia a rojo cuando se pasa el mouse por encima */
}



/*-----------------footer celu----------------------*/


 
/*-----------------------------------------------------------
          FIN de main (CELU) 👋≧◉ᴥ◉≦
------------------------------------------------------------*/





/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
===================================================================================================================
                                   @media para ordenadores - (arriba los celus)
===================================================================================================================
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

 /*---------------------------------------@medias para pantallas de ordenadores------------------------*/

 @media(min-width:450px){

  /*------------------------------------------anula el menu hamburguesa--------------------------------------*/

   .menu-hamburguesa{
       display: none;
   }

/*-------------------------------------anula varias opciones del menu vertical--------------------------------*/

   header nav ul {
       /* caja flexible para menu horizontal*/
       display: flex;
     /* para que esté en capa superior pero que no parezca */
       position: relative;
       opacity: 1;
       visibility: visible;
       translate: none;
       transition: none;
     }
 /*-----------------------------------------navegacion, menu y header------------------------------------*/

     .contenedora {
 
       /* ancho maximo 1040px */
       max-width: 65rem;
     
       /* centrado horizontal (si sobra espacio,
         lo distribuye a izquierda y derecha por igual) */
       margin-inline: auto;
     
       /* espacio entre el borde del elemento y su contenido
       para que este no quede "pegado" a los bordes */
       padding: 1rem;
     }
   
     nav {
       flex-grow: 1;
     }
   
   .menu {
       display: flex;
       justify-content: flex-end;
       padding-right: 1rem; }
   
   .menu li {
       margin: 0 1rem; }
   
   .menu a {  
       color:rgba(255, 127, 90, 1);
       transition: transform 0.3s; /* transicion suave para el efecto */
       font-weight: bold;  
     }
   
     
     header nav ul {
       /* elimina los margenes arriba y abajo que vienen predeterminados */
       margin-block: 0;
       display:flex;
       flex-direction: row;
       gap: .25rem;
       flex-wrap: wrap;
       justify-content: flex-end;
       background-color: black;
     }
   
     header nav ul li {
       width: 5em;
       height: 2em;
       margin-left: .30em;
       
       /* agrega espacio vertical entre la lista del menu*/
       margin-right: 10px;
     
      /*separa los contenedores los cuales envuelven a los link, se les dio separacion
      y tamaño adecuado para que quede prolijos*/
     }
   
     header nav {
       border-radius: 1em;
       gap: 1em;
     }
   
     header nav a {
        
       /* para darle propiedades de caja (ancho, por ejemplo) */
       display: block;
       
       /* ancho igual para todos */
       width: 5em;
       
       /* "relleno" arriba y abajo */
       padding-block: 0.25em .5em;
         
       /* se alineo los textos en el centro, horizontal.*/
       text-align: center;
       }
   
       header .contenedora{
           display: flex;
           justify-content: space-between;
           align-items: center;
           flex-wrap: wrap;
           text-align: justify;
         } 
     
     header nav ul li a {
       width: 100%;
       height: 100%;
       background-color: rgb(0, 0, 0);
       color:rgba(255, 127, 90, 1);
       border-color:rgba(255, 127, 90, 1) ;
       text-decoration: none;
       font-weight: bold;
       display: flex;
       justify-content: center;
       align-items: center;
       font-size: 16px;
     }
     
     header nav ul li a:hover{
       color: white;
       background-color: black;
       outline: solid rgba(255, 127, 90, 1);
       transition: background-color 0.7s ease, color 0.3s ease; /* Transiciones suaves para el cambio de color */
     }
       
     header{
         background-color: black;
       }
  
  /*--------------------------------------------Contenido main ORDENADOR-PC--------------------------------------------------------*/

  /*---el botón de número de miembro de equipo----*/

  .boton-integrantes h1 {
    border-radius: 10px;
    background: #FF7F5A;
    width: 3.8em;

    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
   
  }

  .boton-integrantes h1 {
    text-align: center;
    padding: 10px;
    color: white;
  }
.usuarios {
  display: flex;
  justify-content: space-between;

    justify-items: center;
    gap: 2em;
    justify-content: center;
    flex-wrap: wrap;
}

.usuarios img {
 Aspect-ratio: 1;
 Object-fit: cover;
}

h1, h2, h3, h4 {
  line-height: 1;
  text-wrap: balance;
}
/*-----------nombres de usuario y cuadros------------*/

.gatofadu {

  background-color: #FF7F5A;
    border-radius: 10px;
    padding: 14px 1px;
    color: #000;
    text-align: center;
    

}

.mica {
  background-color: #FF7F5A;
  border-radius: 10px;
  padding: 14px 1px;
  color: #000;
  text-align: center;  
 
}

.nico {
  background-color: #FF7F5A;
  border-radius: 10px;
  padding: 14px 1px;
  color: #000;
  text-align: center;
  
}

.fantasma {
  background-color: #FF7F5A;
  border-radius: 10px;
  padding: 14px 1px;
  color: #000;
  text-align: center;

  
}

/*--------------imagenes y circulos de fondo------------*/
.gatofadu-img {
  border-radius: 100%;
  width: 10rem;
  max-width: 100%;
  background:#FFFD54;  
}

.fantasmaimg {
  border-radius: 100%;
  width: 10rem;
  max-width: 100%;

}

.micaimg {
  border-radius: 100%;
  width: 10rem;
  max-width: 100%;
  background:#E9E774;  
}

.nicoimg {
    border-radius: 100%;
    width: 10rem;
    max-width: 100%;
    background:#E9E774;  
}

/*------------carga y boton pc compu----------*/

.oculto {
  display: none; /*esconde el botón de jugar al principio*/
}



/*------------footer pc/compu------------------*/




/*-----------ultima sección el esperando y botón-----------*/
a {
  text-decoration: none; /* Elimina el subrayado */
  color: inherit; /* Usa el color heredado (por defecto) */
}

.cargajugar {
  text-align: center;
  display: flex;
  justify-content: center;
  margin-top: 3em;
  margin-bottom: -1em;
}
.boton-jugar {
        color: black;
        
        background-color:#FFFD54;
        font-size: 30px;
        
        justify-content: center;
        justify-items: center;
        align-items: center;
        border-radius: 0.5rem;

       
        border-radius: 10px;
        padding: 14px 1px;

        width: 10em;

}
/*-------ventana oculta (integrantes COMPU)-----------*/
.opciones-integrantes {
  background-color:#ff7e5a6e;
  width: 5.7em;
  margin-top: -1.3em;
  padding: 0.2em;
  font-weight: normal;

  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;

}

/* Estilo para los enlaces de los integrantes */
.opciones-integrantes ul li {
  color: white; /* Color original */
  text-decoration: none; /* Para quitar el subrayado del enlace */
}

/* Estilo cuando el mouse está sobre los enlaces de los integrantes */
.opciones-integrantes ul li:hover {
  color:#FFFD54 ; /* Cambia a rojo cuando se pasa el mouse por encima */
}


footer{
  background-color: black;

}
footer .redes{
  display: flex;
  text-align: center;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  margin-left: 2em;
  margin-right:2em
}

 footer img{
  width:15%;
 }

 footer h2{
  font-size: 25px;
  text-align: center;
  color:rgba(255, 127, 90, 1) ;
 }

 footer p{
  font-size: 10x;
  text-align: center;
 }

}