*{
    margin: 0px;
    padding: 0px;
}



body{


background-image: linear-gradient(180deg,lightgreen,lightgrey,lightgreen);
background-size: 400% 400%;
width: 100%;
height: 100vh;
 animation: bg-animation 10s ease infinite;
}
@keyframes bg-animation {

0%{ background-position: 0 50%;}

0%{background-position: 100 50%;}

0%{background-position: 0 50%;}

}

.maintext{

    display: flex;
    color:green;
    transition: 10s;
    animation: typing 2s steps(18);
}
    
 .text{
display: inline-block;
 }
.nexttext{
    color:green;
}
.name:hover{

text-shadow: 2px 2px 4px #948f8f;

}

.portfolio{


display: flex;
margin: 10px;
font-family:sans-serif;
font-size: 40px;

}

.port{

    color: white;
}

.port:hover{

color: black;
transition-duration: 2s;
cursor: pointer;
}

.menu{
    margin: 10px;
    padding: 10px;
    height: 20px;
    width: 400px;
    margin-left: 800px;
    text-align:center;
    color: red !important;
    background-color:transparent;
    border: 3px solid white;
    border-radius: 10px;
    font-size: 20px;
    text-decoration: none;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;


}
.menu a{

    color: white;
    text-decoration: none;
    background: transparent;
    margin: 0 10px;
}

.menu a:hover{

    color: black;
    cursor: pointer;
}

.text{
height: 300px;
width: 600px;
color: rgb(255, 255, 255);
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 20px;
margin-left: 100px;
margin-top: 100px;


}

.img-box{
    height: 400px;
    width: 400px;
    margin-left: 100px;
    overflow: hidden;
 /* background-color: #948f8f; */
 cursor: pointer;

display: flex;
justify-content: center;
align-items: center;

}

.pic{

    display: block;
    height: 400px;
    width: 400px;
    transition: all ease 1s ;
}

.img-box:hover img{

}



.alpesh{

display: flex;

}


.facebook{

    height: 50px;
    width: 50px;
    margin-left: 200px;
    transition-duration: 0.5s;
}

.facebook:hover{

    height: 55px;
    width: 55px;
    margin-top: -20px;

}

.app{

    margin-bottom: 50px;
    margin-left: 100px;
    display: flex;
    align-items: right;

}

.whatsap{

height: 60px;
width: 60px;
margin-left: 100px;
transition-duration: 0.5s;

}

.whatsap:hover{

    height: 65px;
    width: 65px;
    margin-top: -20px;
}


.skype{

height: 50px;
width: 50px;
margin-left: 100px;
transition-duration: 0.5s;

}

.skype:hover{

    height: 55px;
    width: 55px;
    margin-top: -20px;
}

.linkedin{

height: 50px;
width: 50px;
margin-left: 100px;
transition-duration: 0.5s;

}

.linkedin:hover{
    height: 55px;
    width: 55px;
    margin-top: -20px;
}

.instagram{

    height: 55px;
width: 55px;
margin-left: 100px;
transition-duration: 0.5s;
}

.instagram:hover{

    height: 60px;
    width: 60px;
    margin-top: -20px;
}

.dawnload{

    text-align: left;
    font-size: 30px;
    font-family:Arial, Helvetica, sans-serif;
    margin-right: 50px;
    text-decoration: none;
    margin-top: 100px;
    animation-name: blink;
    animation-duration:2s;
    animation-iteration-count: infinite;
}

@keyframes blink {

    From{color:white;}
    to{color: black;}

}

.dawnload:hover{

    text-shadow: 4px 4px 8px #948f8f;
    color: white;

}
@media(max-width:500px){


    .portfolio{
font-size: 30px;
padding: 10px;
}

.menu{
    padding: 10px;
    height: 8px;
    width: 230px;
    margin-left: 150px;
    font-size: 10px;
    text-align: left;
    display: flex;
   
}

.pic{

margin-top: 50px;
height: 250px;
width: 250px;
margin-left: 80px;
}

.text{
height: 150px;
width: 300px;
font-size: 15px;
text-align:left;
margin-left: 80px;
margin-top: 50px;


}

.alpesh{

display:block;

}

.dawnload{

font-size: 25px;
text-align: center;
margin-top: 50px;
margin-left: 120px;
}
.app{

margin-bottom: 50px;
margin-left: 15px;
margin-top: 50px;
display: block;
align-items: left;

}
.facebook{

    margin-top: 30px;
height: 25px;
width: 25px;
margin-left: 20px;


}

.whatsap{

height: 30px;
width: 30px;
margin-left: 25px;

}

.skype{

height: 28px;
width: 28px;
margin-left: 25px;

}

.linkedin{

height: 28px;
width: 28px;
margin-left: 30px;

}

.instagram{

height: 28px;
width: 28px;
margin-left: 30px;
}

}

#preloder{
background-size: 100%;
margin-top: -20px;
background-repeat: no-repeat;
background-position: center center;
position: fixed;
height: 100%;
width: 100%;
z-index: 99999999;
}

.main{

    height: 100vh;
    display: flex;
    align-items: center;
    background-image: linear-gradient(to bottom ,lightgreen,white);
    justify-content: center;
} 

.loader{

    height: 200px;
    width: 200px;
    border: 10px solid white;
    border-radius: 50%;
    border-right-color:black;
    animation: spin 1s ease infinite;

}
@keyframes spin {

    100%{
        transform: rotate(360deg);
    }  
}