.text * {
    -webkit-hyphens: auto;
            hyphens: auto;
}

@supports not ((-webkit-hyphens: auto) or (hyphens: auto)) {
    .text * {
        word-break: break-all;
    }
}

@keyframes clear {
    from {
        opacity: 0;
    }
    to {
        opacity: 0;
    }
}

/* keyframes */

@keyframes fly-in-right {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fly-in-left {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fly-in-top {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes zoom-out {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes zoom-in {
    from {
        opacity: 0;
        transform: scale(2);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes zoom-zoom {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(1);
    }
    75% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes bug {
    0% {
        transform: rotate(10deg)
    }
    50% {
        transform: rotate(-10deg)
    }
    100% {
        transform: rotate(10deg)
    }
}

@keyframes levitate {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}

/* STEPS timing vars */

:root {
    --animateSpeed: .1s;
}

.levitate {
    animation: clear var(--animateSpeed) linear, zoom-out .4s linear var(--animateSpeed), levitate 6s ease-in-out 2s infinite;
}

.glow {
    animation: clear var(--animateSpeed) linear, zoom-out .4s linear var(--animateSpeed), zoom-zoom 6s ease-in-out .6s infinite;
}

.popup {
    animation: clear var(--animateSpeed) linear, zoom-out .4s linear var(--animateSpeed);
}

.bug {
    animation: clear var(--animateSpeed) linear, zoom-in .4s linear var(--animateSpeed), bug 6s ease-in-out infinite;
}

/* resets */

.offset-right {
    opacity: 0;
    transform: translateX(100%);
}

.offset-left {
    opacity: 0;
    transform: translateX(-100%);
}

.offset-top {
    opacity: 0;
    transform: translateY(-100%);
}

.zoom-zero {
    opacity: 0;
    transform: scale(0);
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms}