html{
    scroll-behavior   : smooth;
}

@media ( max-width : 421px ) {

    body{
        padding           : 0;
        margin            : 0;
        background-color  : #24283B;
    }

    /* utility */
    html.sr .load-hidden {
        visibility: hidden;
    }


    .main-container{
        display          : flex;
        flex-direction   : column;
        justify-content  : center;
        text-align       : center;
    }

    ul{
        list-style-type  : none;
        margin           : 0;
        padding          : 0;
    }

    li{
        display  : inline;
        margin   : 3px;
    }

    a:link, a:visited, a:active {
        text-decoration:none;
        color: white;
    }

    .navigator{
        position: sticky;
        top     : 0;
    }

    nav{
        height          : 20px;
        color           : white;
        font-size       : 12px;
        margin-top      : 1px;
        background-color: rgba(75, 83, 122, 1);
        padding-top     : 5px;
    }

    /* ############################ */
    /* Inicio Estilo para el Header */
    /* ############################ */
    header{
        display          : flex;
        justify-content  : center;
        align-items      : center;
    }

    .hd-portfolio{
        /* border            : 1px solid red; */
        width             : 100%;
        height            : 290px;
        --opacidad-negro  : 0.6;
        background-image  : linear-gradient(rgba(0, 0, 0, var(--opacidad-negro)), rgba(0, 0, 0, var(--opacidad-negro))), url("../img/react-header.jpg");
        background-repeat : none;
        background-size   : cover;
    }

    .avatar-contain{
        /* border           : 1px solid red; */
        background-color : #24323B;
        margin-top       : 50px;
        height           : 69%;
        width            : 150px;
        box-shadow       : 5px 5px 15px black;
        border-radius    : 20px 20px 10px 10px;
    }

    img{
        width       : 160px;
        margin-top  : -45px;
        margin-left : -7px;
    }

    h2{
        color       : white;
        font-size   : 15px;
        margin-top  : 2px;
    }

    p{
        color       : white;
        font-size   : 10px;
        margin-top  : -8px;
    }

    .logo-social{
        width         : 16%;
        margin-top    : -5px;
        border-radius : 45%;

    }
    /* ######################### */
    /* FIN Estilo para el Header */
    /* ######################### */

    /* ########################### */
    /* Inicio Estilo para el About */
    /* ########################### */
    .about-contain{
        /* border          : 1px solid red; */
        display         : flex;
        justify-content : center;
        align-items     : center;
        flex-direction  : column;
        width           : 100%;
        height          : 300px;
    }

    .sections-title{
        color     : white;
        font-size : 16px;

    }

    .sections-icons{
        width      : 6%;
        margin-top : 3px;

    }

    span{
        font-weight : bold;
        color       : #9FABFF;
    }

    .inf-aboutme{
        font-size   : 11px;
        text-align  : justify;
        padding     : 15px;
        margin-top  : -15px;

    }

    .detailtAbout-contain{
        /* border: 1px solid red; */
        display         : flex;
        flex-direction  : row;
        justify-content : space-between;
        padding         : 15px;
        margin-top      : -20px;
    }

    .personal-details{
        margin-right: 25px;
    }

    .sections-subtitle{
       text-align  : left;
       font-size   : 14px;
       font-weight : bold;
       margin-top  : -5px;
    }

    table{
        /* border: 1px solid red; */
        font-size  : 9px;
        text-align : left;
        margin-left: -3px;

    }

    td{
        color:white;
        font-weight: lighter;
    }

    .space-interests{
        padding: 15px;
    }

    .img-cont-interests{
        /* border           : 1px solid red; */
        width            : 28px;
        height           : 28px;
        background-color : #24323B;
        padding          : 4px;
        border-radius    : 5px;
        box-shadow       : 1px 1px 4px black;

    }

    .img-interests{
        width         : 17px;
        margin-top    : 1px;
        margin-left   : 5px;
    }

    .int-name{
        /* border: 1px solid red; */
        margin-top  : 8px;
        text-align  : center;
    }

    .download-contain{
        border          : 1px solid #9FABFF;
        color           : white;
        font-size       : 10px;
        margin-top      : -6px;
        padding         : 5px;
        width           : 120px;

    }
    /* ######################## */
    /* FIN Estilo para el About */
    /* ######################## */

    /* ############################ */
    /* INICIO PARA EL ESTILO SKILLS */
    /* ############################ */

    .skills-contain{
        /* border          : 1px solid red; */
        background-color: #323648;
        display         : flex;
        align-items     : center;
        flex-direction  : column;
        width           : 100%;
        height          : 320px;
        color           : white;
    }

    .skills-details{
        /* border           : 1px solid red; */
        width            : 90%;
        height           : 285px;
        display          : flex;
        flex-direction   : row;
        justify-content  : space-around;
        font-size        : 12px;
        padding          : 10px;
        text-align       : left;
    }

    .skills-subtitle{
        font-size  : 12px;
    }

    .inputs-range{
        /* border     : 1px solid red; */
        width      : 150px;
        font-size  : 10px;
    }

    input{
        accent-color  : #6C7EFF;
        height        : 4px;
        width         : auto;
        /* margin-top: 5%; */
    }

    .number{
        font-size    : 8px;
        margin-right : 5px;
    }

    /* ############################ */
    /* fin PARA EL ESTILO SKILLS */
    /* ############################ */

    /* ############################### */
    /* INICIO PARA EL ESTILO PORTFOLIO */
    /* ############################### */
    .portfolio-contain{
        /* border           : 1px solid red; */
        display          : flex;
        /* justify-content  : center; */
        align-items      : center;
        flex-direction   : column;
        height           : 315px;
        color            : white;

    }

    .portfolio-details{
        /* border       : 1px solid red; */
        width           : 95%;
        height          : 300px;
        display         : flex;
        justify-content : center;
    }

    .projects-contain{
        /* border: 1px solid red; */
        margin-top : 15px;
    }

    .projects-contain img {
        /* border        : 1px solid red; */
        width         : 154px;
        margin-left   : 5px;
        border-radius : 5px;
        box-shadow    : 1px 1px 8px black;
    }

    .img-pj-github{
        width : 10%;
    }

    a:link, a:visited, a:active {
        text-decoration : none;
    }

    .link-repo{
        color      : white;
        font-size  : 11px;
    }

    /* ############################### */
    /*  FIN PARA EL ESTILO PORTFOLIO   */
    /* ############################### */

    /* ################################## */
    /*   INICIO PARA EL ESTILO PORTFOLIO  */
    /* ################################## */
    .contact{
        /* border        : 1px solid red; */
        width         : 93%;
        height        : 330px;
        padding       : 8px;
        color         : white;
        font-size     : 14px;
        margin-top    : 5px;
        margin-bottom : 5px;
    }

    .input-text{
        /* border        : 1px solid red; */
        width         : 90%;
        height        : 18px;
        border-radius : 10px;
        margin-top    : 5px;
        margin-bottom : 8px;
        font-size     : 12px;
    }

    .frm-contact{
        /* border     : 1px solid red; */
        background              : rgba( 255, 255, 255, 0.15 );
        box-shadow              : 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
        backdrop-filter         : blur( 2px );
        -webkit-backdrop-filter : blur( 2px );
        border-radius           : 10px 10px 0 0;
        border                  : 1px solid rgba( 255, 255, 255, 0.18 );
        text-align              : center;
        height                  : 265px;
        padding                 : 8px;
        box-shadow              : 1px 1px 10px black;

    }

    /* text-area */
    .frm-contact-me{
        /* border: 1px solid red; */
        width          : 90%;
        height         : 100px;
        border-radius  : 6px;
        margin-top     : 5px;
    }

    .btn-enviar{
        height         : 20px;
        width          : 75px;
        border-radius  : 10px;
        margin-top     : 3px;
    }

    /* ########################### */
    /* Inicio FOOTER DEL PORTFOLIO */
    /* ########################### */

    .footer{
        /* border          : 1px solid red; */
        display         : flex;
        justify-content : center;

    }

    .footer-contain{
        color         : white;
        font-size     : 10px;
        margin-top    : 8px;
        margin-bottom : 10px;
        padding       : 12px;
        width         : 92%;
        height        : 10px;

        background              : rgba( 255, 255, 255, 0.15 );
        box-shadow              : 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
        backdrop-filter         : blur( 2px );
        -webkit-backdrop-filter : blur( 2px );
        border-radius           :  0 0 10px 10px;
        border                  : 1px solid rgba( 255, 255, 255, 0.18 );
        box-shadow              : 5px 5px 10px black;
    }

}


