*{

    /* background: #eceaea; */
    margin: 0;
    padding:0;
    box-sizing: border-box;
    margin-bottom: 2vh;
    font-size:2.5vh;
}

body{

    display: flex;
    flex-direction: column;
    align-items: center;
    background:rgb(242, 241, 243);
    min-height: 100vh;
    overflow-x: hidden;
    width: 100vw;
}
#root{
    overflow-x: hidden;  

}
.header-container{

    display: flex;
    flex-direction: row-reverse;
    justify-content: space-around;
    align-items: center;
    background:rgb(80, 4, 151);
    height:80vh;
    width: 80vw;
    border-radius: 1vh;
    margin-top: 4vh;
    margin-left: 9vw;
    box-shadow: 2vh 2vh 1em 1em rgb(173, 173, 173);
}

.profile-photo{
    visibility:visible;
    width:20vw;
}
.text-heading{

    width:40vw;
}
.main-heading{
    color: #f9fcfb;
    font-size: 5vh;
}
.icon
{
    position: relative;
    margin:auto;
    margin-right: 3vh;
    width:5vh;
    height:5vh;
    border-radius: 50%;
    background: #f9fafa;
    border: 2px solid #7e7b7b;
    
    overflow: hidden;
}

.icon::after
{
    content: "";
    position: absolute;
    background: #616161;
    width: 7vh;
    height:7vh;
    top:-7vh;
    transition: transform 1s;
}
.icon:nth-child(1)::after
{

    background: #f41c8f;  
}
.icon:nth-child(2)::after
{

    background: #151515;  
}
.icon:nth-child(3)::after
{

    background: #11117e;  
}
.icon:nth-child(4)::after
{

    background: #1c96f4;  
}
.icon:nth-child(5)::after
{

    background: #f31313;  
}
.icon .icon-i{
    position: absolute;
    font-size:3vh;
    margin:auto;
    top:.8vh;
    left:.8vh;
    color:#0f0f0f;
    z-index: 2;

}
.icon:hover  .icon-i:hover
{
    color:#ffffff;
    transform: rotateZ(360deg);
    transition: 2s;
}
 .icon:hover::after 
{

   transform: translateY(7vh);
}

.social-links{
    display: flex;
    flex-direction: row;
    align-items: center;
    height:5vh;
    width:27vw;
    margin-bottom: 0;
    z-index: 2;
    margin-top: 10vh;
}

.about{
    background:rgb(245, 244, 244);
    display: flex;
    flex-direction: column;
    font-size: 2vh;
    min-height:30vh;
    margin-top: 20vh;
    width: 100%;
  
}
.skills{

    display: flex;
    flex-direction:row;
    justify-content: space-around;
    align-items: center;
    width: 100vw;
    min-height:60vh;
    margin:5vh 2vw 0vh 0vw;

}
.skills-img{

    display: flex;
    flex-wrap: wrap;
    width: 45vw;
    min-height: 20vh;
    
}
.cards{

    filter: drop-shadow(1vh 1vh 1em #8b8b8b);
    transition: 1s;
}
.cards img{
    width: 36px;
    height: 36px;
    object-fit: contain;
}
.skills-img:hover .cards:not(:hover)
{
    filter:brightness(.5);
    transition: 2s;
}
.skills:hover .cards:hover
{
    filter:brightness(1);
    transform: scale(110%);
    transition: 1s;
}
.skills-head{

    margin-right: 6vw;
}
.skills-heading{

    font-size: 10vh;
    margin-left:5vw;
}

.project-conatiner{

    min-height: 30vh;
    width: 100vw;
    padding-top: 10vh;
    margin-top: 10vh;
    width: 100vw;
   
}
.proj-head{

    font-size: 10vh;
    margin-left: 5vw;
    margin-bottom: 3vh;
}
.project-card-container{

    display:flex;
    flex-direction: column;
    margin-right: 2vw;
}
.project-card{

    display: flex;
    flex-direction:row;
    background: #ffffff;
    align-items: center;
    margin: 2vw auto;
    border-radius: 2vh;
    padding: 3vh;
    width: calc(100% - 8vw);
    max-width: 950px;
    box-sizing: border-box;
    gap: 4vw;

}
.project-name{

    font-size: 5vh;
    margin-bottom: 7vh;
    
} 
.desc-project{
    font-size: 2.5vh;
}
.snapshots{

    flex: 1;
    max-width: 400px;
    height: 280px;
    border-radius: 1.5vh;
    overflow: hidden;
    background-color: #f1f5f9;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.snapshots img{

    width: 100%;
    height: 100%;
    object-fit: cover;
}
.project-card  a{

    align-self: flex-end;
}
.project-card  a button{

    margin-top: 4vh;
    margin-right: 10vw;
    
}
.education{

    display: flex;
    flex-direction: column;
}
.contact{
    display: flex;
    flex-direction: column;
}
.contact-header{

    font-size: 3vh;
}
.contact-container{

    display: flex;
    justify-content: space-between;
    
}
.form-header{

    display: flex;
    flex-direction: column;
}

.hidden{
    visibility: hidden;
}