@import url(normalize.css);
@import url(fonts.css);

*,
*:before,
*:after {
    box-sizing: inherit;
}

:root {
    font-size: 62.5%;
    line-height: 100%;
    font-weight: normal;

    --green: #E1FF33;
    --orange: #FF7011;
    --purple: #6127AE;
    --blue: #0D00FF;
}

body {
    font-family: "Rubik Bubbles", sans-serif;
    color: var(--orange);
}

.hero {
    background-color: var(--green);
    position: relative;
    z-index: 1;
    height: 50vw;
}

.hero-header {
    display: block;
    text-align: center;
    width: 100%;
    position: absolute;
    font-size: 10vw;
    height: 10vw;
    top: 25%;
}

.hero-header span {
    display: block;
    background-color: var(--green);
    width: 100%;
    line-height: 1;
}

.hero-bg {
    animation: bg-move 1s alternate infinite;
}

.hero-bg-mobile {
    display: none;
    animation: bg-move-mobile 1s alternate infinite;
}

@keyframes bg-move-mobile {
    from {
        transform: rotateX(0);
    }

    to {
        transform: rotateX(80deg);
    }
}

@media (max-width: 320px) {
    .hero-header {
        top: 30%;
        font-size: 13vw;
    }

    .hero {
        height: 70vw;
    }

    .hero-bg-mobile {
        display: block;
    }

    .hero-bg {
        display: none;
    }
}

@keyframes bg-move {
    from {
        transform: rotateY(0);
    }

    to {
        transform: rotateY(80deg);
    }
}

.hero-scroll-container {
    overflow: hidden;
    line-height: 0;
    position: relative;
    bottom: 10vw;
}

.hero-scroll {
    font-size: 6.4vw;
    white-space: nowrap;
    animation: hero-scroll 15s linear infinite;
}

@keyframes hero-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-132%);
    }
}

.slots {
    display: flex;
    flex-direction: row;
    z-index: -1;

    height: 75vw;
}

.slots-vertical {
    display: flex;
    flex-direction: column;
    max-width: 25vw;
}

.slot-1 {
    background-color: var(--green);
}

.slot-2 {
    background-color: var(--orange);
}

.slot-3 {
    background-color: white;
}

.slot-4 {
    background-color: var(--purple);
}

#slots-col-1 {
    transform: translateY(6%);
    animation: slot-move-1 3s alternate infinite;
}

@keyframes slot-move-1 {
    from {
        transform: translateY(-6%);
    }

    to {
        transform: translateY(-40%);
    }
}

#slots-col-2 {
    transform: translateY(6%);
    animation: slot-move-2 3s alternate infinite;
}

@keyframes slot-move-2 {
    from {
        transform: translateY(-60%);
    }

    to {
        transform: translateY(-25%);
    }
}

#slots-col-3 {
    transform: translateY(6%);
    animation: slot-move-3 3s alternate infinite;
}

@keyframes slot-move-3 {
    from {
        transform: translateY(0%);
    }

    to {
        transform: translateY(-30%);
    }
}

#slots-col-4 {
    transform: translateY(6%);
    animation: slot-move-4 3s alternate infinite;
}

@keyframes slot-move-4 {
    from {
        transform: translateY(-70%);
    }

    to {
        transform: translateY(0);
    }
}

.slot img {
    max-width: 25vw;
    height: 25vw
}

.slots-scroll-container {
    position: relative;
    z-index: 1;

    overflow: hidden;
    background-color: var(--green);
}

.slots-scroll {
    font-size: 10vw;
    margin: 5vw;
    white-space: nowrap;
    animation: slots-scroll 15s linear infinite;
}

@keyframes slots-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translate(-100%);
    }
}

.interactive {
    position: relative;
    z-index: 1;
    background-color: var(--purple);
}

.interactive ellipse:hover {
    transition: all 0.3s ease;
    opacity: 0.8;
}

.interactive ellipse:active {
    transform: scaleY(1.5) translateY(-15%);
}

.interactive path:hover {
    transition: all 0.3s ease;
    opacity: 0.8;
}

