:root{--slideDirectionUp:1;--slideDirectionDown:-1;--slideDirectionRight:-2;--slideDirectionLeft:2}.viewportAnimation.childrenSlideIn{--slideDirection:var(--slideDirectionUp);--slideAmount:max(10vw, 10vh)}.viewportAnimation.childrenSlideIn>*{opacity:0;transition:all .4s ease-out;transform:translate(calc(var(--slideAmount) * (var(--slideDirection) + 1) * (var(--slideDirection) - 1) * (var(--slideDirection)/6)),calc(var(--slideAmount) * (var(--slideDirection) + 2) * (var(--slideDirection) - 2) * (var(--slideDirection)/-3)))}.viewportAnimation.childrenSlideIn.inViewport>*{opacity:1;transform:translate(0%,0%)}.viewportAnimation.childrenSlideIn>*:nth-child(1){transition-delay:300ms}.viewportAnimation.childrenSlideIn>*:nth-child(2){transition-delay:500ms}.viewportAnimation.childrenSlideIn>*:nth-child(3){transition-delay:700ms}