body{
    font-family: "Roboto", sans-serif;;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body main{
    border: 0;
    flex: 1;
    background-color: gray;
}

html{
    scroll-behavior: smooth;
}

[data-animation]{
    opacity: 0;
    transition: 1.5s;
    background-color: gray;
}

[data-animation="left"]{
    transform: translate3d(-50px, 0, 0);
}

[data-animation="right"]{
    transform: translate3d(-50px, 0, 0);
}

[data-animation].animate{
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.container :nth-child(2){
    transition-delay: 400ms;
}
.container :nth-child(3){
    transition-delay: 700ms;
}