body{
    font-size: 35px;
    text-align: center;
    background-image: url("http://www.inside4tech.com/wp-content/uploads/2018/12/01-1024x637.jpg");
    background-repeat:no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    padding-bottom: 8%;
    font-family: 'Underdog', cursive;
    width: auto;
    overflow-x: hidden;
}
.nav{
    width: 100%;
    text-align: center;
    padding: 20px;
    position: sticky;
    top: 0;
}
.li{
   display: inline-block;
   padding: 10px;
   background: rgba(0, 255, 128,1);
   border-radius: 50px;
   padding: 20px;
   box-shadow: 0px 2px 5px 4px gray ;
}
li{
    padding: 10px;
    background: khaki;
    border-radius: 50px;
    padding: 20px;
    box-shadow: 0px 2px 5px 4px gray ;
    margin-top: 2%; 
}

.text{
    padding: 20px;
    background: rgb(10,10,10);
    background: rgba(50,50,50,0.5);
    color: rgb(240, 222, 140);
    padding-bottom: 15%;
    margin-top: 0;
    margin-bottom: 0;
}
.ic{
    font-size: 65px;
    color: skyblue;
    padding: 20px;
}
.ic:hover{
    font-size: 70px;
    color: khaki;
}
.icon{
    background-color: rgba(50,50,50,0.5);
}
.about,.about1{
    display: flex;
    justify-content: space-around;
}
#about{
    background: rgb(10,10,10);
    background: rgba(50,50,50,0.5);
    padding: 30px;
}
#education,#skills,#hobbies,#soft{
    padding: 20px;
    border: transparent 10px;
}
#education{
    border-radius: 5% 20%;
}
#skills{
    border-radius: 20% 5%;
}
#hobbies{
    border-radius: 5% 20%;
}
#soft{
    border-radius: 20% 5%;
}
h2{
    padding: 10px;
    background: khaki;
    border-radius: 50px;
    padding: 20px;
    box-shadow: 0px 2px 5px 4px gray ;
    margin-top: 2%; 
}
h3{
    padding: 10px;
    background:white;
    border-radius: 50px;
    padding: 20px;
    box-shadow: 0px 2px 5px 4px gray ;
    margin-top: 2%; 
}
#pr{
    animation-name: badi;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: -2s;
    color:black;
}
@keyframes badi {
    0%{background-color:pink;}
    10%{background-color:skyblue;}
    15%{background-color:skyblue;}
    20%{background-color:yellowgreen;}
    40%{background-color: chartreuse;}
    60%{background-color: cyan;}
    70%{background-color:yellow;}
    80%{background-color:pink;}
    100%{background-color: khaki;}
}
#projects{
    display: flex;
    justify-content: space-around;
}
#ul{
    animation-name: ul;
    animation-duration: 1.5s;
    animation-direction: alternate-reverse;
    animation-timing-function: ease;
}
@keyframes ul {
    0%   {padding: 0;}
    50%  {padding-right: 45%;}
    75%  {padding:0%;}
    100% {padding-left:45%;}
}
button{
    padding: 10px;
    font-size: 20px;
    color: brown;
    border-radius: 25px;
}
button:hover{
    background-color: red;
    color: white;
}