@import url(https://fonts.googleapis.com/css?family=Montserrat&display=swap);
@import url(https://fonts.googleapis.com/css?family=Barlow);
@import url(https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900);
@import url(https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap);
@charset "UTF-8";
/*animate-charcter Start*/
.text-color-effect {
  background-image: linear-gradient(-225deg, #231557 0%, #44107a 29%, #ff1361 67%, #fff800 100%);
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #000;
  background-clip: text;
  /* text-fill-color: transparent; */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  /* display: inline-block; */
  /* font-size: 190px; */
  height: auto;
}

/*text-color-animation End*/
/*waviy Start */
.waviy-effect {
  -webkit-box-reflect: below -20px linear-gradient(transparent, rgba(0, 0, 0, 0.2));
  position: relative;
  position: relative;
  /* display: inline-block; */
  color: #000;
  animation: waviy 1s infinite;
  animation-delay: calc(0.1s * var(--i));
}

@keyframes waviy {
  0%, 40%, 100% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-20px);
  }
}
/*waviy End */
/* flip-text-animation Start*/
.flip-text-effect {
  position: relative;
  /* font-size: 40px; */
  color: #000;
  animation: loading-flip 2s infinite;
}

@keyframes loading-flip {
  0%, 80% {
    transform: rotateY(360deg);
  }
}
/* End */
/* flipX class and key frames*/
.flipX-effect {
  animation: 3s anim-flipX ease infinite;
}

@keyframes anim-flipX {
  0% {
    opacity: 0;
    transform: rotateX(90def);
  }
  50% {
    opacity: 1;
    transform: rotateX(720deg);
  }
  100% {
    /* animate nothing to pause animation at the end */
    opacity: 1;
    transform: rotateX(720deg);
  }
}
/* End */
/* lineup class and keyframes */
.lineUp-effect {
  animation: 2s anim-lineUp ease-out infinite;
}

@keyframes anim-lineUp {
  0% {
    opacity: 0;
    transform: translateY(80%);
  }
  20% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    transform: translateY(0%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
/* End */
/* flipY class and keyframes*/
.flipY-effect {
  animation-name: spin, depth;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 6s;
}

@keyframes spin {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(-360deg);
  }
}
@keyframes depth {
  0% {
    text-shadow: 0 0 black;
  }
  25% {
    text-shadow: 1px 0 black, 2px 0 black, 3px 0 black, 4px 0 black, 5px 0 black;
  }
  50% {
    text-shadow: 0 0 black;
  }
  75% {
    text-shadow: -1px 0 black, -2px 0 black, -3px 0 black, -4px 0 black, -5px 0 black;
  }
  100% {
    text-shadow: 0 0 black;
  }
}
/* End */
/* subtle zoom to attention and then back */
.pop-outin-effect {
  animation: 2s anim-popoutin ease infinite;
}

@keyframes anim-popoutin {
  0% {
    /* color: black; */
    transform: scale(0);
    opacity: 0;
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  25% {
    /* color: red; */
    transform: scale(2);
    opacity: 1;
    text-shadow: 3px 10px 5px rgba(0, 0, 0, 0.5);
  }
  50% {
    /* color: black; */
    transform: scale(1);
    opacity: 1;
    text-shadow: 1px 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    text-shadow: 1px 0 0 rgba(0, 0, 0, 0);
  }
}
.fromtop-effect {
  animation: 2s anim-fromtop linear infinite;
}

@keyframes anim-fromtop {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  25% {
    opacity: 1;
    transform: translateY(0%);
  }
}
/* End */
/* Highlight text start*/
/* .highlight-text-effect {

  color: black;
  font-family: 'Bebas Neue', cursive;
  transform: translate(-50%,-50%);
  background-image: linear-gradient(gold, gold);
  background-size: 100% 10px;
  background-repeat: no-repeat;
  background-position: 100% 0%;
   transition: background-size .7s, background-position .5s ease-in-out;
}

.highlight-text-effect:hover {
  background-size: 100% 100%;
  transition: background-position .7s, background-size .5s ease-in-out;
} */
/* end*/
/* NightText Effect Start */
@keyframes night-lights {
  0% {
    color: hsl(230, 40%, 80%);
    text-shadow: 0 0 1em hsla(320, 100%, 50%, 0.2), 0 0 0.125em hsla(320, 100%, 60%, 0.3), -1em -0.125em 0.5em hsla(40, 100%, 60%, 0), 1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
  }
  30% {
    color: hsl(230, 80%, 90%);
    text-shadow: 0 0 1em hsla(320, 100%, 50%, 0.5), 0 0 0.125em hsla(320, 100%, 60%, 0.5), -0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2), 0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
  }
  40% {
    color: hsl(230, 100%, 95%);
    text-shadow: 0 0 1em hsla(320, 100%, 50%, 0.5), 0 0 0.125em hsla(320, 100%, 90%, 0.5), -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2), 0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
  }
  70% {
    color: hsl(230, 80%, 90%);
    text-shadow: 0 0 1em hsla(320, 100%, 50%, 0.5), 0 0 0.125em hsla(320, 100%, 60%, 0.5), 0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2), -0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
  }
  100% {
    color: hsl(230, 40%, 80%);
    text-shadow: 0 0 1em hsla(320, 100%, 50%, 0.2), 0 0 0.125em hsla(320, 100%, 60%, 0.3), 1em -0.125em 0.5em hsla(40, 100%, 60%, 0), -1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
  }
}
.night-light-effect {
  color: hsl(230, 100%, 95%);
  animation: night-lights 5s 750ms linear infinite;
}

