body{
    margin: 0;
    text-align: center;
}
.top-container{
  
    background-image: linear-gradient(#a8c5f5, white);

}

.inside-htmlcode{
    text-align:left;
    background-color: #eee;
    border: 1px solid #999;
    display: block;
    padding: 20px;
}

.profile-desc{
    width: 70%;
    margin : 0 auto 0 auto;
}
.web-heading{
    font-size: 60px;
    padding-top: 80px;
    margin-top: 0%;
    font-weight:5;
    color: rgb(2, 0, 119);
    font-family: 'Sacramento', cursive;
}

.Education
{
    padding: 30px;
}

.Edu-head{
    padding-bottom: 0%;
}
.edu-desc{
    width: 70%;
    margin : 0 auto 0 auto;
}




p{
    font-family: 'Play', sans-serif;
 
}


.main:hover {

    animation-name: rot;
    animation-duration: 3s;
    animation-iteration-count: 5;
}
@keyframes rot
{
    from{
      border-radius:0px ;
      background-color: 	#00c7ff;
    }
    to{
      border-radius: 150px; 
      background-color: 	#00c7ff;   
    }
}
.web-heading{
    animation-name: droping;
    animation-duration: 2s;
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-iteration-count: 1;
   
}

@keyframes droping{
    from{
       opacity: 0%;
    }
    to{
        opacity: 100%;
    }
}

.project-heading{
padding-bottom: 0%;
}


.Resume{
    padding: 30px;
}
.resume-head{
    padding-bottom: 0%;
}
.resume-desc{
    width: 50%;
    margin : 0 auto 0 auto;
}

.contact-desc{
    width: 50%;
    margin : 0 auto 0 auto;
}
.resume-down{
    text-decoration: none;
    color: rgb(64, 243, 234);
    font-size: larger;
    font-family: 'Play', sans-serif;
    width: 50%;
    
}

.linkedin:hover{
    opacity: 50%;
}
.gmail:hover
{
    opacity: 50%;
}
.github:hover{
    opacity: 50%;
}
pre code {
    text-align:left;
    background-color: #eee;
    border: 1px solid #999;
    display: block;
    padding: 20px;
  }
.get-touch{
      padding-top: 15px;
      padding-bottom: 0%;
  }
h2,h3{
    padding-bottom: 30px;
    font-family: 'Trispace', sans-serif;
    color: rgb(63, 205, 248);
}
.profile-photo{
    box-shadow: 8px 8px 8px rgb(77, 77, 77);
    border-radius: 250px;
   
}
.footer-link{
    padding-right: 10px;
}
.copyright{
    font-size: 13px;
    letter-spacing: 4px;
}
.html-code{
    width: 50px;
    height: 50px;
   
   
   margin-top: 60px;
    box-shadow: 8px 8px 8px rgb(77, 77, 77);
    border-radius: 10px;
}
.html-code:hover{
 opacity: 50%;
}
.imageHolder {
   
    position: relative;
    width: 285px;
    height: 175px;
    
  }
  .imageHolder .caption1 {
    position: absolute;
    width: 120%;
    height: 30%;
    bottom: 0px;
    left: 0%;
    color: rgb(2, 0, 119);
   background-image: linear-gradient(to right, 	#a8c5f5, white);
    text-align:center;
    font-weight:bold;
    opacity: .8;
    font-size: 85%;
  }
  .imageHolder .caption2 {
    position: absolute;
    width: 120%;
    height: 30%;
    bottom: 0px;
    right: 0%;
    color: rgb(2, 0, 119);
   background-image: linear-gradient(to left, 	#a8c5f5, white);
    text-align:center;
    font-weight:bold;
    opacity: .8;
    font-size: 85%;
  }

.fig{
    display: flex;
    
}
.css-code:hover{
    opacity: 50%;   
}
.css-code
{
    width: 50px;
    height: 50px;
    margin-top: 60px;
    box-shadow: 8px 8px 8px rgb(77, 77, 77);
    border-radius: 10px;
}



.Project{
    padding: 30px;  
}

.bottom-container{
    
    background-image: linear-gradient(to top, #a8c5f5, white);
   padding-bottom: 40px;
  
}
.skills{
    padding: 30px;
}
.skills-head{
    padding-bottom: 0%;
}

hr{
    border-style: dotted;
    width: 5%;
    border-width:6px;
    border-top: none;
    color: #999;
}

.resume-down:hover{
    color: cornflowerblue;
}

.main{
    box-shadow: 8px 8px 8px rgb(77, 77, 77);
    border-radius: 150px;
}

.education-img{
    box-shadow: 8px 8px 8px rgb(77, 77, 77);
    border-radius: 250px;
}

.skills-image{
    box-shadow: 8px 8px 8px rgb(77, 77, 77);
    border-radius: 200px;
}

.project-img{
    box-shadow: 8px 8px 8px rgb(77, 77, 77);
    border-radius: 200px;
}

.resume-image
{
    box-shadow: 8px 8px 8px rgb(77, 77, 77);
    border-radius: 200px;
}

.linkedin{
    box-shadow: 8px 8px 8px rgb(77, 77, 77);
    border-radius: 250px;
}

.gmail{
    box-shadow: 8px 8px 8px rgb(77, 77, 77);
    border-radius: 250px;
}

.github{
    box-shadow: 8px 8px 8px rgb(77, 77, 77);
    border-radius: 250px;
}

.profile{

    padding: 30px;
}