:root {
  --goblinFontSize: 5rem;             /* size of goblin in font sizes */

  --goblinTop: 2.2rem;                /* spacing of goblin from the top */
  --goblinLeft: 17.2rem;              /* goblin stands next to the .AU, close enough to hit */

  --goblinWalkSpeed: 1.0;             /* movement speed of the goblin */
  --goblinWalkDistance: 6rem;         /* ground covered by the goblin */
  --goblinWalkStartX: 6rem;           /* ground covered by the goblin */
  --goblinWalkStopX: 0rem;            /* ground covered by the goblin */

  --goblinHeadWobbleTop: 0.0rem;      /* movement of the goblins head, top of range */
  --goblinHeadWobbleBottom: 0.12rem;  /* movement of the goblins head, bottom of range */

  --goblinShoeMotionTop: 0.0rem;      /* goblins shoe arc, top of range */
  --goblinShoeMotionBottom: 0.1rem;   /* goblins shoe arc, bottom of range */
  --goblinShoeMotionLeft: 0.0rem;     /* goblins shoe arc, left of range */
  --goblinShoeMotionRight: 0.5rem;    /* goblins shoe arc, right of range */

  --goblinSpeedFactor: 1.1;           /* normal is 1, use 3 or 5 to speedup. use 0.5 for half speed */

  --goblinTimingStartWalking: 1.0s;   /* wait this many seconds before fading in the goblin */
  --goblinTimingWalkDuration: 6.0s;   /* the main animation transition key timing */

  --goblinTimingStartHitting: 9.0s;   /* wait this many seconds before fading in the goblin */
  --goblinTimingHitDuration: 1.0s;    /* the hit animation transition key timing */

  --maxWidthWithGoblins: calc(var(--hanlyLeft) + var(--hanlySize) * 2.7 + 
                              var(--auLeft) + var(--auSize) * 1.7 + 
                              var(--goblinWalkDistance)); /* help work out when to wrap */

  --debugBorder: 0px solid black;   /* normally 0px. set to 1px when debugging. */
  --debugBorderImg: 0px solid blue; /* normally 0px. set to 1px when debugging. */


}
/* over-ride some settings when in portrait mode */
@media (orientation: portrait) {
  :root {
/*
    --goblinTop: 0.2rem;
    --goblinLeft: 14.3rem;
*/
  }
}

.body-goblins {
  background-image: linear-gradient(90deg, lightgreen, green);
}

.flex-container {
  max-width: var(--maxWidthWithGoblins);
}

.img-goblin {
  width: 12rem;
  border: var(--debugBorderImg);
}

.a-goblins {
  border: 1px solid transparent;
}

.a-goblins:hover {
  border: 1px solid lightgrey;
  background-image: linear-gradient(lightgreen, green);
  background-blend-mode: overlay;
}

/*
 * MOVE HEAD
 */
.goblin-move-head {
  top: var(--goblinTop);
  left: var(--goblinLeft);

  border: var(--debugBorder);
  opacity: 100%;

  animation-name: goblin-move-head-animation;
  animation-delay: calc(var(--goblinTimingStartWalking) / var(--goblinSpeedFactor));
  animation-duration: calc(var(--goblinTimingWalkDuration) / var(--goblinSpeedFactor));
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-timing-function: linear;
  /* animation-composition: add; */
  
}

@keyframes goblin-move-head-animation {
  0% {
    opacity: 0%;
    transform: translateX(calc(var(--goblinWalkStartX) - 0.0 * var(--goblinWalkDistance)))  
               translateY(var(--goblinHeadWobbleTop));
  }
  10% {
    opacity: 50%;
    transform: translateX(calc(var(--goblinWalkStartX) - 0.1 * var(--goblinWalkDistance))) 
               translateY(var(--goblinHeadWobbleBottom));
  }
  20% {
    opacity: 100%;
    transform: translateX(calc(var(--goblinWalkStartX) - 0.2 * var(--goblinWalkDistance))) 
               translateY(var(--goblinHeadWobbleTop));
  }
  30% {
    transform: translateX(calc(var(--goblinWalkStartX) - 0.3 * var(--goblinWalkDistance))) 
               translateY(var(--goblinHeadWobbleBottom));
  }
  40% {
    transform: translateX(calc(var(--goblinWalkStartX) - 0.4 * var(--goblinWalkDistance))) 
               translateY(var(--goblinHeadWobbleTop));
  }  
  50% {
    transform: translateX(calc(var(--goblinWalkStartX) - 0.5 * var(--goblinWalkDistance))) 
               translateY(var(--goblinHeadWobbleBottom));
  }
  60% {
    transform: translateX(calc(var(--goblinWalkStartX) - 0.6 * var(--goblinWalkDistance))) 
               translateY(var(--goblinHeadWobbleTop));
  }
  70% {
    transform: translateX(calc(var(--goblinWalkStartX) - 0.7 * var(--goblinWalkDistance))) 
               translateY(var(--goblinHeadWobbleBottom));
  }
  80% {
    transform: translateX(calc(var(--goblinWalkStartX) - 0.8 * var(--goblinWalkDistance))) 
               translateY(var(--goblinHeadWobbleTop));
  }
  90% {
    transform: translateX(calc(var(--goblinWalkStartX) - 0.9 * var(--goblinWalkDistance))) 
               translateY(var(--goblinHeadWobbleBottom));
  }
  100% {
    opacity: 100%;
    transform: translateX(calc(var(--goblinWalkStartX) - 1.0 * var(--goblinWalkDistance))) 
               translateY(var(--goblinHeadWobbleTop));
  }
}

