.Intro{
    background: rgb(0,0,0);
}
#hola{
    color: white;
    font-size: 1.25em;
    font-weight: 100;
    text-align: center;
    padding-top: 10em;
}
#andres{
    color: #8be2be;
    font-size:3em;
    font-weight: 400;
    text-align: center;
}
#chao{
    color:#8be2be;
    font-size: 3em;
    font-weight: 400;
    text-align: center;
}
#artista{
    color: white;
    font-size: 1em;
    font-weight: 100;
    text-align: center;
}
#dis{
    color: white;
    font-size: 1em;
    font-weight: 100;
    text-align: center;
    padding-bottom: 30em;
}

body{
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
}


.who{
    color: white;
    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%);
}
#sobre{
    color: white;
    font-size: 1.25em;
    font-weight: 100;
    text-align: center;
    padding-top: 5em;
    
}
#soy{
    color: #8be2be;
    font-size:2.5em;
    font-weight: 400;
    text-align: center;
}


.column{
        float: left;
        width: 33%;
        text-align: center;
}
.row:after {
    content: "";
    display: table;
    clear: both;
    }
#myFace{
    display: block;
  margin-left: auto;
  margin-right: auto;
  
}
#KarpShd{
    display: block;
    
}
.whoInfo{
    padding-bottom: 30em;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
}
#info{
    width: 30%;
    color: black;
}
#infospace{
    width: 30%;
}

.inter1{
    padding-bottom: 30em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
}
#inter1{
    width: 60%;
}
#inter1spacer{
    width: 20%;
}



.aboutMe{
    display: flex;
    padding-bottom: 30em;
    padding-left: 5em;
    padding-right: 5em;
    justify-content: center; 
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(0,0,0,1) 100%);
}
.datosMe{
    width: 40%;
}
    .titleMe{
        color: black;
        font-weight: 700;
        font-size: 1.5em;
    }
    .dataMe{
        color: #8be2be;
        font-weight: 400;
        font-size: 1em;
        padding-bottom: 1em;
    }
    .dataMeM{
        color: #7acaa9;
        font-weight: 400;
        font-size: 1em;
        padding-bottom: 1em;
    }
.karpMe{
    width: 20%;
}
.meSpace{
    width: 25%;
}
.mainInfoMi{
    width: 40%;
}
    .SobreMi{
        color: #8be2be;
        font-size: 2.5em;
        padding-left: 1.25em;
    }
    .MiInfo{
        color: white;
        font-size: 1.25em;
    }



.ability{
    color: white;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    padding-bottom: 30em;
    background: black;
}
#habil{
    color: #8be2be;
    font-size: 2em;
    width: 100%;
    padding-left: 2em;
}
#habInfo{
    width: 25%;
    font-size: 1.25em;
}
#telect{
    width: 40%;
}
.progr{
    width: 25%;
    color: #8be2be;
    font-weight: 700;
    
}
.barI{    
    width: 70%;
    height: 1em;
    background: white;
}
.porcentaje95{
    width: 95%;
    background: #8be2be;
    height: 100%;
    text-align: center;
    color: white;
    font-size: 12.5px;
    font-weight: 900;
    filter: drop-shadow(3px 3px 3px black);
}
.barP{    
    width: 70%;
    height: 1em;
    background: white;
}
.porcentaje90{
    width: 90%;
    background: #8be2be;
    height: 100%;
    text-align: center;
    color: white;
    font-size: 12.5px;
    font-weight: 900;
    filter: drop-shadow(3px 3px 3px black); 
}
.barA{    
    width: 70%;
    height: 1em;
    background: white;
}
.porcentaje70{
    width: 70%;
    background: #8be2be;
    height: 100%;
    text-align: center;
    color: white;
    font-size: 12.5px;
    font-weight: 900;
    filter: drop-shadow(3px 3px 3px black);
}
.barD{    
    width: 70%;
    height: 1em;
    background: white;
}
.porcentaje80{
    width: 80%;
    background: #8be2be;
    height: 100%;
    text-align: center;
    color: white;
    font-size: 12.5px;
    font-weight: 900;
    filter: drop-shadow(3px 3px 3px black);
}
span{
    filter: drop-shadow(4px 1px 2px black);

}
.button {
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 10px 5px;
    cursor: pointer;
}
.CV{
    background: #8be2be;
}


.PortafolioHome{
    
    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%);
}
.portCntrl{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#portSpace{
    width: 48%;
}
#portTitle{
    color: #8be2be;
    font-size: 4em;
    width: 52%;
}
.togetherFish{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#fishSpace{
    width: 20%;
}
.fish{
    width: 20%;
}
#fishSpace2{
    width: 10%;
}
.linksPort{
    width: 50%;

}

    #art{
        color: white;
        font-size: 2.75em;
        padding-left: 1.5em;
    }
        #art a{
        color: white;
        text-decoration:underline;
        }
    #draw{
        color: #8be2be;
        font-size: 2.5em;
        padding-left: 2.5em;
    }
        #draw a{
            color: #8be2be;
            text-decoration: none;
            }
    #foto{
        color: #8be2be;
        font-size: 2.5em;
        padding-left: 2.5em;
    }
        #foto a{
            color: #8be2be;
            text-decoration: none;
            }
    #dise{
        color: white;
        font-size: 2.75em;
        padding-left: 1.5em;
    }
        #dise a{
            color: white;
            text-decoration: underline;
            }
     #perso{
        color: #8be2be;
        font-size: 2.5em;
        padding-left: 2.5em;
     }
        #perso a{
            color: #8be2be;
            text-decoration: none;
            }
    #logos{
        color: #8be2be;
        font-size: 2.5em;
        padding-left: 2.5em;
    }
        #logos a{
            color: #8be2be;
            text-decoration: none;
            }