.animations {
    position: relative;
    z-index: 1;

    background-color: var(--orange);
    height: 25vw;
}

/* #animations-top-1 {
    animation: top-1 3s alternate infinite;
}

@keyframes top-1 {
    from {
        fill: var(--green);
    }

    to {
        fill: var(--purple);
    }
} */

#animations-top-2 {
    animation: top-2 3s alternate infinite;
}

@keyframes top-2 {
    from {
        fill: var(--blue);
    }

    to {
        fill: var(--purple);
    }
}

/* #animations-top-3 {
    animation: 3s top-3 0.3s alternate infinite;
}

@keyframes top-3 {
    from {
        fill: var(--green);
    }

    to {
        fill: var(--blue);
    }
}

#animations-top-4 {
    animation: top-4 3s alternate infinite;
}

@keyframes top-4 {
    from {
        fill: var(--green);
    }

    to {
        fill: var(--purple);
    }
} */

#animations-top-5 {
    animation: top-5 3s alternate infinite;
}

@keyframes top-5 {
    from {
        fill: var(--purple);
    }

    to {
        fill: var(--blue);
    }
}

/* #animations-top-6 {
    animation: top-6 3s alternate infinite;
}

@keyframes top-6 {
    from {
        fill: var(--green);
    }

    to {
        fill: white;
    }
}

#animations-bottom-1 {
    animation: bottom-1 3s alternate infinite;
}

@keyframes bottom-1 {
    from {
        fill: var(--green);
    }

    to {
        fill: var(--blue);
    }
} */

#animations-bottom-2 {
    animation: bottom-2 3s alternate infinite;
}

@keyframes bottom-2 {
    from {
        fill: var(--purple);
    }

    to {
        fill: var(--blue);
    }
}

/* #animations-bottom-3 {
    animation: bottom-3 3s alternate infinite;
}

@keyframes bottom-3 {
    from {
        fill: var(--green);
    }

    to {
        fill: var(--orange);
    }
}

#animations-bottom-4 {
    animation: bottom-4 3s alternate infinite;
}

@keyframes bottom-4 {
    from {
        fill: var(--green);
    }

    to {
        fill: var(--orange);
    }
} */

#animations-bottom-5 {
    animation: bottom-5 3s alternate infinite;
}

@keyframes bottom-5 {
    from {
        fill: var(--blue);
    }

    to {
        fill: var(--purple);
    }
}

/* #animations-bottom-6 {
    animation: bottom-6 3s alternate infinite;
}

@keyframes bototm-6 {
    from {
        fill: var(--green);
    }

    to {
        fill: white;
    }
} */

@media (max-width: 757px) {

    #animations-top-1,
    #animations-bottom-1,
    #animations-top-6,
    #animations-bottom-6 {
        display: none;
    }

    .animations-body {
        transform: scaleX(1.3);
    }
}

@media (max-width: 320px) {

    #animations-top-1,
    #animations-bottom-1,
    #animations-top-6,
    #animations-bottom-6,
    #animations-top-2,
    #animations-bottom-2,
    #animations-top-5,
    #animations-bottom-5 {
        display: none;
    }

    .animations-body {
        transform: scaleX(2);
    }
}

.footer {
    position: relative;
    z-index: 1;
}

.footer-scroll-container-1 {
    overflow: hidden;
    background-color: var(--green);
}

.footer-scroll-1 {
    margin: 5vw;
    font-size: 12.8vw;
    white-space: nowrap;
    animation: footer-scroll-1 15s linear infinite;
}

@keyframes footer-scroll-1 {
    from {
        transform: traslateX(0);
    }

    to {
        transform: translateX(-290%);
    }
}

.footer-scroll-container-2 {
    overflow: hidden;
    background-color: var(--purple);
}

.footer-scroll-2 {
    margin: 5vw;
    font-size: 12.8vw;
    transform: translateX(-200%);
    color: var(--green);
    white-space: nowrap;
    animation: footer-scroll-2 15s linear infinite;
}

@keyframes footer-scroll-2 {
    from {
        transform: traslateX(-200%);
    }

    to {
        transform: translateX(0);
    }
}