/**
 * @file
 * ANIMATION
 *
 * @see Matthewlein.com/tools/ceaser CSS Easing Animation Tool ('animation-timing-function')
 * @see
 *
 *
 * @todo
 * -
 *
 **/





article#artcl1
{
 position: absolute;
 top:    40vh;
 left:    5vw;
 width:  25vw;
  animation-name:             artcl1-animation;
  animation-delay:            0s;
  animation-duration:         15s;
  animation-iteration-count:  1;
  animation-timing-function:  ease-in-out;
}

@keyframes artcl1-animation
{
   0% {top: 99vh; left:  5vw; }
  20% {top: 85vh; left: 25vw; }
  40% {top: 70vh; left: 10vw; }
  70% {top: 55vh; left: 15vw; }
 100% {top: 40vh; left:  5vw; }
}

article#artcl1:hover
{
 animation-play-state: paused;
}



@media (prefers-reduced-motion: reduce)
{

 article#artcl1
 {
  animation: none;
  bottom: 30vh; left:30vw;
 }

 video.background-video
 {
  display: none;
 }

}