* {
    margin: 0;
    padding: 0;
}

body {
    /* background: linear-gradient(to top, rgba(7, 46, 161, 255), rgba(160, 160, 160, 255), #111 90%); */
}

section {
    top: -40px;
    background: linear-gradient(to top, #FFF, #111);
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

section .row {
    position: relative;
    top: -50%;
    width: 100%;
    display: flex;
    padding: 10px 0;
    white-space: nowrap;
    font-size: 64px;
    transform: rotate(0deg);
}

ion-icon {
    color: rgba(7, 46, 161);
    transition: 1s;
    padding: 0 5px;
    user-select: none;
    cursor: default;
}

ion-icon:hover {
    transition: 0s;
    color: #FD6A02;
    background: rgba(242, 133, 0, 0.0625);
    box-shadow: 0 0 120px #FD6A02;
}

section .row div {
    animation: animate_one 100s linear infinite;
    animation-delay: -100s;
}

section .row div:nth-child(2) {
    animation: animate_two 100s linear infinite;
    animation-delay: -50s;
}

@keyframes animate_one {
    0% {transform: translateX(100%);}
    100% {transform: translateX(-100%);}
}

@keyframes animate_two {
    0% {transform: translateX(0%);}
    100% {transform: translateX(-200%);}
}

section .row:nth-child(even) div {
    animation: animate_three 100s linear infinite;
    animation-delay: -100s;
}

section .row:nth-child(even) div:nth-child(2) {
    animation: animate_four 100s linear infinite;
    animation-delay: -50s;
}

@keyframes animate_three {
    0% {transform: translateX(-100%);}
    100% {transform: translateX(100%);}
}

@keyframes animate_four {
    0% {transform: translateX(-200%);}
    100% {transform: translateX(0%);}
}