:root{
   --fuente_contenido:20px;
   --color_ppal:coral;
   --fuente_sub:20px;
   --color_sub:rgb(215, 215, 240);
   --width_sub:30%;
   --fondo:blue;
}

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;
 }

 .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;

 }

 .bienvenidos{
  display: grid;
  grid-template-columns: 70% 30%;
  
  align-items: center;
 }

.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%;
  
}

.basico_html{
  background-color: rgba(145, 186, 235, 0.5);
  width: 60%;
  margin: auto;
  padding: 10px;
}

.titulo_htm{
  font-size: 30px;
  text-align: center;
  background-color: blue;
  color: aliceblue;

}

.contenido_htm{
  display: grid;
  grid-template-columns: 90%;
  justify-content: center;
  text-align: justify;

}

.subtitulos{
  font-size: var(--fuente_sub);
  color: var(--color_sub);
  background-color: var(--fondo);
  width: var(--width_sub);
  padding: 0 10px;
}

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

article{
  width: 80%;
  padding: 25px;
  background-color: azure;
  margin: auto;
  border: solid 1px black;
}

 /* ****************************
    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%;
 }

 .basico_html{
  background-color: rgba(145, 186, 235, 0.5);
  width: 90%;
  margin: auto;
  padding: 10px;
} 

.fecha{
  width: 50%;
  height: 50px;
}

.bienvenidos{
  width: 90%;
  font-size: 6px;
}
 
 }