* {
    box-sizing: border box;
    background-color: black;
    overflow: hidden;
}

body {
    margin:0;
    font-family: cursive;
    font-size: xx-large;
    text-align: center;
}


.container {
    background-color:black;
    height: 100vh;
    display: flex;
    justify-content:space-around;
    align-items: center;
    position: relative;
    overflow: visible;
    animation: blink 5s infinite alternate linear; 
}

/* base stuff */
.door {
    position: absolute;
    width: 70px;
    height: 140px;
    opacity: 0;
    animation: appear 0.1s steps(1) forwards,
               bounceX var(--bx) ease infinite alternate,
               bounceY var(--by) ease infinite alternate;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/*  colors  */
.c1 { background-color: cornflowerblue; }
.c2 { background-color: crimson; }
.c3 { background-color: lightgoldenrodyellow; }
.c4 { background-color: darkolivegreen; }
.c5 { background-color: palevioletred; }
.c6 { background-color: khaki; }
.c7 {background-color: teal; }
.c8 {background-color: powderblue; }
.c9 {background-color: goldenrod; }
.c10 {background-color: mediumvioletred; }

/* animation: d = delay */
.d0 {
    animation-delay: 1.5s, 1.5s, 1.5s; 
    animation-timing-function: linear;
}
.d1 { 
    animation-delay: 2s,  2s,  2s; 
    animation-timing-function: linear;
}
.d2 { 
    animation-delay: 2.5s,  2.5s,  2.5s;
    animation-timing-function: linear;
}
.d3 { 
    animation-delay: 3s,  3s,  3s;
    animation-timing-function: linear;
}
.d4 { 
    animation-delay: 3.5s,  3.5s,  3.5s;
    animation-timing-function: linear;
}
.d5 { 
    animation-delay: 4s, 4s, 4s;
    animation-timing-function: linear;
}

@keyframes appear {
    to { opacity: 100%; }
}

/* horizontal bounce */
@keyframes bounceX {
    from { transform: translateX(0); }
    to   { transform: translateX(var(--tx)); }
}
@keyframes bounceY {
    from { transform: translateY(0); }
    to   { transform: translateY(var(--ty)); }
}

/* wave 1 */
.b1  { left:52vw;   top:20vh; --bx:2.7s; --by:2.1s; --tx:88vw;  --ty:80vh; }
.b2  { left:40vw;  top:60vh; --bx:2.3s; --by:3.4s; --tx:70vw;  --ty:-55vh; }
.b3  { left:50vw;  top:5vh;  --bx:1.1s; --by:2.0s; --tx:-45vw; --ty:85vh; }
.b4  { left:75vw;  top:40vh; --bx:2.8s; --by:1.9s; --tx:-70vw; --ty:50vh; }
.b5  { left:90vw;  top:80vh; --bx:4.5s; --by:2.5s; --tx:-85vw; --ty:-75vh; }
.b6  { left:40vw;  top:90vh; --bx:3.2s; --by:4.2s; --tx:50vw;  --ty:-85vh; }

/* wave 2 */
.b7  { left:12vw;  top:30vh; --bx:3.8s; --by:2.7s; --tx:76vw;  --ty:60vh; }
.b8  { left:33vw;  top:70vh; --bx:2.0s; --by:4.6s; --tx:55vw;  --ty:-65vh; }
.b9  { left:60vw;  top:20vh; --bx:2.3s; --by:2.2s; --tx:-55vw; --ty:72vh; }
.b10 { left:80vw;  top:55vh; --bx:2.6s; --by:5.8s; --tx:-75vw; --ty:-48vh; }
.b11 { left:45vw;  top:45vh; --bx:3.9s; --by:2.3s; --tx:44vw;  --ty:44vh; }
.b12 { left:70vw;  top:85vh; --bx:2.4s; --by:3.1s; --tx:-65vw; --ty:-80vh; }

/* wave 3 */
.b13 { left:8vw;   top:50vh; --bx:2.6s; --by:2.4s; --tx:80vw;  --ty:-45vh; }
.b14 { left:25vw;  top:15vh; --bx:2.2s; --by:5.7s; --tx:66vw;  --ty:78vh; }
.b15 { left:55vw;  top:75vh; --bx:4.4s; --by:2.9s; --tx:-50vw; --ty:-70vh; }
.b16 { left:85vw;  top:25vh; --bx:2.7s; --by:6.5s; --tx:-80vw; --ty:68vh; }
.b17 { left:38vw;  top:55vh; --bx:2.2s; --by:2.0s; --tx:52vw;  --ty:-50vh; }
.b18 { left:65vw;  top:10vh; --bx:3.0s; --by:2.6s; --tx:-60vw; --ty:82vh; }

/* wave 4 */
.b19 { left:15vw;  top:80vh; --bx:3.7s; --by:4.3s; --tx:72vw;  --ty:-75vh; }
.b20 { left:30vw;  top:35vh; --bx:2.5s; --by:2.8s; --tx:60vw;  --ty:55vh; }
.b21 { left:62vw;  top:65vh; --bx:2.0s; --by:5.9s; --tx:-57vw; --ty:-60vh; }
.b22 { left:78vw;  top:15vh; --bx:2.1s; --by:2.1s; --tx:-73vw; --ty:76vh; }
.b23 { left:48vw;  top:90vh; --bx:1.8s; --by:3.4s; --tx:42vw;  --ty:-85vh; }
.b24 { left:3vw;   top:65vh; --bx:2.9s; --by:2.3s; --tx:88vw;  --ty:-60vh; }

/* wave 5 */
.b25 { left:18vw;  top:5vh;  --bx:4.5s; --by:5.0s; --tx:74vw;  --ty:88vh; }
.b26 { left:42vw;  top:25vh; --bx:2.3s; --by:3.6s; --tx:50vw;  --ty:68vh; }
.b27 { left:68vw;  top:50vh; --bx:3.1s; --by:5.7s; --tx:-63vw; --ty:-45vh; }
.b28 { left:88vw;  top:70vh; --bx:2.6s; --by:5.2s; --tx:-83vw; --ty:-65vh; }
.b29 { left:35vw;  top:82vh; --bx:3.9s; --by:4.2s; --tx:55vw;  --ty:-77vh; }
.b30 { left:55vw;  top:38vh; --bx:2.8s; --by:3.8s; --tx:-50vw; --ty:55vh; }
.b31 { left:10vw;  top:48vh; --bx:3.4s; --by:2.5s; --tx:82vw;  --ty:-43vh; }
.b32 { left:72vw;  top:92vh; --bx:4.0s; --by:4.3s; --tx:-67vw; --ty:-87vh; }

/* wave 6 */
.b33 { left:95vw;  top:32vh;  --bx:1.5s; --by:2.0s; --tx:23vw;  --ty:18vh; }
.b34 { left:52vw;  top:25vh; --bx:2.3s; --by:5.6s; --tx:50vw;  --ty:68vh; }
.b35 { left:68vw;  top:10vh; --bx:4.7s; --by:2.7s; --tx:-63vw; --ty:-35vh; }
.b36 { left:48vw;  top:54vh; --bx:2.6s; --by:4.2s; --tx:-45vw; --ty:-85vh; }
.b37 { left:65vw;  top:72vh; --bx:3.9s; --by:3.2s; --tx:85vw;  --ty:-77vh; }
.b38 { left:15vw;  top:68vh; --bx:4.8s; --by:5.8s; --tx:-20vw; --ty:55vh; }
.b39 { left:98vw;  top:18vh; --bx:2.8s; --by:6.1s; --tx:12vw;  --ty:-83vh; }
.b40 { left:32vw;  top:2vh; --bx:5.0s; --by:3.3s; --tx:-93vw; --ty:17vh; }