body {
    height: 100vh;
  background-size: cover;
  width: 100%;

  overflow: hidden;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1.5rem;
}

.center {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  text-align: center;
  z-index: 2;
  animation: hideAfter10s 10s forwards;
}
@keyframes housemotion {
  0% {transform: translateY(180px)} 
  50% {transform: translateY(180px)} 
  69% {transform: translateY(-195px)} 
  78% {transform: translateY(-195px)}
  78.1% {transform: translateY(-360px) scale(0)}
  100% {transform: translateY(-360px) scale(0)}
}

#House { 
  transform-origin: 50% 50%;
  animation-timing-function: ease-in;   
  animation-name: housemotion;
  animation-duration: 11s;
  animation-iteration-count: infinite;
}

@keyframes shadow1motion {
  0% {transform: translateY(185px)} 
  50% {transform: translateY(185px)} 
  69% {transform: translateY(-193px)} 
  78% {transform: translateY(-193px)}
  79% {transform: translateY(-360px) scale(0)}
  100% {transform: translateY(-360px) scale(0)}
}

#Shadow1 { 
  transform-origin: 50% 50%;
  animation-timing-function: ease-in;   
  animation-name: shadow1motion;
  animation-duration: 11s;
  animation-iteration-count: infinite;
}

@keyframes shadow2motion {
  0% {transform: translateY(190px)} 
  50% {transform: translateY(190px)} 
  69% {transform: translateY(-193px)} 
  78% {transform: translateY(-193px)}
  79% {transform: translateY(-360px) scale(0)}
  100% {transform: translateY(-360px) scale(0)}
}

#Shadow2 { 
  transform-origin: 50% 50%;
  animation-timing-function: ease-in;   
  animation-name: shadow2motion;
  animation-duration: 11s;
  animation-iteration-count: infinite;
}

@keyframes speck1motion {
  0% {transform: translateY(190px); opacity:1} 
  53% {transform: translateY(190px); opacity:1} 
  72% {transform: translateY(-193px); opacity:0} 
  100% {transform: translateY(-193px); opacity:0}
}

#Speck1 { 
  transform-origin: 50% 50%;
  animation-timing-function: cubic;   
  animation-name: speck1motion;
  animation-duration: 11s;
  animation-iteration-count: infinite;
}

@keyframes speck2motion {
  0% {transform: translateY(190px); opacity:1} 
  53% {transform: translateY(190px); opacity:1} 
  72% {transform: translateY(-293px); opacity:0.5} 
  75% {transform: translateY(-293px); opacity:0}  
  100% {transform: translateY(-293px); opacity:0}
}

#Speck2 { 
  transform-origin: 50% 50%;
  animation-timing-function: cubic;   
  animation-name: speck2motion;
  animation-duration: 11s;
  animation-iteration-count: infinite;
}

@keyframes speck3motion {
  0% {transform: translateY(190px); opacity:1} 
  53% {transform: translateY(190px); opacity:1} 
  70% {transform: translateY(-283px); opacity:0.5} 
  73% {transform: translateY(-283px); opacity:0}  
  100% {transform: translateY(-293px); opacity:0}
}

#Speck3 { 
  transform-origin: 50% 50%;
  animation-timing-function: cubic;   
  animation-name: speck3motion;
  animation-duration: 11s;
  animation-iteration-count: infinite;
}

@keyframes speck4motion {
  0% {transform: translateY(190px); opacity:1} 
  53% {transform: translateY(190px); opacity:1} 
  77% {transform: translateY(-293px); opacity:1} 
  80% {transform: translateY(-293px); opacity:0}  
  100% {transform: translateY(-293px); opacity:0}
}

#Speck4 { 
  transform-origin: 50% 50%;
  animation-timing-function: cubic;   
  animation-name: speck4motion;
  animation-duration: 11s;
  animation-iteration-count: infinite;
}

@keyframes beammotion {
  0% {opacity: 0} 
  46% {opacity: 0}
  49% {opacity: 1}
  72% {opacity: 1} 
  74% {opacity: 0}
  100% {opacity: 0}
}

#Beam { 
  transform-origin: 50% 50%;
  animation-timing-function: cubic;   
  animation-name: beammotion;
  animation-duration: 11s;
  animation-iteration-count: infinite;
}

@keyframes lholemotion {
  0% {transform: scale(0)} 
  40% {transform: scale(0)} 
  44% {transform: scale(1)}
  73.4% {transform: scale(1)}
  74.1% {transform: scale(1.1)} 
  76% {transform: scale(0)}
  100% {transform: scale(0)}
}

#LittleHole { 
  transform-origin: 50% 50%;
  animation-timing-function: cubic;   
  animation-name: lholemotion;
  animation-duration: 11s;
  animation-iteration-count: infinite;
}

@keyframes fpromotion {
  0% {transform: translateY(-200px)} 
  40% {transform: translateY(0px)}
  78% {transform: translateY(0px)}
  85% {transform: translateY(-200px)}
  100% {transform: translateY(-200px)}
}

#FrontProtrusionTop { 
  transform-origin: 50% 50%;
  animation-timing-function: cubic;   
  animation-name: fpromotion;
  animation-duration: 11s;
  animation-iteration-count: infinite;
}

#FrontProtrusionBottom { 
  transform-origin: 50% 50%;
  animation-timing-function: cubic;   
  animation-name: fpromotion;
  animation-duration: 11s;
  animation-iteration-count: infinite;
}

#BackProtrusion { 
  transform-origin: 50% 50%;
  animation-timing-function: cubic;   
  animation-name: fpromotion;
  animation-duration: 11s;
  animation-iteration-count: infinite;
}

@keyframes bholemotion {
  0% {transform: scale(0)} 
  5% {transform: scale(1)}
  83% {transform: scale(1)}
  88% {transform: scale(0)}
  100% {transform: scale(0)}
}

#BigHole { 
  transform-origin: 50% 50%;
  animation-timing-function: cubic;   
  animation-name: bholemotion;
  animation-duration: 11s;
  animation-iteration-count: infinite;
}

@keyframes hideAfter10s {
  0% { opacity: 1; }
  99% { opacity: 1; }
  100% { opacity: 0; }
}