*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: "Baskervville SC", serif;

}
#container{
    width: 100%;
    height: 100vh;
    position:relative ;
}
nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 100px;
}
.logo{
    width: 200px;
}
.list-items{
    list-style: none;
    display: inline;
    margin: 0px 20px;
}
.links{
    text-decoration: none;
    font-weight: 600;
    color: black;
}
.links:hover{
    text-decoration: underline;
    color: blue;
}
.home-content{
    margin: 13% 0px 0px 8%;
}
#username{
    font-size:  50px; 
    margin-bottom: 20px;
}
#lname{
    color: brown;
}
#user-details{
    line-height: 1.2;
}
#download{
    text-decoration: none;
    background-color: black;
    color: white;
    padding: 10px;
    border-radius: 10px;
    display: inline-block;
    margin-top: 30px;
}
.home-img{
    width: 45%;
    height: 75%;
    position: absolute;
    right: 30px;
    bottom: 0px;
}
.group1{
    position: absolute;
    height: 100%;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    transition: bottom 2s, left 1s;

}
.home-img:hover #shape{
    bottom: 70px;
}
.home-img:hover #girl{
    left: 40%;
}
#about{
    margin: 15% 8% 0% 8%;
}
.section-head{
    text-align: center;
}
.head{
    font-size: 30px;
}
.sub-head{
    font-size: 20px;
    color: brown;
}
.about-body{
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    align-items: center;
}
.about-img>img{
    width: 90%;
}
.about-content{
    font-size: 20px;
    text-align: justify;
}
.information{
    margin-top: 1.3rem;
}
.info-box{
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.info-box>span{
    margin-left: 1rem;
}
#skill{
    margin: 8% 8% 0px 8%;
}
.skill-contents{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 2rem;
    margin-top: 50px;
    align-items: center;

}
.myskill{
    width: 100%;
}
.bars{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1rem 0px;
}
.bar-head,.bar-percent{
    font-weight: 500;
    font-size: 1.2rem;
}
.base-bar{
    background-color: black;
    height: 0.5rem;
    width: 100%;
    border-radius: 10px;
    position: absolute;
    bottom: 0px;
}
.html-bar{
    background-color: orange;
    width: 89%;
}
.css-bar{
    background-color: orange;
    width: 82%;
}
.js-bar{
    background-color: orange;
    width: 79%;
}
.react-bar{
    background-color: orange;
    width: 85%;
}
#contact{
    margin: 8%;
}
.icon-collections{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5%;
}
.icon{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    /* border: solid 1px; */
    display: flex;justify-content: center;
    align-items: center;
}
.icon:hover{
    background-image: linear-gradient(to bottom right, blue,black,red,yellow);
}
.brands{
    color: black;
    font-size: 30px;
}
.icon:hover .brands{
    color: white;
    animation: rotate 3s;
}
@keyframes rotate{
    0%{
        transform: rotate(30deg);
    }
    20%{
        transform: rotate(-30deg);
    }
    40%{
        transform: rotate(30deg);
    }
    60%{
        transform: rotate(-30deg);
    }
    80%{
        transform: rotate(30deg);
    }
    100%{
        transform: rotate(-30deg);
    }
}
/* footer{
    margin: 8%;
} */
#copyright{
    text-align: center;
    font-weight: 600;
}
.up-arrow{
    float: right;
    margin: -40px 30px 30px 0px;
}
html{
    scroll-behavior: smooth;
}
::-webkit-scrollbar{
    width: 10px;
    border-radius: 10px;
}
::-webkit-scrollbar-track{
    background-color: azure;
}
::-webkit-scrollbar-thumb{
    background-color:rgb(241, 241, 47);
    border-radius: 10px;
}