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




body {
    /* width: 100%;
    height: 100vh; */
    background-color:#386280;

}
/* body:hover { 
    animation: change-color 2s ease forwards;
} */

#name_svg {
  position: absolute;
  top: 25%;
  left: 50%; 
  transform: translate(-50%, -50%);
  
}
#bio {
    opacity: 0;
    position: absolute;
    top: 40%;
    left: 50%; 
    transform: translate(-50%, -50%); 
    font-family: system-ui;
    text-align: center;
    animation: fade 4s ease forwards 7s;
}



#name_svg path:nth-child(2) {
    stroke-dasharray: 528px;
    stroke-dashoffset: 528px;
    animation: name-anim 5s ease forwards 0.3s;
}
#name_svg path:nth-child(3) {
    stroke-dasharray: 375px;
    stroke-dashoffset: 375px;
    animation: name-anim 5s ease forwards 0.6s;
}
#name_svg path:nth-child(4) {
    stroke-dasharray: 472px;
    stroke-dashoffset: 472px;
    animation: name-anim 5s ease forwards 0.9s;
}   
#name_svg path:nth-child(5) {
    stroke-dasharray: 422px;
    stroke-dashoffset: 422px;
    animation: name-anim 5s ease forwards 1.2s;
}
#name_svg path:nth-child(6) {
    stroke-dasharray: 672px;
    stroke-dashoffset: 672px;
    animation: name-anim 5s ease forwards 1.5s;
}
#name_svg path:nth-child(7) {
    stroke-dasharray: 550px;
    stroke-dashoffset: 550px;
    animation: name-anim 5s ease forwards 1.8s;
}
#name_svg path:nth-child(8) {
    stroke-dasharray: 410px;
    stroke-dashoffset: 410px;
    animation: name-anim 5s ease forwards 2.1s;
}
#name_svg path:nth-child(9) {
    stroke-dasharray: 472px;
    stroke-dashoffset: 472px;
    animation: name-anim 5s ease forwards 2.4s;
}
#name_svg path:nth-child(10) {
    stroke-dasharray: 524px;
    stroke-dashoffset: 524px;
    animation: name-anim 5s ease forwards 2.7s;
}
#name_svg path:nth-child(11) {
    stroke-dasharray: 504px;
    stroke-dashoffset: 504px;
    animation: name-anim 5s ease forwards 3.0s;
}
#name_svg path:nth-child(12) {
    stroke-dasharray: 580px;
    stroke-dashoffset: 580px;
    animation: name-anim 5s ease forwards 3.3s;
}
body {
    animation: change-color 2s ease forwards 6s;
}

a {
    text-decoration: none;
    color: #1e577f;
}

#languages ul, #design ul, #frameworks ul, #social ul, #top_projects ul {
    list-style: none;
    display:flex;
    text-align: center;
    /* justify-content: center; */
    /* align-items: center; */
}
#TP_title {
    text-align:center;
    justify-content: center;
}

#languages {
    font-family: system-ui;
    position: absolute;
    top: 55%;
    left: 15%; 
    transform: translate(-50%, -50%);
}
#design {
    font-family: system-ui;
    position: absolute;
    top: 55%;
    left: 40%; 
    transform: translate(-50%, -50%);
}
#frameworks {
    font-family: system-ui;
    position: absolute;
    top: 55%;
    left: 63%; 
    transform: translate(-50%, -50%); 
}
#social {
    font-family: system-ui;
    position: absolute;
    top: 55%;
    left: 85%; 
    transform: translate(-50%, -50%);  
}
#top_projects {
    font-family: system-ui;
    position: absolute;
    top: 75%;
    left: 50%; 
    transform: translate(-50%, -50%);  
    align-items: center;
}
img#imgPilot, img#imgElg {
    width: 100px;
    height: 100px;
    margin: 10px;
}
ul li svg, img {
    width: 40px;
    height: 40px;
}

#connect {
    opacity: 0;
    font-family: system-ui;
    position: absolute;
    top: 90%;
    left: 50%; 
    transform: translate(-50%, -50%); 
    animation: fade 2s forwards 10s;
}

h2, h4, li {
    /* color: white; */
    opacity:0;
    animation: fade 3s forwards 9s;
}





@keyframes name-anim{
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fill {
    to {
        fill: white;
    }
}
@keyframes change-color {
    to {
        background-color: rgb(143, 94, 38);
    }
}

@keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}