* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
}

@font-face {
    font-family: GloriaHalleluja;
    src: url("../fuentes/GloriaHallelujah-Regular.ttf");
}

@font-face {
    font-family: PlaypenSans;
    src: url(../fuentes/PlaypenSans-VariableFont_wght.ttf);
}

@font-face {
    font-family: bubblegum;
    src: url(../fuentes/Bubblegum.ttf);
}

@font-face {
    font-family: Letters for Learners;
    src: url(../fuentes/Letters\ for\ Learners.ttf);
}

body {
    background-color: hsl(186, 64%, 73%);
    font-family: 'Noto Sans Display', sans-serif;
    }
      
h1{ 
    margin-block-end: 1em;
    font-family: "letters for learners";
    text-align: center;
}

h2,
h3,
h4,
h5,
h6
{
    margin-block-end: 1em;
    font-family: "letters for learners";
    text-align: center;

    }
      
p {
    font-family: "letters for learners";
    font-size: 1.3em;
    font-weight: 500;
    letter-spacing: 0.1em;
    margin-block-end: 1em;
    text-align: left;
    
}

a {
        text-decoration: none;
    }
      
ul,
ol, 
li {
    list-style: none; 
    font-family: "letters for learners";  
    }

img {
    max-width: 100%;
        height: auto;
    }
      

.titulo {
    letter-spacing: 0.08em;
    font-weight: 500;
}    
.instrucciones ul {
    font-size: 1.2em;
}


    
.contenedora {
        margin-inline: auto;
        padding: 1em;
      }
      
figcaption {
    font-family: "letters for learners";
}

header,
footer {
        background-color: hsl(276, 84%, 64%);
        color: rgb(255, 255, 255);
      }

.comenzar {
    color: #ffffff;
    background-color: #27c919;
    width: 50%;
    height: auto;
    margin: auto;
    margin-top: 2em;
    margin-bottom: 2em;
    border-radius: 1.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: .9em;
    font-weight: bold;
    box-shadow: 3px 3px 10px;
    padding:20px 40px;
    border-top: 5px;
    color: #10022a;
    list-style: none;
    letter-spacing: 0.1em;
    font-family: "letters for learners";
    text-align: center;
}

.comenzar a{
    color: #ffffff;
}
.comenzar a:hover {
    color: #170b44;
}

footer{
    background-color: hsl(276, 84%, 64%);
    padding: 1.5em;
    list-style: none;
    display: flex;
    align-items:flex-end;
    align-content: flex-end;
    justify-content: space-around;   
    width: 100%;
}

footer img {
    width: 30%;
}

footer, p h4 h3{
    color:#ffffff;
}
.itema h3{
    text-align: left;
}

footer p {
    font-size: 1em;
}

.itema {
    padding-right: 1em;
}
.itemc{
    padding-left: 1em;
    padding: .5em;
}
a{
    color:white
}

/*HEADER*/
header {
    box-shadow: 0 4px 2px hsl(0 0% 0% / 0.25); 
    position: sticky;
    top: 0;
    z-index: 8000;
}
 header .contenedora{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
 }

 #logo {
    display:flex;
    align-items: center;
    position: relative;
    z-index:9999;
 }

 #logo img{
    width:4em;
    margin: 1em;
 }

 #logo h3{
        font-family: "letters for learners";
        font-size: 1.2em;
        font-weight: 400;
        line-height: 1em;
        margin: 0;
 }

 #logo h3 span {
    display: block;
    letter-spacing: .15em;
  }



