
<style type="text/css">

                

               @font-face {

                        font-family: 'Comfortaa-VariableFont_wght';

                        src: url('/fuente/Comfortaa/Comfortaa-VariableFont_wght.ttf');

                        font-style: normal;

                        font-weight: normal;

                    }

               

                * {

                    margin: 0;

                    padding: 0;

                     font-family: 'Comfortaa-VariableFont_wght';



             

                }

            #menu { background-color: white;

                    color: rgb(0,0,55); 

                    border-bottom: 1px solid rgb(0,0,55);

                    position:fixed;

                    width: 100vw;

                    height: 10vh;

                    display:grid;

                                         /* grid-template-columns: 20% 30% 10% 30% 10%;*/ 
                    grid-template-columns:50% 50%; 

                    align-items: center;

                    justify-items: center;                

                }



                #menu>a{

                        color: rgb(0,0,55);

                        text-decoration: none;

                        background-image: linear-gradient(rgb(0, 0, 55), rgb(0, 0, 55)),

                        linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)),

                        linear-gradient(rgb(255,255,255), rgb(255,255,255));

                        background-size: 20px 2px, 100% 2px, 0 2px;

                        background-position: calc(20px * -1) 100%, 100% 100%, 0 100%;

                        background-repeat: no-repeat;

                        transition: background-size 2s linear, background-position 2s linear;

                }

            

                #menu>a:hover{

                        background-size: 20px 2px, 0 2px, 100% 2px;

                        background-position: calc(100% + 20px) 100%, 100% 100%, 0 100%;;

             }



            #info { background-color: rgb(250,250,250); 

                    width: 100vw;

                    height: 150vh;

		    padding-top: 15vh;

		    padding-bottom:5vh;

	            display:grid;

                    grid-template-columns: 13% 74% 13% ;

                }





                #info >#con{

                      background-color: white;

                      padding-top:5%;

                      padding-left:5%;

                      padding-right:5%;

		      border-radius: 25px;

                      box-shadow: 0px 0px 10px 2px gray;

                      display:grid;

                      justify-content:center;

                      grid-column-start: 2;

                      grid-column-end:3;

                 }

                              #info>#con>p{

                         

                         text-align:justify;

                         line-height:160%;



                }

                #info >#con >h2{

                        color:rgb(16,6,90);

                        text-align: center;

                }



                #info >#con>h3{

                        color:rgb(16,6,90);

                        text-align: center;

                }



                #info >#con>h4{

                        color:rgb(16,6,90);

                }



                #info >#con>h5{

                        color:rgb(0, 2, 27);

                        text-align: center;

                }



		#info>#con>#img{

    	        

                        background-image:url(/Imagenes/programacion/p1.png);

                        background-size:60% 100%;	

                        background-repeat:no-repeat;

                        background-position: center center;

                        height:300px;

                        display: flex;

                        justify-content: center;

                        align-items: center;

                

                }

		#info>#con>#img2{

    	        

                        background-image:url(/Imagenes/mecanica/m5.jpg);

                        background-size:25% 100%;	

                        background-repeat:no-repeat;

                        background-position: center center;

                        height:200px;

                        display: flex;

                        justify-content: center;

                        align-items: center;

                

                }





                #info>#con>#ej1{

                         

                         border-style: solid;

                         border-color: rgb(16,6,90);

                         padding-top: 1%;

                         padding-left: 5%;



                }



                #info>#con>#ej2{

                         

                         border-style: solid;

                         border-color: rgb(16,6,90);

                         padding-top: 1%;

                         display: grid;

                         grid-template-rows:1fr 1fr ;

                }



                #info>#con>#ej2>p{

  

                        padding-left: 4%;                        

                }

                #info>#con>#ej2>a{

                        background-color: rgb(0, 0, 55);

                        color:white;  

                        padding-left: 4%;

                        padding-top: 1%;

			padding-bottom: 1%;                        

                }

                #info>#con>#ej3{

                         

                         border-style: solid;

                         border-color: rgb(16,6,90);

                         padding-top: 1%;

                         display: grid;

                         grid-template-rows:1fr 1fr ;

                }



                #info>#con>#ej3>p{

  

                        padding-left: 4%; 

			                       

                }

                #info>#con>#ej3>a{

                        background-color: rgb(0, 0, 55);

                        color:white;  

                        padding-left: 4%;

                        padding-top: 1%;

			padding-bottom: 1%;  

			                   

                }

                #info>#con>a{

                  

                        border-style: solid;

                        border-color: rgb(16,6,90);     

                        display: grid;

                        align-content: center;

                        justify-items: center;

                        margin-left: 25%;

                        margin-right: 25%;

			padding-top:2%;

			padding-bottom:2%;

                        color:rgb(16,6,90);

                }



		#info>#con>#dcr{

                  

                        text-decoration:none;



                }

 		#info>#con>#dcr:hover{

                  

                        border-style: solid;

                        border-color: rgb(16,6,90);     

                        display: grid;

                        align-content: center;

                        justify-items: center;

                        margin-left: 25%;

                        margin-right: 25%;

                        text-decoration:none;

            			padding-top:2%;

			            padding-bottom:2%;

                        background-color:rgb(16,6,90);

			            color:white;

                }



               

                #info>#con>#ctrl{

                        display:grid;

                        grid-template-columns: 1fr;

                        justify-items: center;



                }



                #info>#con>#ctrl>a{

                    background-color: rgb(16,6,90);

                    color:white;

                    padding-top: 2%;

		    padding-bottom: 1%;

                    padding-left: 2%;

                    padding-right: 2%;

                    text-decoration:none;

                }
                #info>#con>p>a{
                color:rgb(246,223,202);
                background-color:rgb(16,6,90);
                text-decoration:none;
                padding-left:2px;
                padding-right:2px;
                padding-bottom: 1px;
                padding-top:1px;
                border-radius:5px;
                
            }

   		table,td{
                border: 3px solid rgb(16,6,90);
                text-align:left;
         
                              }
                              
                    th{
                 border: 1px solid rgb(16,6,90);
                text-align:left; 
                padding-left:2%;
                    }
