@font-face {
  font-family: 'Comfortaa-VariableFont_wght';
  src: url('https://lic-johnm.github.io/HazloTEC/fuente/Comfortaa/Comfortaa-VariableFont_wght.ttf');
  font-style: normal;
  font-weight: normal;
}
    body { 
       
           font-family: 'Comfortaa-VariableFont_wght';
            margin:0;
           padding: 0; 
           height: auto;
           display:grid;
           grid-template-rows: 12vh 88vh;
           background-image: url(bct.png);
           background-repeat: no-repeat;
           background-size: cover;
           }

          #menu { background-color: white;
                    color: rgb(0,0,55); 
                    border-bottom: 1px solid rgb(0,0,55);
                    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%;;
             }


        header{
            display: grid;
            grid-template-columns: 40% 60%;
            margin-left: 2%;
            margin-right: 2%;
            margin-top: 5%;
            margin-bottom: 5%;
        }
        header>#I1 {

       
        border-bottom-left-radius: 20px;
        border-top-left-radius: 20px;
        display: grid;
        color:white;
        background-color: rgba(47,65,89,1);
        grid-template-rows:  15% 65% 20%;
        justify-items: center;
        align-items: center;
        padding-left: 5%;
        margin-left: 10%;
        
    }

    header>#I1>#im2{
        background-image: url(https://lic-johnm.github.io/HazloTEC/Programacion/programacion.jpg);
        width:100%;
        height:100%;
        background-size: 100% 100%;
        margin-right:5%;
        background-repeat:no-repeat;
        background-position:center center;
        display: grid;
        grid-template-columns:1fr 1fr 1fr 1fr;
        grid-template-rows:1fr;
        align-items: end;
      

    }

    header>#I1>#im2>a{
        visibility: hidden;
        background-color: #f6dfca;

        color:rgba(47,65,89,1);
     

    }

    header>#I1>#im2>p{
        visibility: hidden;
        background-color: #f6dfca;

        color:rgba(47,65,89,1);
        text-decoration: none;
     
    }



    header>#I1>#casa{
        background-color: #f6dfca;
        padding: 6%;
        color:rgba(47,65,89,0.9);
        text-decoration:none;
        

    }

    header>#I2 {
        
        border-bottom-right-radius: 20px;
        border-top-right-radius: 20px;
        background-color:white;
        display: grid;
        color:rgba(47,65,89,0.9);
        border-color: rgba(47,65,89,0.9);
        border-style: solid;
        grid-template-columns: 50% 50%;
        grid-template-rows: 15% 15% 15% 15% 15% 15% 10%;
        align-items: center;
        justify-items: center;
        margin-right: 10%;


    }

    header>#I2>div:hover{
        background-color: rgba(47,65,89,0.9);
        color:white;
        padding: 2%;
    }

        header>#I2>div{
    
        display:grid;
        grid-template-columns:20% 80%;
       padding: 2%;
        width: 70%; 
    }


header>#I2>div>.p2 {
  padding-top: 2px;
  background-color: rgba(47,65,89,0.9);
  color: white;
  display: flex;
  align-items: center;  /* Alineación correcta */
  justify-content: center;
}

header>#I2>div>.p3 {
  padding-left: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  text-decoration: none;
  background-color: white;
  color: rgba(47,65,89,0.9);
  border: 1px solid rgba(47,65,89,0.9);
}




    
    header>#I2>a:hover{
        background-color: white;
        color:rgba(47,65,89,0.9);
        padding: 2%;
        text-decoration:none;
        border-color:rgba(47,65,89,0.9);
        border-style:solid;
    }
  
      header>#I2>a{
        background-color: rgba(47,65,89,0.9);
        color:white;
        padding: 2%;
        text-decoration:none;
        width: 70%; 
    }
    
 header>#I2>#prev{
        background-color: #f6dfca;
        padding: 2%;
        color:rgba(47,65,89,0.9);
        text-decoration:none;
        width: 60%; 
    margin: 0 auto;  /* Centra el elemento en su contenedor */
    text-align: center; /* Centra el texto dentro del elemento */
    }

 header>#I2>#sig{
        background-color: #f6dfca;
        padding: 2%;
        color:rgba(47,65,89,0.9);
        text-decoration:none;
           width: 60%; 
    margin: 0 auto;  /* Centra el elemento en su contenedor */
    text-align: center; /* Centra el texto dentro del elemento */

    }