/*
 * MOVE TORSO
 */
 .goblin-move-torso {
  top: var(--goblinTop);
  left: var(--goblinLeft);

  border: var(--debugBorder);
  opacity: 100%;

  animation-name: goblin-move-torso-animation;
  animation-delay: calc(var(--goblinTimingStartWalking) / var(--goblinSpeedFactor));
  animation-duration: calc(var(--goblinTimingWalkDuration) / var(--goblinSpeedFactor));
  animation-iteration-count: 1;
  animation-fill-mode: both;
  animation-timing-function: linear;
  animation-direction: normal;
  /* animation-composition: add; */
  
}

@keyframes goblin-move-torso-animation {
  0% {
    opacity: 0%;
    transform: translateX(calc(var(--goblinWalkStartX) - 0.0 * var(--goblinWalkDistance))) 
               translateY(0rem);
  }
  20% {
    opacity: 100%;
  }
  100% {
    opacity: 100%;
    transform: translateX(calc(var(--goblinWalkStartX) - 1.0 * var(--goblinWalkDistance))) 
               translateY(0rem);
  }
}

/*
 * MOVE the BACK SHOE (the right show is at the back as we look)
 */
 .goblin-move-backshoe {
  top: var(--goblinTop);
  left: var(--goblinLeft);

  border: var(--debugBorder);
  opacity: 100%;

  animation-name: goblin-move-backshoe-animation;
  animation-delay: calc(var(--goblinTimingStartWalking) / var(--goblinSpeedFactor));
  animation-duration: calc(var(--goblinTimingWalkDuration) / var(--goblinSpeedFactor));
  animation-iteration-count: 1;
  animation-fill-mode: both;
  animation-timing-function: linear;
  animation-direction: normal;
  /* animation-composition: add; */
}

@keyframes goblin-move-backshoe-animation {
    0% {
      opacity: 0%;
      transform: translateX(calc(var(--goblinWalkStartX) - 0.0 * var(--goblinWalkDistance)))  
                 translateY(var(--goblinShoeMotionTop));
    }
    10% {
      opacity: 50%;
      transform: translateX(calc(var(--goblinWalkStartX) - 0.1 * var(--goblinWalkDistance))) 
                 translateY(var(--goblinShoeMotionBottom));
    }
    20% {
      opacity: 100%;
      transform: translateX(calc(var(--goblinWalkStartX) - 0.2 * var(--goblinWalkDistance))) 
                 translateY(var(--goblinShoeMotionTop));
    }
    30% {
      transform: translateX(calc(var(--goblinWalkStartX) - 0.3 * var(--goblinWalkDistance))) 
                 translateY(var(--goblinShoeMotionBottom));
    }
    40% {
      transform: translateX(calc(var(--goblinWalkStartX) - 0.4 * var(--goblinWalkDistance))) 
                 translateY(var(--goblinShoeMotionTop));
    }  
    50% {
      transform: translateX(calc(var(--goblinWalkStartX) - 0.5 * var(--goblinWalkDistance))) 
                 translateY(var(--goblinShoeMotionBottom));
    }
    60% {
      transform: translateX(calc(var(--goblinWalkStartX) - 0.6 * var(--goblinWalkDistance))) 
                 translateY(var(--goblinShoeMotionTop));
    }
    70% {
      transform: translateX(calc(var(--goblinWalkStartX) - 0.7 * var(--goblinWalkDistance))) 
                 translateY(var(--goblinShoeMotionBottom));
    }
    80% {
      transform: translateX(calc(var(--goblinWalkStartX) - 0.8 * var(--goblinWalkDistance))) 
                 translateY(var(--goblinShoeMotionTop));
    }
    90% {
      transform: translateX(calc(var(--goblinWalkStartX) - 0.9 * var(--goblinWalkDistance))) 
                 translateY(var(--goblinShoeMotionBottom));
    }
    100% {
      opacity: 100%;
      transform: translateX(calc(var(--goblinWalkStartX) - 1.0 * var(--goblinWalkDistance))) 
                 translateY(var(--goblinShoeMotionTop));
    }
  }

/*
 * HOLD CLUB
 */
.goblin-hold-club {
  top: var(--goblinTop);
  left: var(--goblinLeft);

  border: var(--debugBorder);
  opacity: 0%;

  animation-name: goblin-hold-club-animation;
  animation-delay: calc(var(--goblinTimingStartHitting) / var(--goblinSpeedFactor));
  animation-duration: calc(1.0 * var(--goblinTimingHitDuration) / var(--goblinSpeedFactor));
  animation-iteration-count: 10;
  animation-fill-mode: none;
  animation-timing-function: linear;
  animation-direction: normal;
  /* animation-composition: add; */
}

@keyframes goblin-hold-club-animation {
  0% {
    opacity: 100%;
  }
  79% {
    opacity: 100%;
  }
  80% {
    opacity: 0%;
  }
  100% {
    opacity: 0%;
  }
}
/*
 * HIT CLUB
 */
.goblin-hit-club {
  top: var(--goblinTop);
  left: var(--goblinLeft);

  border: var(--debugBorder);
  opacity: 0%;

  animation-name: goblin-hit-club-animation;
  animation-delay: calc(var(--goblinTimingStartHitting) / var(--goblinSpeedFactor));
  animation-duration: calc(1.0 * var(--goblinTimingHitDuration) / var(--goblinSpeedFactor));
  animation-iteration-count: 10;
  animation-fill-mode: none;
  animation-timing-function: linear;
  animation-direction: normal;
  /* animation-composition: add; */
}

@keyframes goblin-hit-club-animation {
  0% {
    opacity: 0%;
  }
  79% {
    opacity: 0%;
  }
  80% {
    opacity: 100%;
  }
  100% {
    opacity: 100%;
  }
}