/*MENU*/
.menu-btn {
    background: hsl(276, 81%, 69%);
    border-radius: 50%;
    box-shadow: -5px 5px 5px hsl(180 100% 4% / 0.2);
    padding: .75rem;
    width: 3rem;
    aspect-ratio: 1;
    cursor: pointer;
    transition: all 0.3s ease-out; 
    position: fixed;
    top: 1em;
    right: 1em;
    z-index: 9000;
    
  }

  .menu-btn .btn-linea {
    width: 25px;
    height: 3px;
    margin: 4px 0 4px 0;
    background: hsl(0 0% 90%);
    transition: all 0.3s ease-out;
    position: relative;
    z-index: 9000;
  }
  
  .menuVisible .menu-btn .btn-linea {
    transform: rotate(180deg);
  }

  .menuVisible .menu-btn .btn-linea:nth-child(1) {
    transform: rotate(45deg) translate(4px, 6px);
  }
  .menuVisible .menu-btn .btn-linea:nth-child(2) {
    opacity: 0;
  }
  .menuVisible .menu-btn .btn-linea:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -6px);
  }
  
  @media(min-width: 40em) {

    .form-grupo {
        width: 50%;
    }

    #contenedor_fotos {
        width: 50%;
        margin: auto;
    }
     
    .contenedor_puntaje {
        width: 60%;
        margin: auto;
        text-align: center;
    }

    #question {
        width: 60%;
    }

    #options {
        width: 60%; 
        margin: auto;
    }

    .hacetupregunta {
        width: 60%;
        margin: auto;
        padding: 2em;
    }

    .itema img {
        width: 10%;
        margin-bottom: 1em;
    }

    .inicio{
        margin-left: 5em;
        margin-right: 5em;
    }
    .soynico {
        display: flex;
        justify-content: center;
    }

    .nicoperfil figure {
        padding: 1em;
        width: 20%;
        margin: auto;
    }

    .nico1{
        width: 40%;
    }

    .nube {
        width: 30%; 
    }

    .main {
        margin-left: 1em;
        margin-right: 1em; 
    }

    .puente p{
        padding: 1em;
    }
    .informacion {
        margin-top: 2em;
    }

    .info1 {
        display: flex;
        align-items: center;
        justify-content: center;
        align-content: center;
        padding-bottom: 2em;
        margin-left: 5em;
        margin-right: 5em;
    }

    .info1 p{
     margin-right: 1em;
     padding-right: 1em;
     width: 50%;
        
    }

    .info1 figure {
        width: 40%;
        justify-content: center;
        align-items: center;

    }

    .info2 {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: center;
        margin-left: 5em;
        margin-right: 5em;
    }

    .info2 p{
        width: 40%;
        margin-left: 1em; 
        padding-left: 1em;
    }

    .info2 figure {
        width: 50%; 
        justify-content: center;

    }

    .nicoinfo {
        margin: auto;
        text-align: center;
        align-items: center;
    }

    .sabiasque {
        margin: 2em;
    }


    .comenzar {
        width: 20%;
    }


    .instrucciones {
        display: flex;
        margin-left: 5em;
        margin-right: 5em;
    }

    .video {
        width: 100%;
        margin: auto;
    }

    .insigniasperfil  {
        width: 50%;
        text-align: center;
        margin: auto;
        font-size: 1.5em; 
        font-weight: bold;
        display: flex;
        flex-direction: column;
    }


    .comojugar {
        width: 80%;
        font-size: 1.5em;
        align-items: center;
        margin-top: .4em;
        padding: 1em;
    }

    .unidades {
        display: flex;
        justify-content: space-evenly;
        gap: 1em;
        margin-left: 5em;
        margin-right: 5em;
        margin-top: 2em; 
        margin-bottom: 2em; 
    }

    .unidades figure {
        align-items: center;
        align-self: center;
    }

    .unidad1 {
        display: flex;
        flex-direction: column;
        width: 30%;
    }

    .unidad2 {
        display: flex;
        flex-direction: column;
        width: 30%;
    }

    .unidad3 {
        display: flex;
        flex-direction: column;
        width: 30%;
    }

    .geosoc {
        align-items: flex-end;
        align-self: end;
        width: 55%;
    }
    
    .imagenes {
        width: 50%; 
        margin: auto;
        
    }

    /* el menú deja de ser fijo */
    header nav {
      /* para que esté en capa superior pero que no parezca */
      position: relative;
    }
      
    /* botón "hamburguesa" oculto */
    .menu-btn {
      display: none;
    }
  
    /* menu visible */
    header nav ul,
    header .menuVisible ul {
      /* caja flexible para menu horizontal*/
      display: flex;
      /* separación entre sus elementos */
      gap: .25em;
  
      /* para que esté en capa superior pero que no parezca */
      position: relative;
  
      /* elimina desplazamiento */
      translate: 0;
  
      /* elimina fondo */
      background-color: unset;
      flex-wrap: wrap;
      justify-content: space-between;
    }
      
    /* items de lista  que contienen los vínculos del menu */
    header nav ul li {
      min-width: 4em; /* que no midan menos de: */
    }
  
    /* vínculos del menu principal */
    header nav ul li a {
      background-color:hsl(276, 84%, 64%);
      border-radius: .25em ;
      color: white;
      font-size: 1.3em;
      width: auto;
      padding: .25em 1em;
      text-align: center;
      display: block; /* para que sean "cajas" */
      margin-block-end: unset;
      border-block-end: unset;
      box-shadow: 0 2px 1px hsl(0 0% 0% / 0.25); 
      position: sticky;
      top: 0;
      z-index: 8000;
    }
    
    /* cuando el cursor se posiciona sobre los vínculos */
    header nav ul li a:hover {
      background-color: white;
      color: hsl(186, 64%, 73%);
      border-block-end: unset;
    }

    footer img {
        display: block;
        width: 20%; 
             
    
    }

    footer p {
        font-size: 1em;
        width: 50%;

    }

    .itemc {
        justify-content: center;
        margin:auto;
        align-items: center;
        align-content: center;
        font-size: 1.5em;
    }
    .itemc h4 {
        text-align: left;
    }

    .insignias{
        width: 50%;
        margin: auto;
        gap: 1em;
        margin-left: 1em;
    }

    .porcentaje{
        width: 50%;
    }
    .descripcion{
        background-color: #fffefc;
        color: rgb(0, 0, 0);
        width: 50%;
        height: auto;
        justify-content: center;
        border-radius: 10px;
        display: flex;
    }    
    .porcentaje {
        width: 15%;
        text-align: center;
        margin: auto;
        font-size: 1.5em;
    }
    .nicoperfil figure{
        width: 60%;
        margin: auto;

    }
    .matias{
        font-size:4em ;
    }

    .proceso figure{
        width: 90%;
        margin: auto;
        display: flex;
        
    }
    
    .proceso{
        margin-right: 7em;
    }
       
    .insignias1{
        width: 100%;
        text-align: center;
        margin: auto;
        font-size: 1.5em;
    }

    .insignias1 figcaption{
        text-align: center;

    }
    .insigniasperfil {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        justify-content:space-between;
        margin-right: 1em;
        
    }
    .insigniasperfil h1{
        font-size: 1.3em;
        margin-top: 1em;
    }
    .insignias2 {
        display: flex;
        width: 20%;
        margin-right: 11em;
    }

    .insignias2 figure{
        padding: 1em;
        
    }

    .insignias2  img{
    width: 100%;
    }

    .puntaje{
        margin-left: 1.5em;
        margin-right: 1.5em;
    }

    .puntajeperfil{
        display: flex;
    }

    .nicoeinsignias{
        display: flex;
        padding-bottom:4em;
    }

    .lologramostodo{
        margin-left: 5em;
        margin-right: 5em;
    }

    .descargar{
        display: flex;
        flex-direction: column;
    }

    .descargar img{
        width: 80%;
        margin: auto;
    
    }

    .descargar p{
        width:80%;
        text-align: center;
        margin: auto;
    }

    .insigniaslologramos figcaption{
        font-size: 1.5em;
        
    }

    .main {
        margin-left: 5em;
        margin-right: 5em;
    }

    .profe figure {
        width: 40%;
        margin: auto;
    }

    .unidadsoc img {
        width: 40%;
    }

    .unidadnat img {
        width: 40%;
    }
}



