* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'jost', Helvetica, sans-serif;
text-decoration: none;
font-weight: 400;
list-style-type: none;
outline: none;

}
/* animations */
@-webkit-keyframes Backgroundeffect {
    0%{background-position:18% 0%}
    50%{background-position:83% 100%}
    100%{background-position:18% 0%}
}
@keyframes Backgroundeffect {
    0%{background-position:18% 0%}
    50%{background-position:83% 100%}
    100%{background-position:18% 0%}
}
@keyframes slide {
    0% {
      transform:translateX(-25%);
    }
    100% {
      transform:translateX(25%);
    }
  } 
@keyframes glowing-button-85 {
    0% {
      background-position: 0 0;
    }
    50% {
      background-position: 400% 0;
    }
    100% {
      background-position: 0 0;
    }
  }


  @keyframes animatefootertitle {
    0% {
      background-position: -500%;
    }
    100% {
      background-position: 500%;
    }
  }
/* End of animations */


/* section1 */
.section1 {
    width: 100%;
    height: 100vh;
    background: linear-gradient(325deg, #c51bd7, #434cce, #29d9cb, #f0d711, #ee1975);
    background-size: 1000% 1000%;
    -webkit-animation: Backgroundeffect 10s ease infinite;
    animation: Backgroundeffect 10s ease infinite;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.sectionslice{
    position: absolute;
    width: 100px;
    height: 100px;
    border-bottom: 100vh solid rgb(255, 255, 255);
    border-left: 100vw solid transparent;
    
}

.webdeveloper, .ashik {
    text-align: center;
    font-weight: 500;
    /* font-size: vw; */
    color: white;
    background-color: black;
    padding: 0 2rem;
    margin-bottom: 20px;
    transform: skew(-10deg);
    letter-spacing: 2px;
    text-transform: uppercase;
}
.ashik {
    font-weight: 400 !important;
    /* transform: skew(10deg) !important; */
}
.img {
  
    width: 20vw;
    border-radius: 50%;
    border: 4px solid rgb(164, 83, 231);
    margin-bottom: 20px;
    z-index: 2;
    user-select: none;
}
@media (max-width: 1080px) {
  .img{
    width: 30vw;
  }
}
.project{ 
    font-weight: 300;
    transform: skew(-10deg);
    padding: 0 2rem;
    color: black;
    background-color: white;
    text-transform: capitalize;
    border: 3px solid black;
}

 /* End of section1  */
 
 /* ------------------------ */
 .Title{
  font-weight: 700;
  font-size: xx-large;
  text-align: center;
 }

 /* section 2 */

 .section2{
  width: 100%;
  position: relative;
}
  /* navbar */
.topbar{
    width: 100%;
    height: 2.5rem;
    padding: 3px;
    background-color: #b314e4;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly !important; 
    align-items: center;
    position: sticky;
    top: 0px;
    
}
.topbar > a {
    color: rgb(255, 255, 255);
    transition: 0.5s;
}
.topbar > a:nth-child(1) {
    color: black; 
    border-bottom: 2px solid black ;
}
.topbar > a:hover{
    color: black;
    border-bottom: 2px solid black ;
}
.navbutton{
  display: none;

}



 /* cards  */
 .skills{
  min-height: 100vh;
  padding-top: 20px;
 }
 
 .professional > h2, .personal > h2{
  padding: 2px 20px;
  font-weight: 600;
 }
 .professional, .personal{
  padding: 5px;
  margin: 5px 10px; 
  border: 1px  black;
  margin-bottom: 30px;
  border-radius: 4px;
  transition-duration: 0.5s;
}
.professional:hover {
  box-shadow: 0px 0px 6px rgb(212, 68, 200);
}
.personal:hover {
  box-shadow: 0px 0px 6px rgb(212, 68, 200);
}

 .professionalSkills{
  width: 100%;
  padding: 20px;
  height: auto;
  display: flex;
  justify-content: space-evenly;
  align-content: center;
  flex-wrap: wrap;
  gap: 25px;
 }


 
 .minicards{
  text-align: center;
  min-width: 100px;
  width: fit-content;
  padding: 9px;
  border: 1px solid rgb(44, 44, 44);
  color: #ce9879e5;
  background-color: #e2e2e2 0.5;
  border-radius: 5px;
  user-select: none;
  box-shadow: 0px 2px 5px rgb(126, 126, 126);
  transition-duration: 0.2s;
 }

 .minicards:hover{
  background-color: #dad6d6;
  color: #000000;
  cursor: default;
  box-shadow: 0px 0px rgb(255, 255, 255);
 }

 /* End of section2 */

/* Section 3 Hobbies */
.section3{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-top: 1px solid #7a00ff;
  padding: 30px 2px;
}

.hobbies{
  width: 100%;
  min-height: 100vh;
  height: auto;
  padding: 1% 7% ;
  display: grid;
  justify-content: center;
  align-items: center;
  gap: 10px;
  grid-template-columns: 33% 33% 33%;
  grid-auto-rows: minmax(250px, auto);
  grid-template-areas:  "et et marvel"
                        "wb mc marvel"
                        "wb mc yt"
                        "c c c";
}

.grid{
  height: 100%;
  border: 1px solid black; 
  border-radius: 5px;

  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  transition: 0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid1{
  grid-area: et;
  background-image: url(https://globalcomputers.pk/wp-content/uploads/2021/07/Perks-Of-Having-A-Custom-Gaming-PC.jpeg);
}

.grid2{
  grid-area: marvel ;
  background-image: url(https://wallpaperaccess.com/full/5327862.jpg) ;
}
.grid3{
  grid-area: mc;
  background-image: url(https://i.annihil.us/u/prod/marvel/i/mg/c/10/4bab8ba85337b/portrait_uncanny.jpg);
}

.grid4{
  grid-area: wb;
  background-image: url(https://images.wallpaperscraft.com/image/single/code_programming_symbols_147674_168x300.jpg);
}
.grid5{
  grid-area: c;
  background-image: url(https://images.ctfassets.net/3s5io6mnxfqz/wfAz3zUBbrcf1eSMLZi8u/c03ac28c778813bd72373644ee8b8b02/AdobeStock_364059453.jpeg);
}
.grid6{
  grid-area: yt;
  overflow: hidden;
}

.grid:hover{
  background-size: 110%;
}

.gridContent{
  color: #000;
  text-align: center;
  width: 100%;
  height: auto;
  margin: 2%;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 5px ;
  
}
.gridContent > h1{
  font-weight: 900 ;
  opacity: 1;
}

@media (max-width: 1080px) {
  .hobbies{
    
  grid-auto-rows: minmax(125px, auto);
  }
}
















/* End of section3 */

 /* section 4  */
 .section4{
  text-align: center;
  border-top: 1px solid #7a00ff;
  padding: 30px 5px;
 }
 .qualification{
  width: 100%;
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
 }

 .eq{
  padding: 20px;
  width: 520px;
  height: 350px;
  flex-basis: 45%;
  border: 1px solid black;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 10px;
  border-radius: 5px;
  background-image: url(https://content.jdmagicbox.com/comp/coimbatore/dc/0422px422.x422.1235285842y2e5c7.dc/catalogue/sri-p-mallaiyan-matric-hr-sec-school-madukkarai-coimbatore-schools-41pahix.jpg?clr=442244);


  background-repeat: no-repeat ;
  background-position: center;
  background-size: 110%;
  transition: 0.4s;
 }
 @media (max-width:720px){
  .eq {
    flex-direction: column;
    margin: 2%;
    flex-basis: 100%;
  }
 }


 .eq:nth-child(3){
  background-image: url(https://cache.careers360.mobi/media/presets/720X480/colleges/social-media/media-gallery/7415/2021/3/17/College%20Building%20View%20of%20VLB%20Janakiammal%20College%20of%20Arts%20and%20Science%20Coimbatore_Campus-View.jpg) !important;
 }
 .eq:hover{
  
 background-size: 120%;
 
 }
 .educationalInstitute{
  display: flex;
  flex-basis: 60%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 90%;
  text-align: center;
  padding: 10px;
  background-color: rgb(255, 255, 255, 0.85) ;
  border-radius: 10px;
 }
 .educationalInstitute > h1{
  padding-bottom: 10px;
  margin-bottom: 20px; 
  border-bottom: 2px solid black;
  
 }  
.score{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 25%;
  flex-basis: 40%;
  height: 150px;
  font-size: 1.8rem;
  font-weight: 600;
  text-align: center;
  color: #ffffff;
  text-shadow: 0px 1px 5px  rgb(54, 54, 54),
                1px 0px black,
                0px -1px black,
                -1px 0px black ;
}

/* End of section4  */


 /* Form  */
  .bg {
    animation:slide 3s ease-in-out infinite alternate;
    background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
    /* background-image: linear-gradient(-60deg, rgb(213, 78, 240) 50%,
                                               rgb(186, 5, 231) 50%
                                               ); */
    bottom:0;
    left:-50%;
    opacity:.5;
    position:absolute;
    right:-50%;
    top:0;
    z-index:-1;
  }
  .bg2 {
    animation-direction:alternate-reverse;
    animation-duration:4s;
  }
  .bg3 {
    animation-duration:5s;
  }
  .Hireform{
    width: 100%; 
    padding: 5%;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }

 .contactform{
    min-width: 480px;
    width: 50vw;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 5px;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border-radius: 0.2vmax ;
  }
  .contactform > h3{
    text-align: left;
    margin-left: 5px;
  }
 .contactform > input , textarea {
    border: none;
    outline: none;
    padding: 0.3vmax;
    padding-left: 20px;
    border-radius: 5px;
  }
 .formbutton {
    align-self: center;
    margin-top: 10px;
    margin-bottom: 10px;
    position: relative;
    padding: 0.6em 2em;
    border-radius: 4px;
    border: none;
  }

  
  .formbutton:hover {
    align-self: center;
    margin-top: 10px;
  padding: 0.6em 2em;
  border: none;
  outline: none;
  color: rgb(0, 0, 0);
  background: rgb(255, 255, 255);
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 4px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.formbutton:before {
  content: "";
  background: linear-gradient(
    45deg,
    #ff0000,
    #ff7300,
    #fffb00,
    #48ff00,
    #00ffd5,
    #002bff,
    #7a00ff,
    #ff00c8,
    #ff0000
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing-button-85 20s linear infinite;
  transition: opacity 0.3s ease-in-out;
  border-radius: 4px;
  }

  .formbutton:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 255);
  left: 0;
  top: 0;
  border-radius: 4px;
  }
  /* End of form  */

  /* footer  */
  .footercontainer{
    background-color: rgb(37, 37, 37);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: row;
    padding: 15px;
    
  }
  .footertitle {
    flex-basis: 25%;
    text-align: center;
    text-transform: uppercase;
    font-size: 2em;
    letter-spacing: 4px;
    overflow: hidden;
    /* background: linear-gradient(60deg, #000, rgb(238, 215, 12), #000); */
    background: linear-gradient(60deg, #000, rgb(245, 224, 39), #000);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animatefootertitle 3s linear infinite;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(255, 255, 255, 0);
  }


.contactinfo , .credits, .socialmedia {
  color: #e2e2e2;
  /* flex-basis: 25%; */
}
.socialmedia{
  flex-basis: 25%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  font-size: 25px;
  flex-direction: column;
  gap: 10px;
}
.socialmedia > div{
  text-align: center;
  padding: 2%;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

i{
  border-radius: 50%;
  transition-duration: 0.3s;
}
i:hover{
box-shadow: 0px 0px 10px rgb(245, 5, 225);
text-shadow: 0px 0px 10px rgb(253, 10, 201);
cursor: pointer;
}
.gmaillink, .creditslink {
  color: #31bcd4 !important;
}
  .footerfoot{
    padding: 10px;
    text-align: center;
    color: #bdbbbb;
    background-color: black;
  }

  /* ------------------  */