@font-face {
    font-family: varela;
    src: url(/fonts/VarelaRound-Regular.ttf);
}

@font-face {
    font-family: itim;
    src: url(/fonts/Itim-Regular.ttf);
}

:root {
    --background-radiant:  
        radial-gradient(at 9% 78%, hsla(131,69%,74%,1) 0, transparent 55%),  
        radial-gradient(at 57% 89%, hsla(142,44%,73%,1) 0, transparent 44%),  
        radial-gradient(at 80% 0%, hsla(190,100%,56%,1) 0, transparent 50%),  
        radial-gradient(at 82% 49%, hsla(195,95%,70%,1) 0, transparent 50%),  
        radial-gradient(at 0% 100%, hsla(223,76%,38%,1) 0, transparent 50%),  
        radial-gradient(at 80% 100%, hsla(196,44%,65%,1) 0, transparent 50%),  
        radial-gradient(at 16% 12%, hsla(228,89%,58%,1) 0, transparent 50%);
    --background: #136771 ;
    --font-color: rgb(243, 234, 234);
    --color-span: hsla(131,70%,80%,1);
    --title-color: rgb(49, 42, 42);
}


body {
    min-height: 100vh; 
    max-width: 100%;
    background: var(--font-color);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.title {
    font-family: varela;
}

.skin-green {
    color: var(--background);
}

.skin-black {
    color: var(--title-color);
}

.title-level1 {
    font-size: 2.5rem;
}

.mb {
    margin-bottom: 1rem;
}
.p {
    font-family: itim;
    font-size: 1.3rem;   
}

.header {
    background-color: var(--background);
    background-image: var(--background-radiant);
    color: var(--font-color);
    min-height: 100vh;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
}

.span {
    color: var(--color-span);
    text-shadow: 1px 1px 5px gray;
}

.header-image {
    width: 300px;
    border-radius: 50%;
}

.title-level2 {
    font-size: 2.2rem;
    color: var(--title-color);
}

.list {
    font-size: 1.3rem;
    font-family: itim;
    list-style-position: inside;
    list-style: none;
}

.list li {
    color: inherit;
    background-image: url(/icons/book.svg);
    padding-left: 2rem;
    background-position: 0 0;
    background-size: 1.6rem 1.6rem;
    background-repeat: no-repeat;
    margin-bottom: 1rem;
}

.text-center {
    margin-top: 1rem;
    text-align: center;
}

.text-justify {
    text-align: justify;
}

.pd-2r {
    padding: 1.5rem;
}

.m-auto {
    margin:auto;
}

.container {
    display: flex;
    flex-wrap: wrap;
}

.container-children {
    width: 40%;
}

.footer {
    text-align: center; 
    height: 10rem;
    background: var(--title-color);
    color: var(--font-color);
}

.habilidades {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contenedor-habilidades {
    width: 100%;
    display: flex;
    justify-content: center;
    
}

.contenedor-habilidades > .p {
    width: 10%;
}

.font-progress {
    background: lightgray;
    width: 90%;
}

.color-progress {
    background: var(--color-span);
    display: flex;
    justify-content: center;
}

.ml {
    margin-left: 1rem;
}

.mr {
    margin-right: 1rem;
}

.p-10 {
    width: 10%;
}

.p-20 {
    width: 20%;
}

.p-30 {
    width: 30%;
}

.p-40 {
    width: 40%;
}

.p-50 {
    width: 50%;
}

.p-60 {
    width: 60%;
}

.p-70 {
    width: 70%;
}

.p-80 {
    width: 80%;
}

.p-90 {
    width: 90%;
}

.p-100 {
    width: 100%;
}

.icon-link {
    width: 4rem;
}

.o-3 {
    order: 3;
}

.o-2 {
    order: 2;
}

.o-1 {
    order: 1;
}

.boton {
    text-decoration: none;
    border: 1px solid lightgray;
    color: var(--background);
    padding: 0.5rem 0.8rem;
    width: 30%;
}

.boton:hover {
    background: lightgrey;
    transition: 0.3s;
    border: 1px solid gray;
}

.boton:active {
    color: var(--title-color);
}

.portafolio {
    max-width: 100%;
    min-height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--background);
    margin-top: 2rem;
}

@media screen and (max-width: 960px){

    .container-children {
        width: 98%;
        margin-bottom: 2rem;
    }

    .contenedor-habilidades > .p {
        width: 15%;
    }
    
    .font-progress {
      width: 85%;
    }   

    .container-children {
        order: 0;
    }
 
}

@media screen and (max-width: 860px){

    .title-level1 {
        font-size: 2rem;
    }

    .contenedor-habilidades .p {
        width: 25%;
    }
    
    .font-progress {
      width: 75%;
    }   

}

@media screen and (max-width: 740px){

    .header-image {
        width: 240px;
    }

    .boton {
        width: 50%;
    }
}

@media screen and (max-width:440px){
    .contenedor-habilidades {
        flex-direction: column;
    }

    .contenedor-habilidades .p {
        width: 100%;
    }

    .font-progress {
        width: 100%;
    }

    .color-progress .p {
        text-align: center;
    }
}