* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Rubik;
  user-select: none;

}

          /* html, body {
            overflow-x: hidden;
          }
   */
   
  .flipInY {
    -webkit-animation-name: flipInY;
            animation-name: flipInY;
  }
  
  .flipOutY {
    -webkit-animation-name: flipInY;
            animation-name: flipInY;
    animation-direction: reverse;
  }
      
  
  .slideInUp {
    -webkit-animation-name: slideInUp;
            animation-name: slideInUp;
  }
  
  .slideInDown {
    -webkit-animation-name: slideInDown;
            animation-name: slideInDown;
  }
  
  .slideInLeft {
    -webkit-animation-name: slideInleft;
            animation-name: slideInleft;
  }
  
  .slideInRight {
    -webkit-animation-name: slideInRight;
            animation-name: slideInRight;
  }
  
  .fadeIn {
    -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
  }
  
  .zoomIn {
    -webkit-animation-name: zoomIn;
            animation-name: zoomIn;
  }
  
  .zoomReverseIn {
    -webkit-animation-name: zoomReverseIn;
            animation-name: zoomReverseIn;
  }
  
  .flipInY {
    -webkit-animation-name: flipInY;
            animation-name: flipInY;
  }
  
  .flipOutY {
    -webkit-animation-name: flipInY;
            animation-name: flipInY;
    animation-direction: reverse;
  }    
      
  @-webkit-keyframes flipInY {
    0% {
      opacity: 0;
      transform: perspective(90vw) rotateY(67.5deg);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes flipInY {
    0% {
      opacity: 0;
      transform: perspective(90vw) rotateY(67.5deg);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
      
  @-webkit-keyframes slideInUp {
    0% {
      opacity: 0;
      transform: translateY(25%);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  
  @keyframes slideInUp {
    0% {
      opacity: 0;
      transform: translateY(25%);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @-webkit-keyframes slideInDown {
    0% {
      opacity: 0;
      transform: translateY(-25%);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes slideInDown {
    0% {
      opacity: 0;
      transform: translateY(-25%);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @-webkit-keyframes slideInleft {
    0% {
      opacity: 0;
      transform: translateX(25%);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes slideInleft {
    0% {
      opacity: 0;
      transform: translateX(25%);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @-webkit-keyframes slideInRight {
    0% {
      opacity: 0;
      transform: translateX(-25%);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes slideInRight {
    0% {
      opacity: 0;
      transform: translateX(-25%);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }    
      
  [data-animation] {
    opacity: 0;
    -webkit-animation-timing-function: var(--animation-timing-function);
            animation-timing-function: var(--animation-timing-function);
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation-duration: var(--animation-duration);
            animation-duration: var(--animation-duration);
    will-change: transform, opacity;
  }