/* HORIZONTAL SCROLLING BACKGROUND IMAGE v0.1 (RD) 30/04/2024 */

@media only screen and (-webkit-min-device-pixel-ratio:0), (min--moz-device-pixel-ratio:0) {
 
     .anim-container {
      position: relative;
      overflow: hidden;
     }

     .scrollingBG {
      background-size: 150% !important;
      animation: 60s scrollingBG infinite linear;
     }

     @keyframes scrollingBG {
      100% {
       background-position: 1500% 0px;
      }
     }



/* BOUNCING FOOTBALL */

     .football {
      width: 114px;
      height: 264px;
      position:absolute; top:-140px; 
      right:0;
      display: inline-block;
     }

     .football__ball,
     .football__shadow {
      width: 100%;
      height: 43.18%;
      position: absolute;
      right: 0%;
      border-radius: 50%;
     }

     .football__ball {
      top: 0;
      background-image: url(https://image.news.marksandspencer.com/lib/fe9915737567017474/m/1/a1bfc02f-b84a-4e00-8f50-b7784b8d5ac1.png);
      background-size: 100%;
      animation: football-ball-anim 0.8s infinite ease-in;
     }

     .football__shadow {
      bottom: 0;
      background-color: hsla(0, 0%, 0%, 0.2);
      transform: translateY(50%) scaleY(0.4) scaleX(1.2);
      animation: football-shadow-anim 0.8s infinite ease-in;
     }

     @keyframes football-ball-anim {

      0%,
      100% {
       transform: translateY(0);
      }

      50% {
       transform: translateY(131.58%);
       animation-timing-function: ease-out;
      }
     }

     @keyframes football-shadow-anim {

      0%,
      100% {
       transform: translateY(50%) scaleY(0.4) scaleX(1.2);
       background-color: rgba(0, 66%, 72%, 0.2);
       filter: blur(10px);
      }

      50% {
       transform: translateY(50%) scaleY(0.1) scaleX(0.3);
       background-color: rgba(0, 66%, 72%, 0.5);
       animation-timing-function: ease-out;
       filter: blur(0);
      }
     }
     
     @media only screen and (max-width: 599px) {
      .football {
       width: 86px;
       height: 198px;
       position:absolute; top:-105px;
      }
     }
     
     @media only screen and (max-width: 479px) {
      .football {
       width: 57px;
       height: 132px;
       position:absolute; top:-70px;
      }
     }




 
}