/*fin @media */ 

  nav ul {
    background-color: hsla(172, 67%, 49%, 0.95);
    display: grid;
    place-items: center;
    place-content: center;
    position: fixed;
    inset: 0;
    z-index: 8000;
    translate: 100%;
    transition: all .6s ease; 
  }
  .menuVisible ul {
    background-color: hsl(276, 84%, 64%);
    transition: all .4s ease; 
    translate: 0;
  }
  
  nav ul li a {
    border-bottom: solid 3px hsl(0 0% 100% / 0.1);
    color: white;
    display: block;
    font-size: 1.5rem;
    margin-block-end: .5rem;
    width: min(70vw, 20rem); 
    text-align: center;
    
    padding: .5rem;
    text-decoration: none;
  }
  
  nav ul li a:hover {
    border-bottom: solid 3px hsl(0 0% 100% / 0.5);
    transition: all .3s;
  }



/*MAIN*/
main{
    margin:.5em;
    padding:.5em;
    align-items: center;
    text-align: left;
}



.instrucciones {
    text-align: left;
    margin-top: 2em;
    padding-bottom: 2em;
    font-family: "letters for learners";
    padding: .6em;
    
}
.instrucciones p{
    margin-top: 2em;
    font-weight: bold;
}

.instrucciones li {
    padding: .5em;
}

