.text {
    position: absolute;
    top: 18em;
    left: 20em;
    height: 15em;
    width: 25em;
    background-color: rgb(186, 166, 206);
    z-index: 1;
    box-shadow: 1em 1em 2em;
    border: 0.15em solid white;
    border-radius: 1em;
    opacity: 0;
    animation: myAni3 3s ease 3.5s;
    animation-fill-mode: both;
}

.text div {
    text-align: center;
    text-align: justify;
    margin: 1em;

}

.balken {
    position: absolute;
    height: 3em;
    width: 80em;
    left: -80;
    box-shadow: 0.1em 0.1em 1em;
}

.black {
    top: 20em;            
    background-color: rgb(17, 17, 17);
    animation: myAni1 3s ease;
}

.red {
    top: 24em;
    left: -1.5em;
    background-color: red;
    transform: skew(-45deg);
    animation: myAni2 3s ease;
}

.gold {
    top: 28em;
    width: 77em;
    background-color: gold;
    animation: myAni1 3s ease;
}

@keyframes myAni1 {
    0% {
        left: -80em;
    }
    100% {
        left: 0;
    }            
}

@keyframes myAni2 {
    0% {
        left: -80em;
        transform: skew(0);
    }

    100% {
        left: -1.5em;
        transform: skew(-45deg);
    }
}

@keyframes myAni3 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}