#article-who{
 padding-top:5vh;
 padding-right:5vw;
 padding-left:5vw;
 position: relative;
}



.who-card{
    text-align: start;
    background-color: rgba(50,50,50,0.7);
    padding:3vh;
    margin-bottom: 3vh;    
    visibility: hidden;
    min-height:300px;
    transform: scale(0,0);
}

.who-card-animation
{
    visibility:visible;
    color: rgb(0,255,123);
    background-color: rgba(50,50,50,0.7);
    padding:3vh;
    padding-left:3vw;
    padding-right:3vw;
    border-radius: 20px;
    margin-bottom: 3vh;
    min-height:300px;
    transform: scale(1,1);
    transition: ease-in-out 1s;
}


.who-card-content>*{
    margin-left: 5vw;
    margin-right: 5vw;
    color: azure;
    text-align: justify;
    text-justify: inter-word;
}

.who-card-content>h1{
    color: rgb(0,255,123);
    margin-bottom: 40px;
}

.who-code
{
    padding: 10px;
    background-color: rgb(40,40,40);
    border-radius: 10px;
 
    margin: 5vh;
    margin-left: 2vw;
    margin-right: 2vw;
}
.who-code>p{
    color: azure;
    font-family: 'Courier New', Courier, monospace;
    height: inherit;
    font-size: 1.3em;
    font-weight: 800;
    margin-left: 5vw;
}



/*COLOR CODE*/



.code-purple{
    color: rgb(255,0,132);
}
.code-blue{
    color: rgb(0,141,255);
}



.pdf-download{
    color: white;
    font-weight: 700;
    font-size: 2em;
    background-color: red;
    border-radius: 20px;
}

.pdf-download:hover{
    color: white;
    font-weight: 700;
    font-size: 2em;
    background-color: rgb(200,0,0);
    border-radius: 20px;
}



/*SKILLS*/

.who-skill{
    margin-right: 0;
}

.who-skill-header{
    position: relative;
    margin: 0px;
    height: 20px;
    margin-left:60px;
    width: auto;
}

.who-skill-header>*{
    position: absolute;
}

#who-skill-header-0{
    left: 0%;
}

#who-skill-header-50{
    left:45%;
}

#who-skill-header-100{
    right: 0;
}

.who-skill-list{    
    margin: 0;
    margin-top: 20px;
    list-style: none;
    display: grid;
}

.who-skill-list>*{
    margin-bottom: 10px;
    font-weight: 700;
    display: flex;
    row-gap: 10px;
}

.who-skill-list>li:nth-child(2){
    color: gold;
    font-weight: 900;

}

.who-skill-list>li:nth-child(2)>.who-skill-name{
    /* color: gold; */
    font-weight: 900;
    text-align: center;
    border-radius: 1em;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);


}

.who-skill-list>li:nth-child(3){
    color: silver;
}

.who-skill-list>li:nth-child(4){
    color: orange;
}

.who-skill-name
{
    margin-right: 10px;
    min-width: 60px;
    width:min-content;
}

.who-skill-10{
    border-radius: 10px;
    /* border: 1px solid rgb(0,255,123); */
    /* border-style: solid; */
    width: 0%;
    height: 100%;
    transition: all 1.5s cubic-bezier(.65,.01,.43,1.25);

}
.who-skill-10-animation{
    width: 100%;

    transition: all 1.5s cubic-bezier(.65,.01,.43,1.25);
    background:linear-gradient(90deg,rgb(0,255,123) 0%, rgb(255,152,88) 50%,rgb(255,0,132)100%);
}

.who-skill-8{
    border-radius: 10px;
    /* border: 1px solid rgb(0,255,123); */
    /* border-style: solid; */
    width: 0%;
    height: 100%;
    transition: all 1.5s cubic-bezier(.65,.01,.43,1.25);

}

.who-skill-8-animation{
    width: 80%;

    transition: all 1.5s cubic-bezier(.65,.01,.43,1.25);
    background:linear-gradient(90deg,rgb(0,255,123) 0%, rgb(255,152,88) 62%,rgb(255,30,123)100%);
}

.who-skill-7{
    border-radius: 10px;
    /* border: 1px solid rgb(0,255,123); */
    /* border-style: solid; */
    width: 0%;
    height: 100%;
    transition: all 1.5s cubic-bezier(.65,.01,.43,1.25);
}

.who-skill-7-animation{
    width: 70%;

    transition: all 1.5s cubic-bezier(.65,.01,.43,1.25);
    background:linear-gradient(90deg,rgb(0,255,123) 0%, rgb(255,152,88) 71%,rgb(255,45,118)100%);
}

.who-skill-6{
    /* border: 1px solid rgb(0,255,123); */
    /* border-style: solid; */
    width: 0%;
    height: 100%;
    border-radius: 10px;
}

.who-skill-6-animation{
    width: 60%;

    transition: all 1.5s cubic-bezier(.65,.01,.43,1.25);
    background:linear-gradient(90deg,rgb(0,255,123) 0%, rgb(255,152,88) 83%,rgb(255,60,113)100%);
}

.who-skill-5{
    width: 0%;
    height: 100%;
    border-radius: 10px;
}

.who-skill-5-animation{
    width: 50%;

    transition: all 1.5s cubic-bezier(.65,.01,.43,1.25);
    background:linear-gradient(90deg,rgb(0,255,123) 0%, rgb(255,152,88) 100%);
}