/* End */
/* Flash start */
.flash-effect {
  color: #484848;
  letter-spacing: 0px;
  cursor: pointer;
  transition: 0.5s linear;
}

.flash-effect:hover {
  color: #fff;
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff;
  margin-right: 5px;
  margin-left: 5px;
}

/* End */
/* slide to unlock shine start */
.unlock-shine-effect {
  position: absolute;
  background: black;
  /* top: 50%; */
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 48px;
  color: #ffffff;
  background: linear-gradient(to right, #ffffff 0, white 10%, #4d4d4d 20%);
  background-position: 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 3s infinite linear;
  animation-fill-mode: forwards;
  -webkit-text-size-adjust: none;
  text-decoration: none;
  white-space: nowrap;
}

@keyframes shine {
  0% {
    background-position: 0;
  }
  60% {
    background-position: 180px;
  }
  100% {
    background-position: 180px;
  }
}
/* end */
/* Shining text effect Start */
.shining-text-effect {
  text-align: center;
  /* font-size: 40px; */
  background: linear-gradient(90deg, #000, #fff, #000);
  letter-spacing: 0px;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-repeat: no-repeat;
  background-size: 80%;
  animation: Shining 3s linear infinite;
  position: relative;
}

@keyframes Shining {
  0% {
    background-position-x: -500%;
  }
  100% {
    background-position-x: 500%;
  }
}
/* End */
/* Neon Lights start */
.neons-effect {
  text-align: center;
  text-align: center;
  animation: glow 2s ease-in-out infinite alternate;
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    color: #fff;
    text-shadow: 0 0 10px #00fff2, 0 0 20px #00fff2, 0 0 30px #00fff2, 0 0 40px #00fff2, 0 0 50px #00fff2, 0 0 60px #00fff2, 0 0 70px #00fff2, 0 0 90px #00fff2;
  }
  to {
    color: gray;
    text-shadow: 0 0 20px #00fff2, 0 0 30px #00fff2, 0 0 40px #00fff2, 0 0 50px #00fff2, 0 0 60px #00fff2, 0 0 70px #00fff2, 0 0 80px #00fff2, 0 1 90px #00fff2;
  }
}
/* End */
/* Animated Text-Shadow */
/* .text-shadows-effect {
    animation: text-shadow 1.5s ease-in-out infinite;
    font-size: 5em;
    font-weight: 900;
    line-height: 1;
    text-align: center;
}

.text-shadows-effect:hover {
    animation-play-state: paused;
}

@keyframes text-shadow {
    0% {  
        transform: translateY(0);
        text-shadow: 
            0 0 0 #0c2ffb, 
            0 0 0 #2cfcfd, 
            0 0 0 #fb203b, 
            0 0 0 #fefc4b;
    }

    20% {  
        transform: translateY(-1em);
        text-shadow: 
            0 0.125em 0 #0c2ffb, 
            0 0.25em 0 #2cfcfd, 
            0 -0.125em 0 #fb203b, 
            0 -0.25em 0 #fefc4b;
    }

    40% {  
        transform: translateY(0.5em);
        text-shadow: 
            0 -0.0625em 0 #0c2ffb, 
            0 -0.125em 0 #2cfcfd, 
            0 0.0625em 0 #fb203b, 
            0 0.125em 0 #fefc4b;
    }

   60% {
        transform: translateY(-0.25em);
        text-shadow: 
            0 0.03125em 0 #0c2ffb, 
            0 0.0625em 0 #2cfcfd, 
            0 -0.03125em 0 #fb203b, 
            0 -0.0625em 0 #fefc4b;
    }

    80% {  
        transform: translateY(0);
        text-shadow: 
            0 0 0 #0c2ffb, 
            0 0 0 #2cfcfd, 
            0 0 0 #fb203b, 
            0 0 0 #fefc4b;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
      animation: none !important;
      transition: none !important;
    }
} */
/*  End */
/* Background Clip start */
.background-clips-effect {
  text-align: center;
  background: linear-gradient(to right, #095fab 10%, #25abe8 50%, #57d75b 60%);
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 1.5s linear infinite;
  /* display: inline-block; */
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}
/* End */
/* Typo triple */
.typo-triple-effect {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  letter-spacing: 0.1em;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: white;
  text-shadow: 8px 8px #ff1f8f, 20px 20px #000000;
}

/* End */
/*Metal text shader start */
.metal-shader-effect {
  position: relative;
  /* margin: 15vh auto; */
  color: transparent !important;
  /* font-size: 25vw; */
  letter-spacing: 0.05em;
  background-image: url(https://images.unsplash.com/photo-1501166222995-ff31c7e93cef?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTcyMDc2NzU&ixlib=rb-1.2.1&q=80);
  background-size: cover;
  background-clip: text;
  -webkit-background-clip: text;
}

/* End */
/*  3D Text Animation [ANIMATION] */
/* :root {
  --color-primary: #f6aca2, 0.5;
  --color-secondary: #f49b90;
  --color-tertiary: #f28b7d;
  --color-quaternary: #f07a6a;
  --color-quinary: #ee6352;

} */
.text-effect-3ds {
  text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
  text-align: center;
  margin: 0;
  color: var(--color-primary);
  /* //color: transparent;
  //background-color: white;
  //background-clip: text; */
  animation: shadows 2s ease-in infinite, moves 2s ease-in infinite;
  letter-spacing: 0.4rem;
}

@keyframes shadows {
  0% {
    text-shadow: none;
  }
  10% {
    text-shadow: 3px 3px 0 var(--color-secondary);
  }
  20% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary);
  }
  30% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
  }
  40% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
  }
  50% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
  }
  60% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
  }
  70% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
  }
  80% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary);
  }
  90% {
    text-shadow: 3px 3px 0 var(--color-secondary);
  }
  100% {
    text-shadow: none;
  }
}
@keyframes moves {
  0% {
    transform: translate(0px, 0px);
  }
  40% {
    transform: translate(-12px, -12px);
  }
  50% {
    transform: translate(-12px, -12px);
  }
  60% {
    transform: translate(-12px, -12px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}
/* End */
/* Typography Start */
.layer-effect {
  transform-style: preserve-3d;
  animation: ಠ_ಠ 5s infinite alternate ease-in-out -7.5s;
  animation-fill-mode: forwards;
  transform: rotateY(40deg) rotateX(33deg) translateZ(0);
}

.layer-effect:after {
  font: 150px/0.65 "Pacifico", "Kaushan Script", Futura, "Roboto", "Trebuchet MS", Helvetica, sans-serif;
  white-space: pre;
  text-align: center;
  color: whitesmoke;
  letter-spacing: -2px;
  text-shadow: 4px 0 10px rgba(0, 0, 0, 0.13);
}

@keyframes ಠ_ಠ {
  100% {
    transform: rotateY(-40deg) rotateX(-43deg);
  }
}
/* End */
/* Neon Sign Blink start */
.neon-blink-effect {
  text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
  color: #fff6a9;
  text-align: center;
  animation: blink 3s infinite;
  -webkit-animation: blink 3s infinite;
}
@keyframes blink {
  20%, 24%, 55% {
    color: #111;
    text-shadow: none;
  }
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9;
  }
}
/* Neon Sign Blink end */
/* Smoke Text */
.smokes-effect {
  display: inline-flex;
  text-shadow: 0 0 0 #f5f5f5;
  animation: smoke 3s ease infinite;
}

@keyframes smoke {
  60% {
    text-shadow: 0 0 40px #f5f5f5;
  }
  to {
    transform: translate3d(12rem, -10rem, 0) skewX(30deg);
    text-shadow: 0 0 20px #f5f5f5;
    opacity: 0;
  }
}
/* end */
/* Rainbow-Effect start */
.rainbow-effect {
  -webkit-text-stroke-width: 1.25px;
  -webkit-text-stroke-color: #000;
  /* font-size: 100px; */
  text-shadow: 0 0px #f3c623, 0 0px #f2aaaa;
  transform: translate(0, 100%) rotate(4deg);
  animation: jump 2s ease-in-out infinite;
  /* display: inline-block; */
  color: #fff;
}

@keyframes jump {
  33% {
    text-shadow: 0 60px #f37121, 0 150px #f2aaaa;
  }
  50% {
    transform: translate(0, 0) rotate(-4deg);
    text-shadow: 0 0px #8fc0a9, 0 0px #84a9ac;
  }
  66.67% {
    text-shadow: 0 -60px #d54062, 0 -150px #8fc0a9;
  }
}
/* end */
.animate-charcter {
  background-image: linear-gradient(-225deg, #231557 0%, #44107a 29%, #ff1361 67%, #fff800 100%);
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}
/*text shadows*/
.text-shadows {
  text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
  text-align: center;
  margin: 0;
  color: var(--color-primary);
  animation: shadows 1.2s ease-in infinite, move 1.2s ease-in infinite;
  letter-spacing: 0.4rem;
}

@keyframes shadows {
  0% {
    text-shadow: none;
  }
  10% {
    text-shadow: 3px 3px 0 var(--color-secondary);
  }
  20% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary);
  }
  30% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
  }
  40% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
  }
  50% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
  }
  60% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
  }
  70% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
  }
  80% {
    text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary);
  }
  90% {
    text-shadow: 3px 3px 0 var(--color-secondary);
  }
  100% {
    text-shadow: none;
  }
}
@keyframes move {
  0% {
    transform: translate(0px, 0px);
  }
  40% {
    transform: translate(-12px, -12px);
  }
  50% {
    transform: translate(-12px, -12px);
  }
  60% {
    transform: translate(-12px, -12px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}
/*Glow effects*/
.glow-effects {
  color: white;
  animation-name: glow;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  padding: 10px;
}

@keyframes glow {
  from {
    text-shadow: 0px 0px 5px #fff, 0px 0px 5px #614ad3;
  }
  to {
    text-shadow: 0px 0px 20px #fff, 0px 0px 20px #614ad3;
  }
}
/*type writting animation*/
.typewriter {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: 0.15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: 0.15em; /* Adjust as needed */
  animation: typing 3.5s steps(30, end), blink-caret 0.5s step-end infinite;
}

/*Fade in Effects*/
.frame-1 {
  animation-delay: 0s;
  animation: fadeIn 1s ease-in-out;
}

/* The typing effect */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: orange;
  }
}
/*Font Hover effect*/
.font-hover-effect {
  letter-spacing: -3px;
  transition: 700ms ease;
  font-variation-settings: "wght" 311;
  margin-bottom: 0.8rem;
  color: PaleGoldenRod;
  outline: none;
  text-align: center;
}

