firstSection .secondDiv article {
 animation: blur-in 2000ms forwards ease-out;
 animation-delay: 400ms;
 opacity: 0;
 filter: blur(50px);
 transform: translateY(100px);
}

firstSection .secondDiv section a{
 animation: blur-in 1500ms forwards ease-out;
 animation-delay: 600ms;
 opacity: 0;

 transform: translateY(60px);
}

firstSection .firstDiv h1{
 animation: fade-in 2000ms forwards ease-out;
 animation-delay: 400ms;
 opacity: 0;
 filter: blur(50px);
}
firstSection .firstDiv h1 span{
 animation: fade-in 2000ms forwards ease-out;
 animation-delay: 1000ms;
 opacity: 0;
 filter: blur(50px);
}
firstSection .imgContainer .img{
 animation: fade-in 2000ms forwards ease-out;
 animation-delay: 800ms;
 opacity: 0;
 filter: blur(50px);
}
figure img{
 animation: fade-in 2000ms forwards ease-out;
 animation-delay: 400ms;
 opacity: 0;
 filter: blur(50px);
}
#about_intro h1,  article{
 animation: fade-in 2000ms forwards ease-out;
 animation-delay: 400ms;
 opacity: 0;
 filter: blur(50px);
}

@keyframes fade-in {
 0%{
  filter: blur(50px);
  opacity: 0;
 }
 40%{
  filter: blur(30px);
  opacity: .3;
 }
 70%{
  filter: blur(10px);
  opacity: .8;
 }
 100%{
  filter: blur(0px);
  opacity: 1;
 }
}

@keyframes blur-in {
 0% {
  opacity: 0;
  transform: translateY(160px);
  filter: blur(50px);
 }
 30% {
  opacity: .5;
  transform: translateY(120px);
  filter: blur(30px);
 }

 60% {
  opacity: .7;
  transform: translateY(100px);
  filter: blur(10px);
 }

 100% {
  opacity: 1;
  transform: translateY(0px);
  filter: blur(0px);
 }
}

.slideIn {
 display: flex;
 animation: slide-in 1000ms ease-in;
}

.slideOut {
  animation: slide-out 1000ms ease-out;
}

@keyframes slide-in {
 0% {
   transform: translateY(1000px);
 }
 10% {
   transform: translateY(900px);
 }
 20% {
   transform: translateY(800px);
 }
 30% {
   transform: translateY(700px);
 }
 40% {
   transform: translateY(600px);
 }
 50% {
   transform: translateY(500px);
 }
 60% {
   transform: translateY(400px);
 }
 70% {
   transform: translateY(300px);
 }
 80% {
   transform: translateY(200px);
 }
 90% {
   transform: translateY(100px);
 }
 100% {
   transform: translateY(0px);
 }
}

@keyframes slide-out {
 0% {
   transform: translateY(0px);
 }
 10% {
   transform: translateY(100px);
 }
 20% {
   transform: translateY(200px);
 }
 30% {
   transform: translateY(300px);
 }
 40% {
   transform: translateY(400px);
 }
 50% {
   transform: translateY(500px);
 }
 60% {
   transform: translateY(600px);
 }
 70% {
   transform: translateY(700px);
 }
 80% {
   transform: translateY(800px);
 }
 90% {
   transform: translateY(900px);
 }
 100% {
   transform: translateY(1000px);
 }
}




