html{
    scroll-behavior:  smooth ;
   
}


.padding {
    padding: 0.5rem;
}
.overflow{
    overflow-x: hidden;
}
a{
    text-decoration: none
}


.icon-con{
    border-radius: 50px;
    animation: blinking 1s reverse infinite ;
    width: 21vw;
    position: -webkit-sticky;
    margin: 0 auto;
    padding: 5px;
    position: sticky;
    z-index: 1;
    top: 40px;
    height: 60px;
    margin-bottom: 4rem;
    
}

.social-icons {
    background-color: rgba(191, 11, 11, 0.543);
    font-size: 2rem;
    color: white;
   
   
    text-align: center;
    width: 20vw;
   
    /* top: 40px; */
   
    border-radius: 50px;
   
  
 
}
@keyframes blinking {
    from{border: 2px solid rgb(247, 247, 247)} 
    50% { border:2px solid rgba(215, 42, 42, 0.421);box-shadow: 5px rgba(0, 0, 255, 0.401)}
    100% { border:2px solid rgba(215, 42, 42, 0.869);box-shadow: 5px rgba(0, 0, 255, 0.401);

    }
  }
.social-icons i{
    transition:  0.5s ease-in-out;
}

.social-icons i:hover{
        
    scale: 90%;
    transform: rotate(360deg);

}
.linear-background {
    background-image: linear-gradient( 359.5deg,  rgb(0, 0, 0) 50.9%, rgb(5, 33, 51), rgb(0, 0, 0) 158.1% );
        animation: gradient 15s ease infinite reverse;
        background-repeat: no-repeat;
    height: 100%;
  
}


canvas {
    display: block;
   
  }
  
  
  #particles-js {
    position:fixed;
    width: 100%;
    height:100%;
    z-index: -1;
  }

.head-text {
    animation: colorChange 10s infinite ease-in-out reverse;
}

@keyframes colorChange {
    0% {
        color: rgb(174, 253, 209);
    }

    25% {
        color: rgb(63, 231, 161);
    }

    50% {
        color: rgb(228, 192, 134);
    }

    75% {
        color: rgb(41, 192, 212);
    }

    95% {
        color: rgba(212, 169, 252, 0.956);
    }
}

.indent {
    text-indent: 40px;
    line-height: 3rem;
}
.project-des{
    /* position:absolute; */
    /* background-color:rgba(111, 4, 4, 0.485); */
    bottom: 0%;
    left: 0;
    padding:20px ;
    font-size: 20px;
    text-decoration: none;
    width: 100%;
    
}

.project-con{
    display: flex;
  flex-wrap: wrap;
}

@media  (min-width: 350px) and (max-width:950px) {
   
    .icon-con{
        border-radius: 50px;
        animation: blinking 1s reverse infinite ;
        width: 100%;
        position: -webkit-sticky;
        margin: 0 auto;
        padding: 5px;
        position: sticky;
        position: -webkit-sticky;
        z-index: 1;
        top: 40px;
        margin-bottom: 4rem;
        
    }
    .social-icons {
        
        width: 100%;
        
    }
    .project-con{
        justify-content: center;
        margin: 0 auto;
       align-self: center;
    }
    .project-con img{
        width: 200%;
        height: 300%;
    }
    .project-item{
        width: 100% !important;
       
        
    }
 
    .pro-attr{
        display: flex;
        padding: 4px;
        font-size: 2vw !important;
        margin-left: 10%;
        
    }

    .project-des{
        text-align: left;
        display: flex;
        padding:5px ;
        font-size: 4vw; 
        text-decoration: none;
        width: 100%;
        height: 100%;
        
    }
    .display{
        display: block !important;
    }
    .display img{
       width: 100% !important;
    }
    
}


.pro-attr{
    display: flex;
    padding: 2px;
    font-size: 15px;
    color: red;
}
.pro-attr li{
    margin-left: 30px;
    list-style: none;
}

.project-item{
    width: 45%;
    overflow: hidden;
    position: relative;
    margin: 20px;
    
}



.w3-hover-grayscale :hover img
{
    scale: 120%;
   
}

.display{
    display: flex;
    background-color: #17182fa1;
    padding: 30px;
    justify-content: space-evenly;
}
.date-time{
 color: skyblue 
}
.side {
    background-color:rgba(0, 0, 0, 0) !important;
    
    width: 900px;
}

nav img {
   margin-top: 80px;
   
}
nav a:hover{
    
scale: 120%;
background-color: brown !important;
margin-top: 20px;
position: relative;
margin-bottom: 20px;
}

nav a{
    text-decoration: none;
    transition: 0.5s ease-in-out;
}