.font-hover-effect:hover {
  font-variation-settings: "wght" 582;
  letter-spacing: 1px;
}

/*Fancy text effect*/
@supports ((-webkit-background-clip: text) or (background-clip: text)) or (-webkit-background-clip: text) {
  .fancy-text-effect {
    background-image: url("data:image/svg+xml,%3Csvg width='2250' height='900' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath fill='%2300A080' d='M0 0h2255v899H0z'/%3E%3Ccircle cx='366' cy='207' r='366' fill='%2300FDCF'/%3E%3Ccircle cx='1777.5' cy='318.5' r='477.5' fill='%2300FDCF'/%3E%3Ccircle cx='1215' cy='737' r='366' fill='%23008060'/%3E%3C/g%3E%3C/svg%3E%0A");
    background-size: 110% auto;
    background-position: center;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
  }
}

/*Fancy with underline*/
.fancy-text-underline-effect {
  position: relative;
  white-space: nowrap;
}
.fancy-text-underline-effect:after {
  --deco-height: 0.3125em;
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--deco-height) * -0.625);
  height: var(--deco-height);
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M-17 30.5C-1 22 72-4 54 13 37.9 28.2-2.5 57.5 16 55.5s72-29 104-40' stroke='%2300FDCF' stroke-width='10'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h100v64H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  background-size: auto 100%;
  background-repeat: round;
  background-position: 0em;
}

