@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Concert+One&family=Jersey+10&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Matemasie&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Matemasie&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Allerta+Stencil&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Noto+Color+Emoji&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

body {
    /*   background-color: #fff9e9;*/
    background-color: #B3DEE5;

}

* {
    user-select: none;
}

*::selection {
    background: none;
}

*::-moz-selection {
    background: none;
}


.alig-Center {
    text-align: center;
    margin: 0%;
    padding: 0%;
    position: relative;
}

.alig-fin {
    text-align: end;
    position: relative;
}

.altura-container {
    min-height: 60vh;
    /* altura de los section */
}

.altura-container2 {
    min-height: 100vh;
    /* altura de los section */
}

.alt-footer {
    width: 100%;
    height: 30vh;
    
    padding: 16px 0 32px 0;
    
}


.bg-color2 {
    background-color: #31525b;
    /*  background-color: #ff6c02; */
    font-family: Lato;
    font-weight: 500;
    font-size: large;
    transition: all 0.5s ease;
    /*    opacity: 0.5; */

}

.bg-footer1 {
    background-color: #31525b;
    color: #ffa101;
    font-family: Lato;
    font-weight: 500;
    font-size: large;
}


.bg-inter {
    background-color: #B3DEE5;
    border-radius: 1%;
}


.bg-navegacion {
    /*  background-color: #5a8100;*/
    background-color: #31525b;
    font-family: Lato;
    font-weight: 500;
    font-size: large;
    transition: all 0.5s ease;
    opacity: 0.6;
}

.circle {
    float: left;
    width: 200px;
    height: 200px;
    margin: 10px;
    shape-outside: circle(50%);
    clip-path: circle();
    background: rgb(6, 2, 16);
}

.cajaPrincipal {
    position: relative;
    display: inline-block;
}


.color-icon{
    color: #FFA101;
}

.col-error{
    background-color: #e75b15;
    color:#EFEFFB;
    font-family: "Jersey 10", sans-serif;
    font-style: italic;
    text-align: center;
}

.color-icoJS{
    background-color:#000;
    color: yellow;
}

.color-icoHTML{
    background-color:#000;
    color: rgb(251, 6, 6);
}

.color-icoCss{
    background-color:#FFF;
    color: rgb(40, 11, 228);
}

.color-icoNodejs{
    background-color:#31B404;
    color:#FAFAFA;
    /*<i class="fab fa-node-js"></i>*/
}

.color-icoBosstrap{
    background-color:#FAFAFA;
    color:#4000FF;
    /*<i class="fa-brands fa-bootstrap"></i>*/
}


.ico-tam {
    width: 100px;
    height: 100px;
    border-radius: 150px;
    background-color: black;

}

.img-circular {
    border-radius: 10%;

}


.justificar {
    text-align: justify;
    margin-left: 3px;

}

.oculta-div {
    display: block;
}

.oculta-div2 {
    display: none;
}

.sinnada {
    margin: 0%;
    padding: 0%;
}

.snmarg {
    margin: 0%;
}


.tam-carr {
    max-width: 100%;
    max-height: 25%;
    min-width: 100%;
}

.text-aliblue {
    color: aliceblue;
    font-weight: 900;
    font-family: 'Franklin Gothic Medium';
}



.texto1 {
    position: absolute;
    top: 22%;
    left: 20%;
    font-family: "Allerta Stencil", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 7vw;
    animation: movimiento 10s ease infinite;
    text-shadow:
        1px 1px 0 #f31b1b,
        -2px 2px 0 #000,
        -1px 1px 0 #000;

}


.texto2 {
    text-align: justify;
    font-family: "Rubik", sans-serif;
    font-style:normal;
    font-weight: 600;
    font-optical-sizing: auto;
    font-size: 1.4rem;
    color: #31525b;

}

.texto3 {
    position: absolute;
    top: 92%;
    right: 5%;
    font-family: "Rubik", sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 1vw;
    animation: movimiento 10s ease infinite;
    text-shadow:
        1px 1px 0 #f31b1b,
        -2px 2px 0 #000,
        -1px 1px 0 #000;
}


.texto4 {
    font-family: "Rubik", sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 1vw;
    animation: movimiento 10s ease infinite;
    text-shadow:
        1px 1px 0 #f31b1b,
        -2px 2px 0 #000,
        -1px 1px 0 #000;
}

.texto5 {
    text-align: justify;
    font-family: "Crimson Text", serif;
    font-style:normal;
    font-weight: 700;
    font-optical-sizing: auto;
    font-size: 1.3rem;
    color: #31525b;

}


.bg-subheadProy{
    background-color: #FFA101 /*#31525B*/;
    color: #fff/* #FFA101*/;
    font-family: "Concert One", sans-serif;
    font-weight: 400;
    font-style: normal;

}


.bg-subBodyProy{
    background-color:#fae6b1;
    color: #31525B;
    font-family: "Concert One", sans-serif;
    font-weight: 400;
  font-style: normal;
}



/* fin de CSS esclusivos imagen de inicio*/









/* Aqui comienzan las medidas CSS */

@media(max-width:600px) {
    .oculta-div {
        display: none;
    }

    .oculta-div2 {
        display: block;
    }
    .texto2{
        font-family: "Crimson Text", serif;
        font-size: 1rem;
        font-weight: 700;
        text-align:justify;
        
    }
    .bg-exter {
        background-color: #FFA101;
    }
    
    .bg-inter {
        background-color: #fae6b1;
        border-radius: 2%;
        
    }
    .color-icon{
        color: #B3DEE5;
    }
    
    .alt-footer {
        width: 100%;
        height: 40vh;
        
    }

    .circle {
        float:none;
        width: 150px;
        height: 160px;
        background: lightblue;
        clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    }
    .texto4 {
        
        font-family: "Rubik", sans-serif;
        font-style: normal;
        font-weight: 300;
        font-size:  0.5em;
        color: #E0E0F8;
    }
    
    .texto3 {
        position: absolute;
        top: 70%;
        right: 10%;
        font-family: "Rubik", sans-serif;
        font-style: normal;
        font-weight: 200;
        font-size: 0.5em;
       
    }
    .texto5 {
        text-align: justify;
        font-family: "Crimson Text", serif;
        font-style:normal;
        font-weight: 500;
        font-optical-sizing: auto;
        font-size: 1.1rem;
        color: #31525b;
    
    }

    .bg-subBodyProy{
        background-color:#B3DEE5;
    }
    
    .bg-subheadProy{
        background-color:#FFA101;
        color: #fff;
        
    
    }

}




@media(max-width:200px) {
    .oculta-div {
        display: none;
    }

    .oculta-div2 {
        display: block;
    }
    .texto2{
        font-family: "Crimson Text", serif;
        font-size: 0.5rem;
        font-weight: 200;
        text-align: left;
        margin: 0%;
    }
}


@keyframes movimiento {
    0% {
        color: #EFEFFB;
    }

    20% {
        color: #E0E0F8;
    }

    40% {
        color: #A9A9F5;
    }

    60% {
        color: #A9A9F5;
    }

    80% {
        color: #E0E0F8;
    }

    100% {
        color: #EFEFFB;
    }


}

@keyframes movimiento2 {
    0% {
        color: #0808c1;
    }

    20% {
        color: #010116;
    }

    40% {
        color: #010114;
    }

    60% {
        color: #de7308;
    }

    80% {
        color: #e75b15;
    }

    100% {
        color: #0f0fdf;
    }


}