iframe{
    width:100vm;
    aspect-ratio: 16/9;
}

.soynico{
    padding: 1em;
    text-align: center;
}

.soynico img{
    width: 90%;
    padding: 1em;
    width: 100%;
    margin: auto;
}

.nicoperfil {
    padding: 1em;
    text-align: center;
}

.nicoperfil img{
    padding: 1em;
    width: 100%;
    margin: auto;
}


.nico img {
    padding: 1em;
    padding-top: 2.5em;
    width: 100%;
    
}

.nico {
    background-color: #48CFAE;
    border-radius: 60%;
    aspect-ratio: 1;
    width: 60%;
    margin: auto;
    margin-bottom: 2em;
}

.nico1 img {
    padding: 1em;
    width: 100%;
    margin: auto;
    
}

.aprende {
    margin-top: 2em;
    color:#27c919 ;
    font-size: x-large;
}

.puente {
    margin-top: 3em;
    padding: .5em;
    align-items: center;
    background-color:  hsl(276, 84%, 64%);
    color: white;
}

.puente p {
    text-align: center;
}

video {
   width: 100%;
    height: auto;
    padding-top: 3em ;
}

.unidades h3 {
    font-size: 1.4em;
    font-weight: 700;
}


.unidad1 {
    background-color:#FFBC73;
    width: 100%;
    height: 20%;
    margin: auto;
    border-radius: 1em;
    margin-top: 1em;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-weight: bold;

}


.u1 {
    padding: 1em;
   
}