/*Water wave effects*/
.water-wave-effects {
  color: transparent;
  -webkit-text-stroke: 2px #03a9f4;
  animation: animate 4s ease-in-out infinite;
}

@keyframes animate {
  0%, 100% {
    clip-path: polygon(0% 32%, 16% 34%, 43% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
  }
  50% {
    clip-path: polygon(0% 60%, 15% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
  }
}
/*Water wave effects Ends*/
/*Slashed Effect*/
.slashed-effects {
  position: relative;
  color: #333;
}

.slashed-effects::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px; /* Adjust the thickness of the slash */
  background-color: #333;
  transform: rotate(-45deg);
}

.slashed-effects::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px; /* Adjust the thickness of the slash */
  background-color: #333;
  transform: rotate(45deg);
}

/*Gradient Effect*/
.gradient-text-effects {
  letter-spacing: 2px;
  text-align: center;
  color: #f35626 !important;
  background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
  -webkit-background-clip: text;
  /* -webkit-text-fill-color: transparent; */
  -webkit-animation: hue 10s infinite linear;
}
/*Focus Effect*/
.focus-effect {
  width: 100%;
  height: 100%;
  color: #fff;
  text-align: center;
  line-height: 100px;
  cursor: pointer;
  outline: none;
  position: relative;
  transition: background-color 0.3s, color 0.3s;
}

.focus-div:hover,
.focus-div:focus {
  color: #fff;
}

.focus-effect::before {
  content: "";
  filter: blur(3px);
}

.focus-effect::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 100%;
  border-top: 2px solid;
  border-bottom: 2px solid;
  animation: mask-move 1s linear infinite alternate;
}

@keyframes mask-move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(129px);
  }
}
/*3D Rotate */
.three-rotate-effects {
  position: relative;
  left: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5) 90%, transparent);
  line-height: 0.76em;
  text-align: center;
  white-space: nowrap;
  padding: 0px 10px;
  transform-style: preserve-3d;
  text-shadow: 0 10px 15px;
  transform: translate(-50%, -50%) rotateX(0deg) translateZ(109px);
  animation: rotateAnimation 3s infinite alternate;
}

@keyframes rotateAnimation {
  from {
    transform: translate(-50%, -50%) rotateX(0deg) translateZ(109px);
  }
  to {
    transform: translate(-50%, -50%) rotateX(360deg) translateZ(109px);
  }
}
/*fade-in effect*/
/* .fade-in-effect {
  position: relative;
  -webkit-box-reflect: below -20px linear-gradient(transparent, rgba(0,0,0,.2));
  font-size: 60px;
} */
.fade-in-effects, .fade-in-effects:hover {
  position: relative;
  display: inline-block;
  animation: fadeIn 1s ease-in-out;
}

/*3D Flip Animation*/
.three-shadow-effect {
  display: inline-block;
  position: relative;
  color: #090908;
  transition: all 0.5s;
  animation: rotate 5s ease-in infinite;
  animation-direction: alternate;
  letter-spacing: 0.5vw;
  -webkit-text-stroke: 1.5px #c4cb58;
  transform-style: preserve-3d;
}

