#aboutme {
    padding: 0%;
   }
   #profile {  
    /* background: linear-gradient(110deg, #09f 50%, #66cc33 60%); */
    padding: 1%;
    font-family: 'Mansalva', cursive;
    color :rgb(29, 27, 27);
    height: 665px;
    
   }
   #skills {
    /* background-color:#6c3; */
    padding: 1%;
    text-align: center;
    font-family: 'Arvo', serif;
    color: rgb(29, 27, 27);
    height: 665px;
   }

   #portfolio {
    background-color:white;
    padding: 1%;
    text-align: center;
    font-family: 'Arvo', serif;
    color: rgb(29, 27, 27);
    height: 665px;
   }

   #contact {
    padding: 1%;
    text-align: center;
    font-family: 'Arvo', serif;
    color: rgb(29, 27, 27);
    height: 665px;
   }


   #work {
    /* background: linear-gradient(110deg, #66cc33 50%, #09f 60%); */
    padding: 1%;
    text-align: center;
    font-family: 'Arvo', serif;
    color: rgb(29, 27, 27);
    height: 665px;
   }

   .ul{
    list-style-type:none;
    font-size: 120%;
   }

   /* ............................typewriter....................... */

   .css-typing p {
    border-right: .15em solid orange;
    font-family: "Courier";
    font-size: 150%;
    white-space: nowrap;
    overflow: hidden;
  }
  .css-typing p:nth-child(1) {
    width: 100%;
    -webkit-animation: type 2s steps(40, end);
    animation: type 2s steps(40, end);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
  
  .css-typing p:nth-child(2) {
    width: 100%;
    opacity: 0;
    -webkit-animation: type2 2s steps(40, end);
    animation: type2 2s steps(40, end);
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
  
  
  .css-typing p:nth-child(3) {
    width: 100%;
    opacity: 0;
    -webkit-animation: type3 2s steps(40, end);
    animation: type3 2s steps(40, end);
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

  .css-typing p:nth-child(4) {
    width: 100%;
    opacity: 0;
    -webkit-animation: type4 2s steps(40, end);
    animation: type4 2s steps(40, end);
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

  .css-typing p:nth-child(5) {
    width: 100%;
    opacity: 0;
    -webkit-animation: type5 2s steps(40, end);
    animation: type5 2s steps(40, end);
    -webkit-animation-delay: 8s;
    animation-delay: 8s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

  .css-typing p:nth-child(6) {
    width: 100%;
    opacity: 0;
    -webkit-animation: type6 2s steps(40, end), blink .5s step-end infinite alternate;
    animation: type6 2s steps(40, end), blink .5s step-end infinite alternate;
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
  
  @keyframes type {
    0% {
      width: 0;
    }
    99.9% {
      border-right: .15em solid orange;
    }
    100% {
      border: none;
    }
  }
  
  @-webkit-keyframes type {
    0% {
      width: 0;
    }
    99.9% {
      border-right: .15em solid orange;
    }
    100% {
      border: none;
    }
  }
  
  @keyframes type2 {
    0% {
      width: 0;
    }
    1% {
      opacity: 1;
    }
    99.9% {
      border-right: .15em solid orange;
    }
    100% {
      opacity: 1;
      border: none;
    }
  }
  
  @-webkit-keyframes type2 {
    0% {
      width: 0;
    }
    1% {
      opacity: 1;
    }
    99.9% {
      border-right: .15em solid orange;
    }
    100% {
      opacity: 1;
      border: none;
    }
  }
  
 

  @keyframes type3 {
    0% {
      width: 0;
    }
    1% {
      opacity: 1;
    }
    99.9% {
      border-right: .15em solid orange;
    }
    100% {
      opacity: 1;
      border: none;
    }
  }
  
  @-webkit-keyframes type3{
    0% {
      width: 0;
    }
    1% {
      opacity: 1;
    }
    99.9% {
      border-right: .15em solid orange;
    }
    100% {
      opacity: 1;
      border: none;
    }
  }


  @keyframes type4 {
    0% {
      width: 0;
    }
    1% {
      opacity: 1;
    }
    99.9% {
      border-right: .15em solid orange;
    }
    100% {
      opacity: 1;
      border: none;
    }
  }
  
  @-webkit-keyframes type4 {
    0% {
      width: 0;
    }
    1% {
      opacity: 1;
    }
    99.9% {
      border-right: .15em solid orange;
    }
    100% {
      opacity: 1;
      border: none;
    }
  }

  @keyframes type5 {
    0% {
      width: 0;
    }
    1% {
      opacity: 1;
    }
    99.9% {
      border-right: .15em solid orange;
    }
    100% {
      opacity: 1;
      border: none;
    }
  }
  
  @-webkit-keyframes type5 {
    0% {
      width: 0;
    }
    1% {
      opacity: 1;
    }
    99.9% {
      border-right: .15em solid orange;
    }
    100% {
      opacity: 1;
      border: none;
    }
  }

  @keyframes type6 {
    0% {
      width: 0;
    }
    1% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
  }
  
  @-webkit-keyframes type6 {
    0% {
      width: 0;
    }
    1% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
  }

  
  
  @keyframes blink {
    50% {
      border-color: transparent;
    }
  }
  @-webkit-keyframes blink {
    50% {
      border-color: tranparent;
    }
  }

  .css-typing{
        position: absolute;
        bottom: 10%;
        left: 3%;
        color: white;
    }


    /* ............................typewriter end....................... */

    /* down button */
     
    .button {
    background-color: transparent;
    border: transparent;
    color: #FFFFFF;
    text-align: center;
    font-size: 100%;
    padding: 0%;
    width: 100%;
    transition: all 0.5s;
      }
      
      .button span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s;
      }
      
      .button span:after {
        content: 'Scroll Down/Click ';
        position: inherit;
        opacity: 0;
        top: 0;
        bottom: 0;
        transition: 0.5s;
      }
      
      .button:hover span {
        padding-bottom: 10%;
      }
      
      .button:hover span:after {
        opacity: 1;
        bottom: 0;
      }

/* down button end */

/* loader */

#load{
  width:100%;
  height:100%;
  position:fixed;
  z-index:9999;
  background:url("https://www.creditmutuel.fr/cmne/fr/banques/webservices/nswr/images/loading.gif") no-repeat center center rgba(0,0,0,0.25)
}

/* loader end */




















/* media query */

@media screen and (max-width: 435px) {

  h2{
    font-size: 100%;
  }
  
/* typing */
.css-typing p {
  border-right: .15em solid orange;
  font-family: "Courier";
  font-size: 50%;
  white-space: nowrap;
  overflow: hidden;
}
.css-typing p:nth-child(1) {
  width: 100%;
  -webkit-animation: type 2s steps(40, end);
  animation: type 2s steps(40, end);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(2) {
  width: 100%;
  opacity: 0;
  -webkit-animation: type2 2s steps(40, end);
  animation: type2 2s steps(40, end);
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}


.css-typing p:nth-child(3) {
  width: 100%;
  opacity: 0;
  -webkit-animation: type3 2s steps(40, end);
  animation: type3 2s steps(40, end);
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(4) {
  width: 100%;
  opacity: 0;
  -webkit-animation: type4 2s steps(40, end);
  animation: type4 2s steps(40, end);
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(5) {
  width: 100%;
  opacity: 0;
  -webkit-animation: type5 2s steps(40, end);
  animation: type5 2s steps(40, end);
  -webkit-animation-delay: 8s;
  animation-delay: 8s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(6) {
  width: 100%;
  opacity: 0;
  -webkit-animation: type6 2s steps(40, end), blink .5s step-end infinite alternate;
  animation: type6 2s steps(40, end), blink .5s step-end infinite alternate;
  -webkit-animation-delay: 10s;
  animation-delay: 10s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes type {
  0% {
    width: 0;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    border: none;
  }
}

@-webkit-keyframes type {
  0% {
    width: 0;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    border: none;
  }
}

@keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@-webkit-keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    opacity: 1;
    border: none;
  }
}



@keyframes type3 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@-webkit-keyframes type3{
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    opacity: 1;
    border: none;
  }
}


@keyframes type4 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@-webkit-keyframes type4 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@keyframes type5 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@-webkit-keyframes type5 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@keyframes type6 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes type6 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}



@keyframes blink {
  50% {
    border-color: transparent;
  }
}
@-webkit-keyframes blink {
  50% {
    border-color: tranparent;
  }
}

.css-typing{
      position: absolute;
      bottom: 39%;
      left: 3%;
      color: white;
  }
/* typing end */

.button {
  background-color: transparent;
    border: transparent;
    color: #FFFFFF;
    text-align: center;
    font-size: 55%;
    padding: 0%;
    width: 100%;
    transition: all 0.5s;
    margin-bottom: 35%;
    margin-top: -10%;
    }
    
    .button span {
      cursor: pointer;
      display: inline-block;
      position: relative;
      transition: 0.5s;
    }
    
    .button span:after {
      content: 'Scroll Down/Click ';
      position: inherit;
      opacity: 0;
      top: 0;
      bottom: 0;
      transition: 0.5s;
    }
    
    .button:hover span {
      padding-bottom: 10%;
    }
    
    .button:hover span:after {
      opacity: 1;
      bottom: 0;
    }


}


/* ********************************************************************************************* */
/* 
.bg {
  animation:slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, white 50%, rgb(49, 53, 56) 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:4s;
}

.bg3 {
  animation-duration:5s;
}



h1 {
  font-family:monospace;
}

@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
} */



/* *{
  margin: 0;
  padding: 0;
  font-family: "montserrat",sans-serif;
} */

/* body{
  background: #353b48;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
} */


.social-buttons a{
  display: inline-flex;
  text-decoration: none;
  font-size: 54px;
  width: 60px;
  height: 250px;
  color: #fff;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 0 8px;
}

.social-buttons a::before{
  content: "";
  position: absolute;
  width: 126px;
  height: 126px;
  background: linear-gradient(45deg,#22a6b3,#30336b);
  border-radius: 50%;
  z-index: -1;
  transition: 0.3s ease-in;
}

.social-buttons a:hover::before{
  transform: scale(0);
}

.social-buttons a i{
  transition: 0.3s ease-in;
}

.social-buttons a:hover i{
  background: linear-gradient(45deg,#22a6b3,#30336b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: scale(2.2);
}