html{
    --s: 50px;
    --c: #191b22;
    --_s: calc(2*var(--s)) calc(2*var(--s));
    --_g: 35.36% 35.36% at;
    --_c: #0000 66%,#20222a 68% 70%,#0000 72%;
    background: 
        radial-gradient(var(--_g) 100% 25%,var(--_c)) var(--s) var(--s)/var(--_s), 
        radial-gradient(var(--_g) 0 75%,var(--_c)) var(--s) var(--s)/var(--_s), 
        radial-gradient(var(--_g) 100% 25%,var(--_c)) 0 0/var(--_s), 
        radial-gradient(var(--_g) 0 75%,var(--_c)) 0 0/var(--_s), 
        repeating-conic-gradient(var(--c) 0 25%,#0000 0 50%) 0 0/var(--_s), 
        radial-gradient(var(--_c)) 0 calc(var(--s)/2)/var(--s) var(--s) var(--c);
    background-attachment: fixed;
    }

:root{
    --primary-color: rgb(0, 0, 0);
    --secundary-color: rgb(255, 255, 255);
    --skills-bar-length: 0%;
}


#main-flex{
    line-height: 1.5;
    margin: 5% auto;
    width: 70%;
    display: flex;
    }

    .container{
        border: 1px solid red;
        display: flex;
        flex-direction: column;
    }
    .container-sections{
        display: flex;
    }

    /* estilos generales*/

        .titles{
            font-family: 'Orbitron', sans-serif;
            text-align: center;
            background: rgb(180, 169, 9);
            color: #ffffff;
            margin-top: 5px;
            padding: 5px;
        }
        .box-sobremi p{
            font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            color: #ffffff;
            text-align: left;
            font-size: 1.1rem;
        }
        .box-educacion h3{
            font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            color:#b4a622e0;
            text-align: center;
            font-size: 1.3rem;
        }
        .box-educacion p{
            font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            color: #ffffff;
            text-align: left;
            font-size: 1.1rem;
        }
        .box-laboral p{
            font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            color: #ffffff;
            text-align: left;
            font-size: 1.1rem;
        }

    
/* Informacion lado izquierdo */
    
    .seccion-izquierda{
        background: linear-gradient(rgba(54, 53, 53, 0.856), rgba(73, 73, 70, 0.884), rgb(165, 149, 79));
        width: auto;
        display: flex;
        flex-direction: column;
    }
    .photo-profile{
        background: #20222a;
            margin: 0;
            width: auto auto;
    }
    img{
        display: flex;
        margin-left:25px;     
        width: 300px;
        height: 440px;
    }

    .caja-habilidades{
        padding: 10px;
    }
        .caja-habilidades small{
            font-size: 1.5em;
            color: #ffffff;
        }

    .caja-intereses{
        padding: 10px;
    }

/*creando barass skills habilidades e intereses tecnologicos*/

        .barra{
            padding: 1em auto;
            margin: 1.1em auto;
        }
        .barra-header{
            display: flex;
            justify-content: space-between;
            width: 175px;
            margin-left: auto;
        }
        .skills-start-level{
            padding: 8px;
            color: #ffffff;
        }
        .barra-js{
            margin: 0;
            padding-right: 6px;
            font-size: 1rem;
            color: #ffffff;
        }
        .barra-items{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0.5em;
        }
        .barra-skill,
        .barra-skill::after{
            position: relative;
            width: 175px;
            height: 8px;
            background-color: #888;
            border-radius: var(border-radius);
            overflow: hidden;
        }
        .barra-skill::after{
            content: "";
            position: absolute;
            left: -175px;
            background-color: var(--primary-color);
            transition: var(--transition);
            animation: skill-bar-fill 2s ease-in-out forwards;
        }
        .barra-skill--10::after{
            --skills-bar-length: 10%
        }
        .barra-skill--20::after{
            --skills-bar-length: 20%
        }
        .barra-skill--30::after{
            --skills-bar-length: 30%
        }
        .barra-skill--40::after{
            --skills-bar-length: 40%
        }
        .barra-skill--50::after{
            --skills-bar-length: 50%
        }
        .barra-skill--60::after{
            --skills-bar-length: 60%
        }
        .barra-skill--70::after{
            --skills-bar-length: 70%
        }
        .barra-skill--80::after{
            --skills-bar-length: 80%
        }
        .barra-skill--90::after{
            --skills-bar-length: 90%
        }

        @keyframes skill-bar-fill {
            to{
               transform: translateX(var(--skills-bar-length)); 
            }
        }

/* Informacion lado derecho */

    .header-title{
        background: rgb(194, 182, 10);
        margin-top: o;
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #titulo-principal{
        font-size: 2.5em;
        font-family: 'Orbitron', sans-serif;
        font-family: 'Righteous', cursive;
    }
    #titulo-secundario{
        background: rgba(197, 185, 20, 0.541);
        margin-top: 5px;
        display: flex;
        align-items: center;
        width: auto;
        height: 50px;
    }
        #titulo-secundario p{
            color: #ffffff;
            font-size: 1.7rem;
            font-family: 'Orbitron', sans-serif;
            font-family: 'Righteous', cursive;
        }

    .seccion-derecha{
        background: linear-gradient(rgba(54, 53, 53, 0.856), rgba(87, 87, 79, 0.884), rgb(165, 149, 79));
        width: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        text-align: center;
    }
    .box-sobremi{
        padding: 10px;
        margin-top: -15px;
    }
    .box-educacion{
        padding: 10px;
        margin-top: -15px;
    }
    .box-laboral{
        padding: 10px;
        margin-top: -15px;
    }


        
/* Footer contacto */

    .footer-contacto{
        background: rgb(165, 149, 79);
        width: auto;
        height: 150px;
        margin: 0;
        display: flex;
        flex-direction:column;
    }
        #links{
            width: auto;
            margin-top: -15px;
            padding: 5px;
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            justify-content: space-around;
        }
            #links a:hover{
                color: rgb(180, 169, 9);
            }
            #links i{
                padding-right: 15px;
            }

            #links a{
                color:rgb(0, 0, 0);
                font-size: 1.6em;
                text-decoration: none;
                padding-right: 30px;
            }