/* Comienza estilo para dispositivos de escritorio 29/10/2023 */
@media ( min-width : 422px ) {

    body{
        padding           : 0;
        margin            : 0;
        background-color  : #24283B;
    }

    .main-container{
        display          : flex;
        flex-direction   : column;
        justify-content  : center;
        text-align       : center;
    }

    ul{
        list-style-type  : none;
        margin           : 0;
        padding          : 0;
    }

    li{
        display  : inline;
        margin   : 3px;
    }

    a:link, a:visited, a:active {
        text-decoration :none;
        color           : white;
    }

    .navigator{
        position : sticky;
        top      : 0;
    }

    nav{
        /* border: 1px solid red; */
        height           : 30px;
        color            : white;
        font-size        : 15px;
        margin-top       : 1px;
        background-color : rgba(75, 83, 122, 1);
        padding-top      : 10px;
    }

    /* ############################ */
    /* Inicio Estilo para el Header */
    /* ############################ */
    header{
        /* border: 1px solid red; */
        display          : flex;
        justify-content  : center;
        align-items      : center;
    }

    .hd-portfolio{
        /* border            : 1px solid red; */
        width             : 100%;
        height            : 400px;
        --opacidad-negro  : 0.6;
        background-image  : linear-gradient(rgba(0, 0, 0, var(--opacidad-negro)), rgba(0, 0, 0, var(--opacidad-negro))), url("../img/react-header.jpg");
        background-repeat : none;
        background-size   : cover;
    }

    .avatar-contain{
        /* border           : 1px solid red; */
        background-color : #24323B;
        margin-top       : 45px;
        height           : 76%;
        width            : 210px;
        box-shadow       : 5px 5px 15px black;
        border-radius    : 80px 80px 10px 10px;
    }

    img{
        width       : 215px;
        margin-top  : -35px;
    }

    h2{
        color       : white;
        font-size   : 20px;
        margin-top  : 8px;
    }

    p{
        color       : white;
        font-size   : 14px;
        margin-top  : -14px;
    }

    .logo-social{
        width         : 15%;
        margin-top    : 5px;
        border-radius : 45%;
    }
    /* ######################### */
    /* FIN Estilo para el Header */
    /* ######################### */

    /* ########################### */
    /* Inicio Estilo para el About */
    /* ########################### */
    .about-contain{
        /* border          : 1px solid red; */
        display         : flex;
        justify-content : center;
        align-items     : center;
        flex-direction  : column;
        width           : 100%;
        height          : 470px;
    }

    .sections-title{
        color     : white;
        font-size : 18px;

    }

    .sections-icons{
        /* border: 1px solid red; */
        width      : 25px;
        margin-top : 5px;

    }

    span{
        font-weight : bold;
        color       : #9FABFF;
        font-size   : 17px;
    }

    .inf-aboutme{
        /* border        : 1px solid red; */
        width         : 95%;
        font-size     : 17px;
        text-align    : justify;
        padding-top   : 5px;
        padding-bottom: 5px;
        padding-left  : 30px;
        padding-right : 30px;
        margin-top    : 5px;

    }

    .detailtAbout-contain{
        /* border          : 1px solid red; */
        display         : flex;
        flex-direction  : row;
        justify-content : space-around;
        padding         : 25px;
        margin-top      : 10px;
        width           : 95%;
    }

    .personal-details{
        /* border      : 1px solid red; */
        margin-right: 200px;
    }

    .sections-subtitle{
       /* text-align  : left;  */
       font-size   : 18px;
       font-weight : bold;
       margin-top  : -15px;
    }

    table{
        /* border: 1px solid red; */
        font-size  : 18px;
        text-align : left;
        /* margin-left: -3px; */

    }

    td{
        color:white;
        font-weight: lighter;
    }

    .space-interests{
        /* border: 1px solid red; */
        padding: 15px;
    }

    .img-cont-interests{
        /* border           : 1px solid red; */
        width            : 50px;
        height           : 50px;
        background-color : #24323B;
        padding          : 4px;
        border-radius    : 5px;
        box-shadow       : 1px 1px 4px black;

    }

    .img-interests{
        width         : 30px;
        margin-top    : 2px;
        margin-left   : 11px;
    }

    .int-name{
        /* border: 1px solid red; */
        margin-top  : 8px;
        text-align  : center;
    }

    .download-contain{
        border          : 1px solid #9FABFF;
        color           : white;
        font-size       : 18px;
        margin-top      : -25px;
        padding         : 5px;
        width           : 160px;

    }
    /* ######################## */
    /* FIN Estilo para el About */
    /* ######################## */

    /* ############################ */
    /* INICIO PARA EL ESTILO SKILLS */
    /* ############################ */

    .skills-contain{
        /* border          : 1px solid red; */
        background-color: #323648;
        display         : flex;
        align-items     : center;
        flex-direction  : column;
        width           : 100%;
        height          : 470px;
        color           : white;
    }

    /* Lo uso para controlar el icono independientemente */
    .icon-skills{
        margin-top  : 25px;
    }

    .skills-details{
        /* border           : 1px solid red; */
        width            : 90%;
        height           : 360px;
        display          : flex;
        flex-direction   : row;
        justify-content  : space-around;
        /* font-size        : 16px; */
        padding          : 5px;
        margin-top       : -5px;
        text-align       : left;
    }

    .skills-subtitle{
        font-size  : 17px;
    }

    .inputs-range{
        /* border     : 1px solid red; */
        width      : 200px;
        font-size  : 15px;
    }

    input{
        accent-color  : #6C7EFF;
        height        : 6px;
        width         : auto;
        margin-top    : 10px;
        padding: 1px;
    }

    .number{
        font-size    : 15px;
        margin-right : 10px;
    }

    /* ############################ */
    /* fin PARA EL ESTILO SKILLS */
    /* ############################ */

    /* ############################### */
    /* INICIO PARA EL ESTILO PORTFOLIO */
    /* ############################### */
    .portfolio-contain{
        /* border           : 1px solid red; */
        display          : flex;
        /* justify-content  : center; */
        align-items      : center;
        flex-direction   : column;
        height           : 600px;
        color            : white;

    }

    .portfolio-details{
        /* border          : 1px solid red; */
        width           : 95%;
        /* height          : 400px; */
        display         : flex;
        justify-content : space-evenly;
    }

    .portfolio-icon{
        margin-top: 20px;
    }

    .projects-contain{
        /* border: 1px solid red; */
        margin-top: 0;
        padding: 1px;
    }

    .projects-contain img {
        /* border: 1px solid red; */
        width: 400px;
        margin: 5px;
        border-radius: 5px;
        box-shadow: 1px 1px 8px black;
    }

    .img-pj-github{
        width: 60px;
        margin-top: 10px;
    }

    a:link, a:visited, a:active {
        text-decoration:none;
    }

    .link-repo{
        color: white;
        font-size: 14px;
    }

    /* ############################### */
    /*  FIN PARA EL ESTILO PORTFOLIO   */
    /* ############################### */

    /* ################################## */
    /*   INICIO PARA EL ESTILO PORTFOLIO  */
    /* ################################## */

    .contact{
        /* border          : 1px solid red; */
        height          : 450px;
        color           : white;
        display         : flex;
        flex-direction  : column;
        justify-content : baseline;
        align-items     : center;
    }

    .contact-container{
        /* border        : 1px solid red; */
        width         : 75%;
        height        : 365px;
        padding       : 0px;
        color         : white;
        font-size     : 14px;
        margin-top    : 50px;
        margin-bottom : 5px;
    }

    .input-text{
        /* border        : 1px solid red; */
        width         : 90%;
        height        : 18px;
        border-radius : 10px;
        margin-top    : 5px;
        margin-bottom : 8px;
        font-size     : 13px;
    }

    .frm-contact{
        background              : rgba( 255, 255, 255, 0.15 );
        box-shadow              : 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
        backdrop-filter         : blur( 2px );
        -webkit-backdrop-filter : blur( 2px );
        border-radius           : 10px 10px 0 0;
        border                  : 1px solid rgba( 255, 255, 255, 0.18 );
        /* border: 1px solid red; */
        text-align              : center;
        height                  : 270px;
        padding                 : 10px;
        box-shadow              : 1px 1px 10px black;
    }

    /* text-area */
    .frm-contact-me{
        /* border: 1px solid red; */
        width          : 90%;
        height         : 100px;
        border-radius  : 6px;
        margin-top     : 5px;
    }

    .btn-enviar{
        height         : 25px;
        width          : 100px;
        border-radius  : 10px;
        margin-top     : 10px;
    }

    /* ################################## */
    /*    FIN PARA EL ESTILO PORTFOLIO    */
    /* ################################## */


    .footer{
        /* border          : 1px solid red; */
        display         : flex;
        width           : 75%;
        justify-content : center;
        margin-top      : 10px;
    }

    .footer-contain{
        /* border     : 1px solid red; */
        width      : 100%;
        height     : 18px;
        color      : white;
        font-size  : 15px;
        padding    : 8px;

        background              : rgba( 255, 255, 255, 0.15 );
        box-shadow              : 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
        backdrop-filter         : blur( 2px );
        -webkit-backdrop-filter : blur( 2px );
        border-radius           :  0 0 10px 10px;
        border                  : 1px solid rgba( 255, 255, 255, 0.18 );
        box-shadow              : 5px 5px 10px black;
    }


}