.halloContainer {
    & .hallo {
        position: absolute;
        height: 20%;
        width: 14%;
        top: 40%;
        display: block;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;

        --animation-timing-fnc: cubic-bezier(0.5, 1.90, 0.10, 0.5);
        --animation-keyframes: animateYFallDown;

        transition: all 500ms var(--animation-timing-fnc) 400ms;

        &:hover {
            margin-left: 1%;
            margin-top: 1%;
            transition: all 300ms var(--animation-timing-fnc) 0ms;
        }

        &#hallo_h {
            animation: 2000ms var(--animation-timing-fnc) 0s 1 var(--animation-keyframes);
            left: 21%;
            background-image: url(../images/hallo_h.svg);
        }

        &#hallo_a {
            animation: 1800ms var(--animation-timing-fnc) 0s 1 var(--animation-keyframes);
            left: 31%;
            background-image: url(../images/hallo_a.svg);
        }

        &#hallo_l1 {
            animation: 2200ms var(--animation-timing-fnc) 0s 1 var(--animation-keyframes);
            left: 42%;
            background-image: url(../images/hallo_l1.svg);
        }

        &#hallo_l2 {
            animation: 1900ms var(--animation-timing-fnc) 0s 1 var(--animation-keyframes);
            left: 52%;
            background-image: url(../images/hallo_l2.svg);
        }

        &#hallo_o {
            animation: 1600ms var(--animation-timing-fnc) 0s 1 var(--animation-keyframes);
            top: 39%;
            left: 61%;
            height: 22%;
            width: 22%;
            background-image: url(../images/adler_logo_frayed.svg);
        }
    }
}

@media (orientation: portrait) {
    .halloContainer {
        & .hallo {
            height: 12%;
            width: 14%;

            &#hallo_h {
                top: 12%;
                left: 33%;
            }

            &#hallo_a {
                top: 26%;
                left: 38%;
            }

            &#hallo_l1 {
                top: 40%;
                left: 43%;
            }

            &#hallo_l2 {
                top: 54%;
                left: 48%;
            }

            &#hallo_o {
                top: 67%;
                left: 46%;
                height: 14%;
                width: 30%;
            }
        }
    }
}

@keyframes animateYFallDown {
    0% {
        transform: translateY(-110vh);
    }
    100% {
        transform: translateX(0vh);
    }
}