@media (min-width: 1401px) { /* todo use the --desktopMinWidth env variable when they'll be available */
    :root {
        --move-animation-left: 100px;
        --move-animation-right: -100px;
        --move-animation-down: -100px;
        --move-animation-up: 100px;
    }
}

@media (max-width: 1400px) { /* todo use the --mobileMaxWidth env variable when they'll be available */
    :root {
        --move-animation-left: 20px;
        --move-animation-right: -20px;
        --move-animation-down: -20px;
        --move-animation-up: 20px;
    }
}

@keyframes typing {
    from { max-width: 0 }
    to { max-width: 100% }
}

[data-inviewport="typewriter"].animationActivated {
    @media (min-width: 1401px) {
        animation: typing 3s steps(40, end);
    }
}

[data-inviewport="scale-in"] {
    transition: 1s;
    transform: scale(0.8);
}
[data-inviewport="scale-in"].animationActivated {
    transform: scale(1);
}

[data-inviewport="fade-rotate"] {
    transition: 1s;
    opacity: 0;
}
[data-inviewport="fade-rotate"].animationActivated {
    transform: rotate(180deg);
    opacity: 1;
}

[data-inviewport="move-left"] {
    opacity: 0;
    transform: translateX(var(--move-animation-left));
    transition: 1s;
}
[data-inviewport="move-left"].animationActivated {
    opacity: 2;
    transform: translateX(0);
}

[data-inviewport="move-right"] {
    opacity: 0;
    transform: translateX(var(--move-animation-right));
    transition: 1s;
}

[data-inviewport="move-right"].animationActivated {
    opacity: 2;
    transform: translateX(0);
}


[data-inviewport="move-up"] {
    opacity: 0;
    transform: translateY(var(--move-animation-up));
    transition: 1s;
}

[data-inviewport="move-up"].animationActivated {
    opacity: 2;
    transform: translateY(0);
}

[data-inviewport="move-down"] {
    opacity: 0;
    transform: translateY(0);
    transition: 1s;
}

[data-inviewport="move-down"].animationActivated {
    opacity: 2;
    transform: translateY(var(--move-animation-down));
}

[data-inviewport="fade-in-1s"] {
    opacity: 0;
    transform: translateY(0);
    transition: 1s;
}

[data-inviewport="fade-in-1s"].animationActivated {
    opacity: 2;
    transition: opacity 1s;
}


[data-inviewport="fade-in-3s"] {
    opacity: 0;
    transition: 3s;
}

[data-inviewport="fade-in-3s"].animationActivated {
    opacity: 2;
    transition: opacity 3s;
}


[data-inviewport="rotate-y"] {
    transform: rotateY(180deg);
    transition: 3s;
}

[data-inviewport="rotate-y"].animationActivated {
    transform: rotateY(0deg);
}

[data-inviewport="rotate-y"].animationActivated * {
    animation: showInTheEnd 1000ms;
}

@keyframes showInTheEnd {
    from {
        opacity: 0;
    }
    99% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}