*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',Arial,sans-serif;
}


html{
    scroll-behavior:smooth;
}


body{

    background:
    linear-gradient(
        rgba(10,0,25,0.88),
        rgba(10,0,25,0.88)
    ),
    url("images/agnes.png");


    background-size:cover;
    background-position:center;
    background-attachment:fixed;

    color:white;

}



/* NAVBAR */


.navbar{

    position:fixed;

    top:0;

    width:100%;

    padding:20px 10%;


    display:flex;

    justify-content:space-between;

    align-items:center;


    background:rgba(0,0,0,0.75);

    backdrop-filter:blur(15px);


    border-bottom:1px solid #c084fc;


    z-index:1000;

}



.logo{

    color:#e879f9;

    font-size:30px;

    font-weight:bold;

}



.navbar ul{

    display:flex;

    list-style:none;

    gap:25px;

}



.navbar a{

    text-decoration:none;

    color:white;

    transition:.3s;

}


.navbar a:hover{

    color:#e879f9;

}







/* HOME */


.home{

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;


    background:

    linear-gradient(
        rgba(0,0,0,0.55),
        rgba(0,0,0,0.55)
    ),
    url("images/agnes.png");


    background-size:cover;

    background-position:center;

}



.home h1{

    font-size:75px;

    color:#f0abfc;


    text-shadow:

    0 0 20px #a855f7;

}



.home h2{

    font-size:30px;

    margin:20px 0;

    color:#f5d0fe;

}



.home p{

    font-size:22px;

}



#typing{

    color:#e879f9;

    font-weight:bold;

}







/* BUTTONS */


.btn{

    display:inline-block;

    padding:15px 30px;

    margin:15px 5px;


    color:white;

    text-decoration:none;


    border-radius:30px;


    background:

    linear-gradient(
        45deg,
        #9333ea,
        #ec4899
    );


    box-shadow:

    0 0 20px #a855f7;


    transition:.4s;

}



.btn:hover{

    transform:translateY(-8px);

}



.second{

    background:transparent;

    border:2px solid #e879f9;

}







/* SOCIAL ICONS */


.social-icons{

    margin-top:25px;

}



.social-icons img{

    width:45px;

    height:45px;


    margin:10px;


    padding:8px;


    border-radius:50%;


    background:white;


    transition:.3s;

}



.social-icons img:hover{

    transform:scale(1.2);

    box-shadow:

    0 0 25px #e879f9;

}







/* SECTION */


section{

    padding:100px 10%;

}



.title{

    text-align:center;

    font-size:42px;

    margin-bottom:40px;


    color:#e879f9;


    text-shadow:

    0 0 15px #a855f7;

}







/* CARDS */


.about-card,
.card,
.contact-card,
.skill-box,
.timeline-box{


    background:

    rgba(255,255,255,0.10);


    backdrop-filter:blur(15px);


    border:1px solid #c084fc;


    border-radius:25px;


    padding:35px;


    box-shadow:

    0 0 30px rgba(168,85,247,.4);


    margin:20px 0;


}



.about-card p{

    font-size:18px;

    line-height:2;

}






/* TIMELINE */


.timeline{

    position:relative;

    max-width:800px;

    margin:auto;

}



.timeline:before{

    content:"";

    position:absolute;

    width:4px;

    background:#c084fc;

    top:0;

    bottom:0;

    left:50%;

}



.timeline-box{

    width:45%;

    position:relative;

}



.timeline-box:nth-child(even){

    margin-left:55%;

}



.timeline-box h2{

    color:#f0abfc;

}







/* SKILL BARS */


.skill-box h3{

    margin-top:25px;

}



.bar{

    width:100%;

    height:20px;


    background:#2e1065;


    border-radius:20px;


    overflow:hidden;

}



.bar div{

    height:100%;

    border-radius:20px;


    background:

    linear-gradient(
        90deg,
        #9333ea,
        #ec4899
    );


    text-align:right;


    padding-right:10px;


    animation:load 2s;

}




.html{

    width:90%;

}


.css{

    width:85%;

}



.js{

    width:75%;

}



.python{

    width:80%;

}





@keyframes load{


from{

width:0;

}


}





/* ACHIEVEMENT BOX */


.skills-container{


    display:grid;


    grid-template-columns:
    repeat(auto-fit,minmax(180px,1fr));


    gap:25px;

}



.skills-container div{


    padding:40px;


    text-align:center;


    font-size:22px;


    background:

    rgba(255,255,255,.1);


    border:1px solid #c084fc;


    border-radius:20px;


    transition:.3s;

}



.skills-container div:hover{

    transform:translateY(-10px);


    background:#9333ea;

}







/* FOOTER */


footer{

    text-align:center;

    padding:30px;


    background:rgba(0,0,0,.8);


    border-top:1px solid #c084fc;

}



footer h2{

    color:#e879f9;

}







/* MOBILE */


@media(max-width:768px){


.navbar{

    flex-direction:column;

}


.navbar ul{

    flex-wrap:wrap;

    justify-content:center;

    margin-top:15px;

}



.home h1{

    font-size:45px;

}



.home h2{

    font-size:22px;

}



.timeline:before{

    left:0;

}



.timeline-box,
.timeline-box:nth-child(even){

    width:90%;

    margin-left:30px;

}


}