.unidad2 {
    height: 20%;
    background-color: #EFA2D6;
    width: 100%;
    margin:auto;
    border-radius: 1em;
    margin-top: 1em;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.geosocnat {
    align-items: flex-end;
    align-self: end;
    width: 60%;
  }

.geosoc {
    align-items: flex-end;
    align-self: end;
    width: 60%;
}

.u2 {
    padding: 1em;
}

.unidad3 {
    height: 20%;
    background-color:#27c919;
    width: 100%;
    margin: auto;
    border-radius: 1em;
    margin-top: 1em;
    display: flex;
    justify-content: space-around;
    align-items: center;
}



.flecha {
    width: 8%; 
    margin: .5em;
    align-items: center;
    justify-content: center;

}

.u3 {
    padding: 1em;
}

.explorar {
    background-color: hsla(0, 0%, 100%, 0);
    border: 4px solid hsl(198 100% 43%);
    border-radius: 50%;
    box-shadow: 0 .15em .1em hsla(0 0% 0% / 0.215);
    color: white;
    cursor: pointer;
    font-size: 1.75em;
    font-weight: bold;
    width: 4rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    
    /* para salir del "flujo de información" del fondo 
    y colocase en una capa superior fija */
    position: fixed;
    /* emplazamiento a 1 r-renglón del borde inferior */
    bottom: 1rem;
  /* emplazamiento a 1 r-renglón del borde derecho */
    right: 1rem;
    /* capa superior, encima de casi todo */
    z-index: 9000;
}  


/*TODO LO QUE PERTENECE A REGISTRATE*/


.sonido{
    width:3em;
    height: auto;
    align-items: center;
    display: flex;
    flex-direction:column;
    list-style: none;
}

.sonido img{
    width: 2em;
    margin: .2em;
}

#vent img {
    width:3em;
    height: auto;
    align-items: center;
    display: flex;
    flex-direction:column;
    list-style: none;
}
#vent{
    background: rgb(79, 168, 223);
    width: 50%;
    height: auto;
    font-size: 1.1em;
    text-align: left;
    padding: 2em;
    border-radius: 1em;
    position:fixed;
    bottom: 4.8em;
    opacity: .9;
    display: none;
    right: 5%;
}

#vent p{
    color: white;
}
#vent ul li{
    color: white;
}

#cerrar {
    position: absolute;
    right: 3px;
    top: 3px;  
    cursor: pointer;
}

.form-grupo{
width: 70%;
background-color:#27c919;
margin: auto;
margin-top: 1em;
box-shadow: 10px 1px px;
padding: 2em;
border-top: 5px;
color: #10022a;
border-radius: 20px;
} 

.form-grupo h2{
    color: #ffffff;
}

.hacetupregunta h5 {
    margin-bottom: 1em;  
}

.controls{
    width: 100%;
    margin-bottom:15px;
   padding: 14px 16px;
   border-radius: 20px;
   font-size: 14px;
   font-weight: bold;
   box-shadow: 1px 1px .05px;
}


/*TODO LO QUE PERTENECE A INFORMACION*/



.unidadsoc{
    display: flex;
    background-color: #EFA2D6 ;
    border-radius: 1em;
    align-items: center;
    text-align: center;
}

.unidadnombre {
    margin-top: 1em;
    padding: 1em;
    align-items: center;
}

.unidadsoc figure{
    align-items: flex-end;
    align-self: end;
    width: 100%;
}

.unidadnat{
    display: flex;
    background-color: #27c919 ;
    border-radius: 1em;
    align-items: center;
    text-align: center;
}


.unidadnat figure{
    align-items: flex-end;
    align-self: end;
    width: 100%;
}

.puntaje {
    list-style: none;
    display: flex;
    justify-content: space-between;
    
}  


.sabiasque h1 {
    color: hsl(276, 84%, 64%);
    margin: 1em;
}

.sabiasque img {
    margin: auto;
}

.nicoinfo{
    width:50%;
    align-items: center;
    margin: auto;
}

.informacion img {
    width: 100%;
    align-items: center;
}

.informacion {
    padding-top: 4em;
}

.informacion p{
    padding-top: .5em;
    padding-bottom: .5em;
}


.porcentaje {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 1em;
}

.porcentaje p {
    font-size: .8em;
    text-align: center;
}

.porcentaje img {
    width: 75%;
    height: auto;
}

.insignias {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1em;
}

.insignias img {
    width: 20%;
    height: auto;
    
}
.insignias1 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.insignias1 img {
    width: 100%;
    height: auto;

}

.proceso {
    margin-top: 2em
}

