.wordart {
  font-family: Impact, Arial Black, sans-serif;
  font-size: 3rem;
}


.rainbow {
  background: linear-gradient(to right,
      red,
      orange,
      yellow,
      green,
      blue,
      indigo,
      violet);

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tilt {
  transform: skewY(-10deg) rotate(-5deg);
}

.tilt-3d {
  transform: perspective(400px) rotateX(25deg);
}

.thick3d {
  text-shadow:
    1px 1px 0 #000,
    2px 2px 0 #000,
    3px 3px 0 #000,
    4px 4px 0 #000,
    5px 5px 0 #000,
    6px 6px 0 #000,
    7px 7px 0 #000;
}

.thick3d-red {
  text-shadow:
    1px 1px #900,
    2px 2px #900,
    3px 3px #900,
    4px 4px #900,
    5px 5px #900;
}



.outline {
  -webkit-text-stroke: 2px black;
}

.outline-white {
  -webkit-text-stroke: 2px white;
}

.stretch {
  letter-spacing: 0.1em;
  transform: scaleY(1.3);
}

.style-eleven .wordart {
  transform: scaleY(1.65);
}


.style-eleven-outer{
  transform: scaleY(1.65);
  font-family: Impact, Arial Black, sans-serif;
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: 0.1rem;
  -webkit-text-stroke: 0.016em #eaeaea;
}

.style-eleven-inner {
  /* position: relative; */
  color: transparent;
  background: linear-gradient(to left, #a104ad, #0b2be0, #329941, #f7f658, #f16412, #e92153, #aa04a7);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.016em #eaeaea;
  -webkit-background-clip: text;
  background-clip: text;
  
  z-index: 5;
}

.s11-shadow {
  position: absolute;
  z-index: -1;
  color: #252525;
  -webkit-text-fill-color: #252525;
  /* -webkit-text-fill-color: #2525258a; */
  -webkit-text-stroke: 0 transparent;
  /* transform: rotateX(63deg) skew(60deg) scaleY(0.65) translate3d(2em, -2.15em, -1em); */
  transform: rotateX(47deg) skew(60deg) scaleY(0.7) translate3d(1.2em, -1.5em, -1.25em);
}

.orange {
  position: relative;
  display: inline-block;

  font-family: Impact, sans-serif;
  font-size: 3rem;
}

.orange-text,
.orange-shadow {
  position: absolute;
  top: 0;
  left: 0;
}

.orange-text {
  position: relative;
  display: inline-block;
  z-index: 2;

  transform:
    scaleY(1.5)
    skewY(-8deg)
    rotate(-3deg);

  color: transparent;
  background: linear-gradient(
    to bottom left,
    #fee601,
    #fee601 15%,
    #fe4201
  );

  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.orange-shadow {
  z-index: 1;

  transform:
    scaleY(1.5)
    skewY(-8deg)
    rotate(-3deg);

  color: #813300;

  text-shadow:
    1px 0 0 #813300,
    0 1px 0 #c14d00,
    2px 1px 0.35px #813300,
    1px 2px 0.35px #c14d00,
    3px 2px 0.35px #813300,
    2px 3px 0.35px #c14d00;
}