.color1{
    background-color: #87ceeb;
}
.numper{
    position:relative;
  top: -40px;
   
}
.color2{
  color: #87ceeb;
}
.an1{
  animation-duration: 1s;
  animation-name: movy;
}
@keyframes movy {
  0%{
    transform: translateY(100px);
    
  }
  100%{
    transform: translateY(0px);
  }
}
/*end img an1*/

.an2{
  animation-duration: 1s;
  animation-name: mova;
}
.an3{
  animation-duration: 1s;
  animation-name: move;
}
@keyframes mova {
  0%{
    transform: translateX(-100px);
  }
  100%{
    transform: translateX(0px);
  }
  
}
@keyframes move {
  0%{
    transform: translateX(100px);
  }
  100%{
    transform: translateX(0px);
  }
  
}
/*dark animation*/
.an4{
  animation-duration: 1s;
  animation-name: icon;
}
@keyframes icon {
  0%{
    opacity: 0;
    transform: translateX(-100px);
  }
  100%{
    opacity: 1;
    transform: translateX(0px);
  }
}
.an5{
 animation: head1 1s ease forwards;
}
@keyframes head1 {
  0%{opacity: 0;
    
    transform: translateY(-100px);

  }
  100%{opacity: 1;
    transform: translateY(0px);
  }
}
.an6{
  animation-duration: 1s;
  animation-name: paragraf1;
 }
 @keyframes paragraf1 {
   0%{opacity: 0;
     
     transform: translate(-100px,-100px);
 
   }
   100%{opacity: 1;
     transform: translate(0px,0px);
   }
 }