.proceso img{
    width: 100%;
    height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
/*TODO LO QUE PERTENECE A PREGUNTA*/

.progreso {
    align-items: center;
    width: 15%;
    position:fixed;
    font-size: .9em;
    background-color: #9c78f160;
    border-radius: 1em;
}


.respuestas {
    display: flex;
    margin: 1em;
}



.pregunta1 {
    width: 100%;
    height: 6em;
    background-color:#ffffff;
    font-size: 1.5em;
    font-weight: bold;
    margin: auto;
    margin-top: 10px;
    padding:1.1em;
    border-top: 5px;
    color:  hsl(276, 84%, 64%);
    list-style: none;
}

.verdadero {
    background-color:#ffffff;
    width: 40%;
    height: 4em;
    font-size: .9em;
    font-weight: bold;
    margin: 1em;
    padding:1.5em;
    border-top: 5px;
}

.verdadero li a {
    color: hsl(276, 84%, 64%);
}

.falso {
    background-color:rgb(255, 255, 255);
    width: 40%;
    height: 4em;
    font-size: .9em;
    font-weight: bold;
    margin: 1em;
    padding:1.5em;
    border-top: 5px;
}

.falso li a {
    color: hsl(276, 84%, 64%);
}

/*TODO LO QUE PERTENECE A CORRECTO o INCORRECTO*/

.siguientepregunta {
    width: 40%;
    height: 4em;
    background-color:#ff0000;
    font-size: .9em;
    font-weight: bold;
    border-radius: 20px;
    margin: 1em;
    box-shadow: 7px 13px 37px;
    padding: 1.5em;
    border-top: 5px;
    color: #10022a;
    letter-spacing: 0.2em;
}

.siguientepregunta p {
    color: #ffffff;
    text-align: center;
}

.siguientepregunta a{
    color: #ffffff;
    text-align: center;
}

.botones {
    display: flex;
    justify-content: space-between;
    margin: .5em;
}

.volver {
    width: 40%;
    height: 4em;
    background-color:#ff0000;
    font-size: .9em;
    font-weight: bold;
    border-radius: 20px;
    margin: 1em;
    box-shadow: 7px 13px 37px;
    padding:1.5em;
    border-top: 5px;
    color: #10022a;
 }

.volver li a{
    color: #ffffff;
}

.muybien {
    margin: auto;
    color:#040404;
}

.muybien h1 {
    color: hsl(276, 84%, 64%);
    font-size: 3em;
}

.muybien img {
    width: 100%;
}




/* TODO LO QUE PERTENECE A SIGUIENTE NIVEL*/

.siguientenivel {
    color: #ffffff;
    background-color: rgb(233, 127, 28);
    width: 50%;
    height: 4em;
    margin: auto;
    margin-bottom: 1em;
    padding: 1.4em;
    border-radius: 1.5em;
    font-size: .9em;
    font-weight: bold;
    box-shadow: 7px 13px 37px;
    border-top: 5px;
    color: #10022a;
    list-style: none;
    letter-spacing: 0.19em;
}

.siguientenivel a{
    color: #ffffff;
    text-align: center;
}

.siguientenivel a:hover {
    color:#7bf88c;
}

.imagenes {
    display: flex;
    align-items: center;
}

.imagenes img {
    width: 50%;
    padding: .5em;
}


/* TODO LO QUE PERTENECE A FELICITACIONES*/

.insigniasfin {
    display: flex;
    align-items: center;
}

.insigniasfin img {
    width: 33%;
    padding: .5em;
}

.descargar {
   
    width: 80%;
    margin: auto;
    text-align: center;
    color: #fbfcfa;
    font-family: "letters for learners";
    
   
}

.descargar p{
    background-color: hsl(276, 84%, 64%) ;
    text-align: center;
    font-size: medium;
    padding: .5em;
    font-weight: 500;
}

.logramos {
    color: #27c919;
    margin: 1em;
    text-align: center;
    font-size: 2.9em;
}

.insigniaslologramos{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    margin:auto;
    padding-bottom: 3em;
    }

/*TODO LO QUE PERTENECE A PROFEPUNTAJE*/


.conocenos{
   font-size: 1.4em;
   border: 1em;
    width: 50%;
    border-radius: 0%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-content: space-around;
    justify-content: center;

}

.profe {
    width: 40%;
    margin: auto;
    font-size: 1.5em;
}


.profepuntaje p {
    font-weight: 600;

    text-align: center;
}

.puntajealumnos{
    display: flex;
    padding: .7em;
    background-color: #efec42;
    border-radius: .8em;
    justify-content: space-around;
}

.alumnosconectados{
    padding:1em;
}

.score{
    padding:1em

}

.puntajealumnos ul, h3{
    font-size: 1.5em;
}



/*TODO LO QUE PERTENECE A INFO*/

.infogeneral{
    margin: .5em;
    padding: 1em;
    text-align: left;
}
.preguntasfrecuentes{
    padding: 2em;
    font-size: 1.2em;
}
.pregun{
    margin-top: 1em;
    text-align: left;
    font-size: 1em;
    background-color:#FFBC73;
    border-radius: 1em;
    padding: .7em;
} 
.resp{
    margin: .2em;
    padding: .2em;
    text-align: left;
    font-size: 1em;
}

.hacetupregunta{
    padding: 1.5em;
    font-size: 1.2em;
    background-color:#FFBC73;
    border-radius: 1em;
} 


/*TODO LO QUE PERTENECE A LA TRIVIA*/

.question {
    width: 100%;
    height: 3.5em;
    background-color:#ffffff;
    font-family: "letters for learners";
    font-size: 1.6em;
    font-weight: bold;
    text-align: center;
    margin: auto;
    margin-top: 10px;
    padding: 1em;
    padding-bottom: 3.5em;
    border-top: 5px;
    color:  hsl(276, 84%, 64%);
    list-style: none;
    border-radius: .4em;
}

.options {
    display: flex;
    flex-direction: column;
    margin: .8em;

  }

  button {
    margin: .4rem;
    padding: 10px;
    border: none;
    cursor: pointer;
    font-family: var(--texto);
    font-weight: 700;
    color:#27c919;
    background-color:#ffffff;
    border-radius: 100px;
    font-size: 1em;
  }

  button:hover{
    background-color:#dde0dc;
  }

  #score{
    font-family: "letters for learners";
    font-weight: 500;
    font-size: 1.3em;
    color: var(--verdetexto);
  }

  #score span{
    font-family: "letters for learners";
    color: var(--verdetexto);
    font-size: 1.3em;

  }

  #questionCount{
    font-family: "letters for learners";
    font-size: 1.3em;
  }

  /* Agregar estilo para opciones incorrectas */
  button.incorrect {
    background-color: red; /* Color de fondo para opciones incorrectas */
  }
  
  /* Agregar estilo para la respuesta correcta */
  button.correct {
    background-color: green; /* Color de fondo para la respuesta correcta */
  }
  
  #contenedor_fotos{
    display: flex;
    justify-content: center;
  }

  .contenedor_puntaje{
    display: flex;
    justify-content: space-between;
    margin: auto;
    margin-bottom: 1em;
    padding: .5em;
    align-items: baseline;
    background-color: #28c91994;
    border-radius: 1em;

  }

  /*TODO LO QUE PERTENECE A UNIDAD2*/

  


   /*TODO LO QUE PERTENECE A MI PERFIL*/
 
.nicoperfil {
   width: 50%;
   text-align: center;
   padding: 1em;
   margin: auto;
}

.nicoperfil h1{
    font-size: 2em;
}
.insignias2{
    display: flex;

}
.insignias2 figcaption{
text-align: center;
font-weight: 800;

}
.descripcion{
    background-color: #fffefc;
    color: rgb(0, 0, 0);
    width: 100%;
    height: auto;
    justify-content: center;
    border-radius: 20px;
    display: flex;
  
   
}
.descripcion h1{
    font-size: 1em;

}

.descripcion p{
    width: 100%;
    justify-content: center;
    margin: 1em;
    font-size: 1.3em;
    
}