/* numbered ids need prefix \3... */

#\31{
    border: 4px solid red;
    position:relative;
    top: 0em;
    left: 0em;
    animation:30s 4s linear infinite blau;	/* animation, loops forever */
}

#\32 {
    border: 4px solid greenyellow;
    animation:30s 4s linear infinite alternate-reverse gelb;
}

#\33{
    border: 4px solid rgb(255, 68, 249);
    animation:30s 4s linear infinite rot;
}

#\34{
    border: 4px solid rgb(153, 240, 230);
    animation:30s 4s linear infinite alternate-reverse türkis;
}

#\35{
    border: 4px solid rgb(255, 196, 0);
    animation:30s 4s ease-in infinite alternate-reverse korall;
}

#\36{
    border: 4px solid rgb(20, 79, 254);
    animation:30s 4s linear infinite pink;
}

/* #\37{
    border: 4px solid greenyellow;
    animation:30s 4s linear infinite alternate-reverse neon;
} */

@keyframes blau
{ 
    15% { transform: translate3d(1.5em, 2.5em, 0) rotate(120deg);}
    20% { transform: translate3d(2em, 1em, 0) rotate(30deg);}
    50% { transform: translate3d(-1em, -2em, 0) rotate(-80deg);}
    70% {transform: translate3d(1.5em, 2em, 0) rotate(60deg);}
    80% {transform: translate3d(1.5em, -1em, 0) rotate(100deg);}
}

@keyframes gelb{
    20% {transform: translate3d(3em, 3em, 0) rotate(270deg);}
    40% {transform: translate3d(-1em, -2em, 0) rotate(-50deg);}
    60% {transform: translate3d(1em, 1.5em, 0) rotate(30deg);}
    80% {transform: translate3d(-1.5em, 1em, 0) rotate(100deg);}
    }

@keyframes rot{
    1%, 10% {transform: translate3d(-1px, -1px, 0);}
    2%, 8% {transform: translate3d(1.5px, 1.5px, 0);}
    3%, 5%, 8% {transform: translate3d(-2.5px, -2px, 0) rotate(10deg);}
    4%, 6.5% {transform: translate3d(4px, 3px, 0);}
    20% {transform: translate3d(-1.5em, 1em, 0) rotate(20deg);}
    50% {transform: translate3d(2em, -1em, 0) rotate(180deg);}
    80% {transform: translate3d(1em, -2em, 0) rotate(60deg);}
}

@keyframes korall {
    20% {transform: translate3d(1em, 2em, 0) rotate(50deg);}
    40% {transform: translate3d(-2em, 2em, 0);}
    60% {transform: translate3d(-2em, 1em, 0) rotate(120deg);}
    90% {transform: translate3d(1em, -1em, 0) rotate(30deg);}
}

@keyframes pink{
    20% {transform: translate3d(-1em, 0, 0) rotate(-120)}
    40%, 80% {transform: translate3d(1.5em, -1em, 0) rotate(70deg);}
    60% {transform: translate3d(2em, 1em, 0) rotate(60deg);}
}

@keyframes türkis{
    10% {transform: translate3d(-2px, -2px, 0);}
    20% {transform: translate3d(3em, 1em, 0);}
    50% {transform: translate3d(-16px, 4px, 0) rotate(-180deg);}
    70% {transform: translate3d(20px, -2px, 0);}
    90% {transform: rotate(170deg);}
}
    

@keyframes neon{
    10%, 90% {transform: translate3d(-2em, -1em, 0) rotate(-95deg);}  
    20%, 80% {transform: translate3d(-4em, 2em, 0) rotate(-20deg);}
    30%, 60% {transform: translate3d(-1em, -3em, 0) rotate(-20deg);}
    40% {transform: translate3d(1.25em, 3em, 0);}
}