@keyframes rotate {
  0% {
    transform: rotateY(90deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes waviy {
  0%, 40%, 100% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-20px);
  }
}
/*Waviy effect end*/
/* Escape Effect Start */
.escape-effect {
  /* display:inline-block; */
  overflow: hidden;
  white-space: nowrap;
  animation: slidein 7s infinite;
}

@keyframes slidein {
  0% {
    margin-left: -800px;
  }
  20% {
    margin-left: -800px;
  }
  35% {
    margin-left: 0px;
  }
  100% {
    margin-left: 0px;
  }
}
/* End */
/* Text Revealing Effect */
.text-revealing-animation {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0px;
  animation: reveal 7s infinite;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-transform: translate3d(0, 0, 0);
  text-align: center;
}

@keyframes reveal {
  0% {
    opacity: 0;
    width: 0px;
  }
  20% {
    opacity: 1;
    width: 0px;
  }
  30% {
    width: 355px;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    width: 355px;
  }
}
/* End */
/* Frozen Effect */
.frozen {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/6963bbf342d87b3a2150bd8f59682b89.jpg);
  -webkit-background-clip: text;
  background-size: contain;
  width: 100%;
  text-align: center;
  color: transparent;
}

/* end */
/*  Blazing Fire start */
.blazing-fire-effect {
  /* display: inline-block; */
  margin: 0;
  color: rgb(255, 115, 0);
  /* font-size: 100px; */
  line-height: normal;
  min-width: 50px;
  outline: none;
  vertical-align: middle;
  text-shadow: 0 3px 20px red, 0 0 20px red, 0 0 10px orange, 4px -5px 6px yellow, -4px -10px 10px yellow, 0 -10px 30px yellow;
  animation: 2s Blazing infinite alternate linear;
}

