@import url(//db.onlinewebfonts.com/c/88f10bf18a36407ef36bf30bc25a3618?family=Suisse+Intl);

*{
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}


body {
   background: linear-gradient(-45deg, #edc481, #ede7de, #e19519, #806b48);
   background-size: 400% 400%;
   animation: gradient 15s ease infinite;
   min-height: 100vh;
   font-family: 'Suisseintl', 'sans-serif';
   color: #0d0d0d;
   margin: 0 auto;
}

@keyframes gradient {
   0% {
      background-position: 0% 50%;
   }

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

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

.container{
   max-width: 1000px;
   display: flex ;
   justify-content: space-between;
   margin: 0 auto;
   align-items: center;
}

main .container{
   
   max-width: 1000px;
   
}

header, main{
   padding: 50px 0;
}

.left{
   width: 700px;
}

h1{
   font-size: 3rem;
}

i{
   color: #0d0d0d;
   font-size: 1.2rem;
   margin-right: 20px;
}

i:hover{
   color: #0d0d0d71;
}


.logo{
   font-weight: bold;
   font-size: 3rem;
}

p{
   font-size: 1.5rem;
   max-width: 600px;
}

.first_para{
   margin-top: 20px;
}

.second_para{
   margin-top: 20px;
}

a{
   color: #0d0d0d;
   font-size: 1.3rem;
   text-decoration: none;
}

a:hover{
   text-decoration: underline;
}

.link_box   {
   margin-top: 10px; 
}


h6{
   text-align: center;
   margin-top: 80px;
}

section{
   margin-top: 50px;
}

.project_one{
   margin-top: 50px;
}

section .container{
   display: block;
}
section p{
   margin-top: 10px;
}



.project_btn{
   border: 1px solid #0d0d0d;
   border-radius: 50px;
   padding: 5px 20px;
   margin-top: 20px;
   display: inline-block;
   text-decoration: none; 
}

.project_two{
   margin-top: 50px;
}

.skills_Container{
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.skills_Container h4{
   text-align: center;
}

li{
   list-style-type: square;
   margin-top: 10px;
   font-size: 1.2rem;
}

.cta{
   background-color: #0d0d0d;
   height: 200px;
   color: white;
   padding: 50px;
   border-radius: 20px;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 50px;
}

.cta h4{
   font-size: 1.8rem;
}

.cta li{
   list-style-type: none;
}







@media (max-width:768px){
   main .container{
      display: grid;
      grid-template-columns: 1fr;
      padding: 50px 20px;
   }

   .section_compl, .skills_cont, .cta_cont{
      margin-top: -50px;
   }

   h2{
      margin-top: 20px;
   }

    .skills_Container{
         display: grid;
         grid-template-columns: 1fr;
      }

      .cta{
         display: grid;
         grid-template-columns: 1fr;
         gap: 10px;
         width: 300px;
         padding: 30px;
      }
   }