:root{
   --fuente_contenido:20px;
   --color_ppal:coral
}

body{
   background-color: rgb(247, 239, 228);
}

header{
   display: flex;
}

.volver{
   display: flex;
   justify-content: center;
   align-items: center;
   /* background-color: coral; */
  background-color:var(--color_ppal);
   width: 50px;
   height: 50px;
   border-radius: 50%;
   color: aliceblue;
   cursor: pointer;
   padding: 5px;
   transition: 0.5s;
}

.volver:hover{
   width: 60px;
   height: 60px;
   font-size: var(--fuente_contenido);
}

.volver a{
   color: aliceblue;
}


 .titulo_IIItrim{
   background-color: rgb(248, 245, 240);
   width: 60%;
   margin: auto;
   border: solid var(--color_ppal);
   border-radius: 20px;
   text-align: center;
   
 }

 h1{
  width: 80%;
  margin: auto;
   height: 50px;
   line-height: 50px;
margin-top: 10px;
border-radius: 15px;
   background-color: blue;
   color: white;
   text-align: center;
   margin-bottom: 20px;
 }

 .tit_analis_10{
   background-color: rgb(127, 206, 255);
   padding: 15px;
   transition: 1s;
 }

 .tit_analis_10:hover{
   background-color: rgb(49, 224, 166);
   padding: 10px;
   border-radius: 50%;
 }




 .grado_10{
   width: 40%;
   margin: auto;
   background-color: var(--color_ppal);
   margin-bottom: 10px;
   transition: 0.8s;

 }

 .grado_10:hover{
   width: 90%;
   margin: auto;
   background-color: rgb(26, 11, 238);
   margin-bottom: 10px;
   border-radius: 20px;
   color: aliceblue;
   padding: 15px 0;

 }

.fecha{
   background-color: var(--color_ppal);
padding: 15px;
font-size: var(--fuente_contenido);
margin: 20px;
width: 30%;
border-radius: 0 25px 25px 0;
animation: fecha;
animation-duration: 4s;
}

 .plan_area{
   background-color: darkturquoise;
   width: 80%;
   margin: auto;
   border-radius: 30px;
   text-align: center;
   padding: 20px;
   font-size: 25px;
 }


 .titulos{
   background-color: rgb(146, 231, 146);
width: 30%;
border-radius: 10px;
font-size: 18px;
text-align: justify;
padding: 5px;
 }

 .contenido1{
   font-size:var(--fuente_contenido);
   background-color: rgb(240, 222, 176);
   width: 70%;
   margin: auto;
   padding: 20px;
   text-align: justify;
   border-radius: 0 25px 25px 0;
   transition: 0.51s;
 }
 .contenido1:hover{
width: 80%;
font-size: 25px;
 }

 .normas_prog{
  margin: 15px 0;
 }
.normas{
  width: 100%;
  
}

.final_tema{
  background-color: var(--color_ppal);
  display: flex;
  justify-content: space-between;
  padding: 5px;
  margin: 15px 0;
}



.enlaces{
  display: grid;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 25px;
  width: 50%;
  height: 150px;
  margin: auto;
  border: solid;
  /* background-color: aquamarine; */
  grid-template: 
  "paginas paginas paginas"40px
  "pag_1 pag_2 pag_3" 30px
  "logo emoji emoji2" 30px/
200px 200px 200px
  
  ;
}

.paginas_enlace{
  background-color: chartreuse;
  grid-area: paginas;
  text-align: center;
}


.enlace_1 {
  grid-area: logo;
  font-size: 40px;
  text-align: center;
  background-color: burlywood;
}
.enlace_2 {
  grid-area: emoji;
  font-size: 40px;
  background-color: burlywood;
  text-align: center;

}
.enlace_3 {
  grid-area: emoji2;
  font-size: 40px;
  background-color: burlywood;
  text-align: center;

}

.pag_1{
  grid-area: pag_1;
  text-align: center;
}
.pag_2{
  grid-area: pag_2;
  text-align: center;

}
.pag_3{
  grid-area: pag_3;
  text-align: center;

}

.manual{
  width: 80%;
  margin: auto;
  border: solid;
  padding: 15px;
  text-align: justify;
  margin-bottom: 20px;
}


.consulta{
  width: 70%;
  margin: auto;
  background-color: rgb(150, 227, 227);
  padding: 10px;
  margin-top: 20px;
 border: solid 1px red;
 text-align: justify;
 margin-bottom: 15px;
}

.exposicion{
  background-color: rgb(211, 195, 225);
  width: 60%;
  margin: auto;
  padding: 50px;
  border-radius: 20px;
  border: solid 3px aqua;
}

.btn-subir {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #007bff;
    color: white;
    padding: 12px 20px;
    border-radius: 50%;
    text-decoration: none;
    /*displa: none;  Oculto por defecto */
    z-index: 9999;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    cursor: pointer;
}

.btn-subir:hover {
    background-color: coral;
}










 /* ****************************
    MEDIA QUERY'S
    ****************************
     */

 @keyframes fecha{
   0%{
      background-color: blue;
      width: 95%;
      border-radius: 0 25px 25px 0;
   }

    50%{
      background-color: blue;
      width: 50%;
      border-radius: 0 25px 25px 0;
   }

 100%{
      background-color: blue;
      /* width: 95%; */
      border-radius: 0 25px 25px 0;
   }

 }

 @media(max-width:480px){

 .titulos{
   
font-size: 15px;
text-align: justify;
padding: 10px;
 }

 .normas{
  width: 100%;
 }
  
 
 }