@keyframes Blazing {
  0% {
    text-shadow: 0 3px 20px red, 0 0 20px red, 0 0 10px orange, 0 0 0 yellow, 0 0 5px yellow, -2px -5px 5px yellow, 4px -10px 10px yellow;
  }
  25% {
    text-shadow: 0 3px 20px red, 0 0 30px red, 0 0 20px orange, 0 0 5px yellow, -2px -5px 5px yellow, 3px -10px 10px yellow, -4px -15px 20px yellow;
  }
  50% {
    text-shadow: 0 3px 20px red, 0 0 20px red, 0 -5px 10px orange, -2px -5px 5px yellow, 3px -10px 10px yellow, -4px -15px 20px yellow, 2px -20px 30px rgba(255, 255, 0, 0.5);
  }
  75% {
    text-shadow: 0 3px 20px red, 0 0 20px red, 0 -5px 10px orange, 3px -5px 5px yellow, -4px -10px 10px yellow, 2px -20px 30px rgba(255, 255, 0, 0.5), 0px -25px 40px rgba(255, 255, 0, 0);
  }
  100% {
    text-shadow: 0 3px 20px red, 0 0 20px red, 0 0 10px orange, 0 0 0 yellow, 0 0 5px yellow, -2px -5px 5px yellow, 4px -10px 10px yellow;
  }
}
/*  Blazing Fire end */
/* font-palette start */
@font-face {
  font-family: "Rocher";
  src: url(https://assets.codepen.io/9632/RocherColorGX.woff2);
}
@font-palette-values --Grays {
  font-family: Rocher;
  base-palette: 9;
}
@font-palette-values --Purples {
  font-family: Rocher;
  base-palette: 6;
}
@font-palette-values --Mint {
  font-family: Rocher;
  base-palette: 7;
}
.grays-text-effect {
  font-palette: --Grays;
  font-family: "Rocher" !important;
}

.purples-text-effect {
  font-palette: --Purples;
  font-family: "Rocher" !important;
}

.mint-text-effect {
  font-palette: --Mint;
  font-family: "Rocher" !important;
}

/* end */
/* Slice start */
/* .sliced-text-effect-wrapper {
  display: grid;
  place-content: center;
  background-color: black;
  font-family: "Oswald", sans-serif;
  font-size: clamp(1.5rem, 1rem + 5vw, 80rem);
  font-weight: 100;
  text-transform: uppercase;
  color: hsl(0, 0%, 100%);
}

.sliced-text-effect-wrapper > div {
  grid-area: 1/1/-1/-1;
}
.sliced-text-effect-top {
  clip-path: polygon(0% 0%, 100% 0%, 100% 48%, 0% 58%);
}
.sliced-text-effect-bottom {
  clip-path: polygon(0% 60%, 100% 50%, 100% 100%, 0% 100%);
  color: transparent;
  background: -webkit-linear-gradient(177deg, black 53%, hsl(0, 0%, 100%) 65%);
  background: linear-gradient(177deg, black 53%, hsl(0, 0%, 100%) 65%);
  background-clip: text;
  -webkit-background-clip: text;
  transform: translateX(-0.02em);
} */
/* end */
/* Variable Fonts Hover Effect start */
.font-hover {
  letter-spacing: -3px;
  transition: 700ms ease;
  font-variation-settings: "wght" 311;
  margin-bottom: 0.8rem;
  /* color: PaleGoldenRod; */
  outline: none;
  text-align: center;
}

.font-hover:hover {
  font-variation-settings: "wght" 582;
  letter-spacing: 2px;
}

/* end */
/* Simple unexpected hover effect */
/* .unexpected-hover {
  --s: 0.1em;  
  --c: #2c4bff; 

  color: #0000 !important;
  padding-bottom: var(--s);
  background: 
    linear-gradient(90deg,var(--c) 50%, red 0) calc(100% - var(--_p,0%))/200% 100%,
    linear-gradient(var(--c) 0 0) 0% 100%/var(--_p,0%) var(--s) no-repeat;
  -webkit-background-clip: text,padding-box;
          background-clip: text,padding-box;
  transition: 0.5s;
}
.unexpected-hover:hover {--_p: 100%}

.unexpected-hover {
  font-family: system-ui, sans-serif;
  font-size: 5rem;
  cursor: pointer;
} */
/* end */
/* Sweet stuff start */
.sweet-title-title-wrapper {
  display: grid;
  align-items: center;
  justify-content: center;
  transform: skew(0, -10deg);
}

/* .sweet-title {

  order: 2;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1rem, 3.5rem, 4rem)!important;
  line-height: 0.75em;
  text-align: center;
  text-shadow: 3px 1px 1px #4af7ff, 2px 2px 1px #165bfb, 4px 2px 1px #4af7ff,
    3px 3px 1px #165bfb, 5px 3px 1px #4af7ff, 4px 4px 1px #165bfb,
    6px 4px 1px #4af7ff, 5px 5px 1px #165bfb, 7px 5px 1px #4af7ff,
    6px 6px 1px #165bfb, 8px 6px 1px #4af7ff, 7px 7px 1px #165bfb,
    9px 7px 1px #4af7ff;

   span {

    display: block;
    position: relative;

    &:before {
      content: attr(data-text);
      position: absolute;
      text-shadow: 2px 2px 1px #e94aa1, -1px -1px 1px #c736f9,
        -2px 2px 1px #e94aa1, 1px -1px 1px #f736f9;
      z-index: 1;
    }

  }

} */
/* end */
/* UnderLined start */
.underlined {
  /*   background: red; */
  position: relative;
}

.underlined:after {
  content: "";
  position: absolute;
  top: 95%;
  width: 150%;
  aspect-ratio: 3/1;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 50%;
  border: 6px solid hsl(280, 80%, 50%);
  --spread: 140deg;
  --start: 290deg;
  -webkit-mask: conic-gradient(from var(--start), white 0 var(--spread), transparent var(--spread));
          mask: conic-gradient(from var(--start), white 0 var(--spread), transparent var(--spread));
}

/* end */
/* butter-text-effect start*/
/* .butter-text-effect {
  font-size: 6rem !important;
  font-family: 'Calligraffitti', cursive !important;
  font-weight: 700;
  text-shadow: -15px 5px 20px #ced0d3;
  letter-spacing: 0.02em;
  text-align: center;
  color: #F9f1cc !important;
  text-shadow: 5px 5px 0px #FFB650, 
    10px 10px 0px #FFD662, 
    15px 15px 0px  #FF80BF, 
    20px 20px 0px #EF5097, 
    25px 25px 0px #6868AC, 
    30px 30px 0px #90B1E0;
} */
/* end  */
/* lighting yellow background */
/* end */
/* reflections trinklet start*/
.unit-text-effect {
  width: -moz-max-content;
  width: max-content;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  /* padding: 0 10px; */
}

/* .unit-text-effect > * {
    font: bolder 5rem/5rem "EB Garamond";
    background-image: url("/Downloads/text-effect-reflection.png");
    -webkit-background-clip: text;
    color: transparent;
    overflow: hidden;
} */
.unit-text-effect > :last-child {
  transform: rotatex(180deg) translatey(15px);
}

.unit-text-effect:first-of-type > :last-child {
  --gradient: linear-gradient(transparent 20%, white 90%);
  -webkit-mask-image: var(--gradient);
  mask-image: var(--gradient);
}

/* 
@media (max-width: 480px) {
    .unit-text-effect > * {
        font: bolder 3.5rem/3.5rem "EB Garamond";
    }
    .unit-text-effect:nth-of-type(3) > :last-child {
        transform: rotatex(180deg) translatey(15px) skew(135deg) translatex(18px);
    }z;
} */
/* end */
/* Clipping-covfefe */
.clipping-covfefe {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #AB3428 !important;
  display: inline;
  color: #F49E4C !important;
  letter-spacing: 5px;
}
@media (min-width: 700px) {
  .clipping-covfefe {
    font-size: 9vw;
  }
}
@media (min-width: 1400px) {
  .clipping-covfefe {
    font-size: 150px;
  }
}

@supports (-webkit-background-clip: text) {
  .clipping-covfefe {
    color: transparent;
    background: linear-gradient(7deg, #F5EE9E 50%, #F49E4C 0);
    -webkit-background-clip: text;
  }
}
/* end */
/* background - effect  green*/
@supports ((-webkit-background-clip: text) or (background-clip: text)) or (-webkit-background-clip: text) {
  .fancy {
    background-image: url("data:image/svg+xml,%3Csvg width='2250' height='900' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath fill='%2300A080' d='M0 0h2255v899H0z'/%3E%3Ccircle cx='366' cy='207' r='366' fill='%2300FDCF'/%3E%3Ccircle cx='1777.5' cy='318.5' r='477.5' fill='%2300FDCF'/%3E%3Ccircle cx='1215' cy='737' r='366' fill='%23008060'/%3E%3C/g%3E%3C/svg%3E%0A");
    background-size: 110% auto;
    background-position: center;
    color: transparent !important;
    -webkit-background-clip: text;
    background-clip: text;
  }
}

/* end */
/* Milky start*/
.shadow-outline-text-effect {
  display: block;
  /* color: #f1ebe5 !important; */
  text-shadow: 0 27px 19px black, 0px -2px 1px #fff;
  /* text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff; */
  letter-spacing: -4px;
  text-align: center;
  /* background: linear-gradient(to bottom, #ece4d9 0%,#e9dfd1 100%); */
  /* position: absolute;
  padding: 100px 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 20px; */
}

/* end */
/* text-shadow-challenge */
.challenge {
  position: relative;
  letter-spacing: 5px;
  display: table;
  margin: 0px auto;
  cursor: pointer;
  transition: 0.6s;
}

.challenge:before,
.challenge:after {
  content: attr(data-text);
  transition: 0.6s;
}

.challenge:before {
  left: 0;
  top: 0;
  position: absolute;
  z-index: -1;
  text-shadow: 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
  -webkit-mask: repeating-linear-gradient(45deg, transparent 0 3px, rgba(0, 0, 0, 0.5) 0 6px);
  mask: repeating-linear-gradient(45deg, transparent 0 3px, rgba(0, 0, 0, 0.5) 0 6px);
}

.challenge:hover {
  transform: translate(-10px, -10px);
}

.challenge:hover:before {
  text-shadow: 1px 1px, 2px 2px, 3px 3px, 4px 4px, 5px 5px, 6px 6px, 7px 7px, 8px 8px, 9px 9px, 10px 10px;
}

/* end */
/* text-shadow-font */
/* .henny-font-text-effect {
    font-family: "Henny Penny" !important;
    margin: auto;
    letter-spacing: 0.0015em;
    font-size: 2em;
    text-shadow: 0 1px #8da1ff, -1px 0 #c0cbff, -1px 2px #8da1ff, -2px 1px #c0cbff,
        -2px 3px #8da1ff, -3px 2px #c0cbff, -3px 4px #8da1ff, -4px 3px #c0cbff,
        -4px 5px #8da1ff, -5px 4px #c0cbff, -5px 6px #8da1ff, -6px 5px #c0cbff,
        -6px 7px #8da1ff, -7px 6px #c0cbff, -7px 8px #8da1ff, -8px 7px #c0cbff;
    text-align: center;
} */
/* end */
/* outline textt effect */
.rise-text-effect {
  /* background-color: #ffdd40 !important; */
  /* color: #333 !important; */
  /* font-family: Audiowide !important; */
  text-shadow: -0.01em -0.01em 0.01em #000;
  animation: rise 2s ease-in-out 0.5s forwards;
}

@keyframes rise {
  to {
    text-shadow: 0em 0.01em black, 0em 0.02em black, 0em 0.02em 0.03em black, -0.01em 0.01em #333, -0.02em 0.02em #333, -0.03em 0.03em #333, -0.04em 0.04em #333, -0.01em -0.01em 0.03em #000, -0.02em -0.02em 0.03em #000, -0.03em -0.03em 0.03em #000;
    transform: translateY(-0.025em) translateX(0.04em);
  }
}
/* outline-text-effect */
.outline-text-effect {
  /* font-family: Audiowide !important; */
  -webkit-background-clip: text;
          background-clip: text;
  /* color: #ffdd40; */
  animation: outlineOutline-text-effect 1s ease-in-out 1.5s forwards;
}

@keyframes outlineOutline-text-effect {
  from {
    text-shadow: 0em -7em 10em #fff;
  }
  to {
    text-shadow: 0 0.02em #fff, 0.02em 0 #fff, -0.02em 0 #fff, 0 -0.02em #fff;
  }
}
/* end */
/* stripes text effect */
.demo {
  --stripe-step: 1.2vmax;
  --stripe-tiny-step: 0.5vmax;
  --stripe-offset: calc(var(--stripe-step) * 0.75);
  position: relative;
  width: 100%;
  height: 1em;
  line-height: 1;
  text-align: center;
}

.demo__text, .demo::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 99%;
  -webkit-mask-image: repeating-linear-gradient(-45deg, black 0, black var(--stripe-step), transparent 0, transparent calc(var(--stripe-step) * 2));
          mask-image: repeating-linear-gradient(-45deg, black 0, black var(--stripe-step), transparent 0, transparent calc(var(--stripe-step) * 2));
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
  -webkit-mask-size: 120% 120%;
          mask-size: 120% 120%;
}

.demo__text {
  left: 0;
  top: 0;
  color: darkturquoise;
}

.demo::before {
  content: attr(data-text);
}

.demo::before {
  left: var(--stripe-offset);
  bottom: var(--stripe-offset);
  -webkit-mask-position: var(--stripe-offset) var(--stripe-offset);
          mask-position: var(--stripe-offset) var(--stripe-offset);
  color: aquamarine;
}

/* end */
/* deconstructed start */
.deconstructed {
  position: relative;
  color: transparent;
  letter-spacing: -0.02em;
  line-height: 1.03em;
}

.deconstructed > div:nth-child(1) {
  -webkit-mask-image: linear-gradient(black 25%, transparent 25%);
  mask-image: linear-gradient(black 25%, transparent 25%);
  animation: deconstructed1 5s infinite;
}

.deconstructed > div:nth-child(2) {
  -webkit-mask-image: linear-gradient(transparent 25%, black 25%, black 50%, transparent 50%);
  mask-image: linear-gradient(transparent 25%, black 25%, black 50%, transparent 50%);
  animation: deconstructed2 5s infinite;
}

.deconstructed > div:nth-child(3) {
  -webkit-mask-image: linear-gradient(transparent 50%, black 50%, black 75%, transparent 75%);
  mask-image: linear-gradient(transparent 50%, black 50%, black 75%, transparent 75%);
  animation: deconstructed3 5s infinite;
}

.deconstructed > div:nth-child(4) {
  -webkit-mask-image: linear-gradient(transparent 75%, black 75%);
  mask-image: linear-gradient(transparent 75%, black 75%);
  animation: deconstructed4 5s infinite;
}

@keyframes deconstructed1 {
  0% {
    transform: translateX(100%);
  }
  26% {
    transform: translateX(0%);
  }
  83% {
    transform: translateX(-0.1%);
  }
  100% {
    transform: translateX(-120%);
  }
}
@keyframes deconstructed2 {
  0% {
    transform: translateX(100%);
  }
  24% {
    transform: translateX(0.5%);
  }
  82% {
    transform: translateX(-0.2%);
  }
  100% {
    transform: translateX(-125%);
  }
}
@keyframes deconstructed3 {
  0% {
    transform: translateX(100%);
  }
  22% {
    transform: translateX(0%);
  }
  81% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-130%);
  }
}
@keyframes deconstructed4 {
  0% {
    transform: translateX(100%);
  }
  20% {
    transform: translateX(0%);
  }
  80% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-135%);
  }
}
/* end */
/* hover bounce */
.shake-text-effect {
  /* display:inline-block; */
  /* font-size:5em; */
  /* font-family:'Signika', sans-serif !important; */
  animation: float 0.3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: none;
  }
  33% {
    transform: translateY(-1px) rotate(-2deg);
  }
  66% {
    transform: translateY(1px) rotate(2deg);
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translate(0);
  }
  25% {
    transform: rotateX(20deg) translateY(2px) rotate(-3deg);
  }
  50% {
    transform: translateY(-20px) rotate(3deg) scale(1.1);
  }
}
/* end */
/* slide start */
@keyframes stripes {
  100% {
    background-position: 20px 0, 20px 0, 20px 0;
  }
}
/* end */
/* light effect */
/* .lights-text-effects {
  color: hsla(0, 0%, 0%, .9) !important;
  font-family:  Varela Round, sans-serif;
  left: 0;
  letter-spacing: 5px;

  text-align: center;
  text-transform: uppercase;

  animation: move linear 5000ms infinite;  
} */
/* @keyframes move {
  0% {
    text-shadow:
      4px -4px 0 hsla(0, 100%, 50%, 1), 
      3px -3px 0 hsla(0, 100%, 50%, 1), 
      2px -2px 0 hsla(0, 100%, 50%, 1), 
      1px -1px 0 hsla(0, 100%, 50%, 1),
      -4px 4px 0 hsla(180, 100%, 50%, 1), 
      -3px 3px 0 hsla(180, 100%, 50%, 1), 
      -2px 2px 0 hsla(180, 100%, 50%, 1), 
      -1px 1px 0 hsla(180, 100%, 50%, 1)
    ;
  }
  25% {    
    text-shadow:      
      -4px -4px 0 hsla(180, 100%, 50%, 1), 
      -3px -3px 0 hsla(180, 100%, 50%, 1), 
      -2px -2px 0 hsla(180, 100%, 50%, 1), 
      -1px -1px 0 hsla(180, 100%, 50%, 1),
      4px 4px 0 hsla(0, 100%, 50%, 1), 
      3px 3px 0 hsla(0, 100%, 50%, 1), 
      2px 2px 0 hsla(0, 100%, 50%, 1), 
      1px 1px 0 hsla(0, 100%, 50%, 1)      
    ;
  }
  50% {
    text-shadow:
      -4px 4px 0 hsla(0, 100%, 50%, 1), 
      -3px 3px 0 hsla(0, 100%, 50%, 1), 
      -2px 2px 0 hsla(0, 100%, 50%, 1), 
      -1px 1px 0 hsla(0, 100%, 50%, 1),
      4px -4px 0 hsla(180, 100%, 50%, 1), 
      3px -3px 0 hsla(180, 100%, 50%, 1), 
      2px -2px 0 hsla(180, 100%, 50%, 1), 
      1px -1px 0 hsla(180, 100%, 50%, 1)
    ;
  }
  75% {
    text-shadow:
      4px 4px 0 hsla(180, 100%, 50%, 1), 
      3px 3px 0 hsla(180, 100%, 50%, 1), 
      2px 2px 0 hsla(180, 100%, 50%, 1), 
      1px 1px 0 hsla(180, 100%, 50%, 1),
      -4px -4px 0 hsla(0, 100%, 50%, 1), 
      -3px -3px 0 hsla(0, 100%, 50%, 1), 
      -2px -2px 0 hsla(0, 100%, 50%, 1), 
      -1px -1px 0 hsla(0, 100%, 50%, 1)      
    ;
  }
  100% {
    text-shadow:
      4px -4px 0 hsla(0, 100%, 50%, 1), 
      3px -3px 0 hsla(0, 100%, 50%, 1), 
      2px -2px 0 hsla(0, 100%, 50%, 1), 
      1px -1px 0 hsla(0, 100%, 50%, 1),
      -4px 4px 0 hsla(180, 100%, 50%, 1), 
      -3px 3px 0 hsla(180, 100%, 50%, 1), 
      -2px 2px 0 hsla(180, 100%, 50%, 1), 
      -1px 1px 0 hsla(180, 100%, 50%, 1)
    ;
  }  
} */
/* end */