@import url('https://fonts.googleapis.com/css2?family=Asap&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Asap", sans-serif;
}
body{
  background: #42455a;
}
section{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
section:nth-child(1){
  color: #e0ffff;
  }
section:nth-child(2){
  color: #42455a;
  background: #e0ffff;
} 
section:nth-child(3){
  color: #e0ffff;
}
section:nth-child(4){
  color: #42455a;
  background: #e0ffff;
}
section .container{
  margin: 100px;
}


.logo{
    display: flex;
    transform: translateY(100%);  
}
.logo:nth-child(1){
    transition-delay: 1200ms;/* en cuantos segundos aparece*/
  
}
.logo:nth-child(2){
    transition-delay: 2400ms;/* en cuantos segundos aparece*/
   
}
.logo:nth-child(3){
    transition-delay: 3400ms;
}
.logo:nth-child(4){
    transition-delay: 4500ms;
}

.reveal{
  position: relative;
  opacity: 0;  /*que no se vea*/
  transform: translateX(100%);  /*derecha hacia izquierda*/
  /* transform: translateX(-100%);  /*izquierda hacia derecha*/
  /* transform: translateX(-100%);  /*abajo hacia arriba */
  /* transform: translateY(150px);  /*abajo hacia arriba*/
  transition:  all 1s  ;

  
  /*
     transition: 1s linear;
  */
  filter: blur(5px); /* darle efecto de blur al contenido */
  /* 
    filter: grayscale(100%);
    filter: brightness(200%);
    filter: contrast(200%);
    filter: drop-shadow(8px 8px 10px gray);
    filter: grayscale(100%);
  */
}

.reveal.active{
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

@media (max-width: 900px){
    section h1{
      font-size: 2rem;
      text-align: center;
    }
    section .text-container{
      flex-direction: column;
    }
  }