@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

      @font-face {
        font-family: 'Magica';
        src: url(https://static.tumblr.com/p6yopnt/Qkiqnu0r5/theheart.ttf);
      }

      table {
        width: 95%;
        border-collapse: collapse;
      }

      th,
      td {
        /* Inner borders */
        width: 50%;
        padding: 8px;
        border: 1px solid transparent;
        text-align: center;
      }

      table,
      th,
      td {
        line-height: 20px;
        font-style: normal;
        font-size: 15px;
        text-align: center;
        /* Outer border */
      }

      table p,
      i,
      #rolling {
        padding: 0;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
        font-family: initial;
        font-weight: 700;
        font-size: 1.3em;
        font-style: normal;
      }

      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

      .resizable-textarea {
        margin-top: 10px;
        resize: none;
        height: 100px;
      }

      .popup-copied {
        padding: 10px 10px;
        font-size: 14px;
        z-index: 100;
        visibility: hidden;
        width: 80px;
        position: absolute;
        z-index: 1;
        top: 50%;
        /* Position the popup in the middle of the scrollbox */
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        transition: opacity 0.4s;
        /* From https://css.glass */
        background: rgba(248, 248, 248, 0.82);
        border-radius: 20px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(14.1px);
        -webkit-backdrop-filter: blur(14.1px);
        border: 1px solid rgba(248, 248, 248, 1);
      }

      #txt-floating {
        animation-name: floatings;
        animation-duration: 4s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
      }

      @keyframes floatings {
        0% {
          transform: translate(0, 0px);
        }

        50% {
          transform: translate(0, 6px);
        }

        100% {
          transform: translate(0, -0px);
        }
      }

      .txt-popout {
        -webkit-animation: pop 1s ease-in-out infinite alternate;
        animation: pop 1s ease-in-out infinite alternate;
        -moz-animation: pop 1s ease-in-out infinite alternate;
      }

      @keyframes pop {
        from {
          transform: scale(0.95)
        }

        50% {
          transform: scale(1)
        }

        to {
          transform: scale(0.95)
        }
      }

      @-webkit-keyframes pop {
        from {
          -webkit-transform: scale(0.95)
        }

        50% {
          -webkit-transform: scale(1)
        }

        to {
          -webkit-transform: scale(0.95)
        }
      }

      .bouncyy {
        animation: bouncet 2s infinite;
        animation-timing-function: cubic-bezier(0.25, 0.85, 0.4, 1);
      }

      .letteron {
        animation-delay: 0s;
        display: inline-block;
      }

      .lettertw {
        animation-delay: 0.2s;
        display: inline-block;
      }

      .letterthre {
        animation-delay: 0.4s;
        display: inline-block;
      }

      .letterfou {
        animation-delay: 0.6s;
        display: inline-block;
      }

      .letterfiv {
        animation-delay: 0.8s;
        display: inline-block;
      }

      .lettersi {
        animation-delay: 1s;
        display: inline-block;
      }

      .letterseve {
        animation-delay: 1.2s;
        display: inline-block;
      }

      .lettereigh {
        animation-delay: 1.4s;
        display: inline-block;
      }

      @keyframes bouncet {
        0% {
          transform: scale(1, 1) translateY(0);
        }

        10% {
          transform: scale(1.1, .9) translateY(0);
        }

        30% {
          transform: scale(.9, 1.1) translateY(-30px);
        }

        50% {
          transform: scale(1.05, .95) translateY(0);
        }

        60% {
          transform: scale(1, 1) translateY(-4px);
        }

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

      .txt-rubber {
        display: inline-block;
        transform: scale3d(1, 1, 1);
        animation: rubberBand 0.9s;
        animation-iteration-count: infinite;
      }

      @-webkit-keyframes rubberBand {
        0% {
          -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
        }

        30% {
          -webkit-transform: scale3d(1.25, 0.75, 1);
          transform: scale3d(1.25, 0.75, 1);
        }

        40% {
          -webkit-transform: scale3d(0.75, 1.25, 1);
          transform: scale3d(0.75, 1.25, 1);
        }

        50% {
          -webkit-transform: scale3d(1.15, 0.85, 1);
          transform: scale3d(1.15, 0.85, 1);
        }

        65% {
          -webkit-transform: scale3d(.95, 1.05, 1);
          transform: scale3d(.95, 1.05, 1);
        }

        75% {
          -webkit-transform: scale3d(1.05, .95, 1);
          transform: scale3d(1.05, .95, 1);
        }

        100% {
          -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
        }
      }

      .txt-tilt {
        animation-name: tilts;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        line-height: 0em;
        bottom: -5px;
      }

      @keyframes tilts {
        0% {
          transform: rotate(5deg);
        }

        50% {
          transform: rotate(-5deg);
        }

        100% {
          transform: rotate(5deg);
        }
      }

      .txt-expandhover {
        transition: 0.4s;
      }

      .txt-expandhover:hover {
        letter-spacing: 7px;
      }

      #rolling {
        margin-left: 50px;
        position: relative;
        overflow: hidden;
        text-align: center;
        height: 3rem;
        /* Adjust this to match the height of your text */
      }

      .rolling-text {
        position: absolute;
        text-align: center;
        white-space: nowrap;
      }

      .txt-scriptedtitle {
        filter: drop-shadow(0 3px #9a6fb0) drop-shadow(2px 0 #9a6fb0) drop-shadow(0 -1px #ffa9c2) drop-shadow(-1px 0 #9a6fb0) drop-shadow(0 5px white) drop-shadow(5px 0 white) drop-shadow(0 -5px white) drop-shadow(-5px 0 white) drop-shadow(1px 1px 0 rgba(172, 172, 172, 0.6)) drop-shadow(1px 1px 0 rgba(172, 172, 172, 0.6)) drop-shadow(0 0 2px #424242);
        color: #FDE6FF;
        font-family: ecoder;
      }

      @font-face {
        font-family: ecoder;
        src: url(https://dl.dropbox.com/s/2wrgv8i3jsqkv6p/Ecoder-Italic.otf);
      }

      .txt-blinking {
        color: #000000;
        animation: blinkingText 1.2s infinite;
      }

      @keyframes blinkingText {
        0% {
          color: #000000;
        }

        49% {
          color: #000000;
        }

        60% {
          color: white;
        }

        99% {
          color: white;
        }

        100% {
          color: #000000;
        }
      }

      .txt-imagetext {
        background-image: url(https://media.giphy.com/media/70BItD093Mhnq/giphy.gif);
        background-size: cover;
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
      }

      .txt-gradienttext {
        background: linear-gradient(to top, #FFFDFE 2%, #FF78B1 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke-width: 0.5px;
        -webkit-text-stroke-color: #FE62B6;
      }

      .txt-blurtext:hover {
        webkit-filter: blur(0.5px);
        filter: blur(2px);
      }

      .txt-markstitch {
        color: white;
        background: #9a8c98;
        border: 1px dashed #fff;
        box-shadow: 0 0 0 3px #9a8c98;
        padding: 2px;
      }

      .txt-jerkytext {
        animation: jerkyu 0.5s infinite;
      }

      @keyframes jerkyu {
        0% {
          transform: rotate(2deg);
        }

        50% {
          transform: rotate(2deg);
        }

        51% {
          transform: rotate(-2deg);
        }

        100% {
          transform: rotate(-2deg);
        }
      }

      .txt-candycane {
        --color1: #1FD537;
        --color2: #E40010;
        -webkit-text-stroke: 1px black;
        background: repeating-linear-gradient(45deg, var(--color1), var(--color1) 30px, var(--color2) 30px, var(--color2) 60px);
        background-clip: text;
        color: transparent;
        -webkit-background-clip: text;
        animation: 40s linear 0s infinite move;
      }

      @keyframes move {
        from {
          background-position: 0px;
        }

        to {
          background-position: 1000px;
        }
      }

      .txt-rainbowgalore {
        background-size: 300vw 300vw;
        margin: 0;
        position: relative;
        text-align: -webkit-center;
        background: repeating-linear-gradient(-45deg, red 0%, yellow 7.14%, #0f0 14.28%, #0ff 21.42%, cyan 28.56%, blue 35.7%, magenta 42.84%, red 50%);
        -webkit-animation: 'slide'10s infinite linear forwards;
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
      }

      @keyframes slide {
        0% {
          background-position-x: 0%;
        }

        100% {
          background-position-x: 300vw;
        }
      }

      .txt-glowgalore {
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: #000;
        font-weight: bold;
        -webkit-animation: glow 2.0s linear infinite;
        -moz-animation: glow 2.0s linear infinite;
        -ms-animation: glow 2.0s linear infinite;
        -o-animation: glow 2.0s linear infinite;
        animation: glow 2.0s linear infinite;
      }

      @keyframes glow {
        0% {
          text-shadow: 0 0 15px purple;
        }

        50% {
          text-shadow: none;
        }

        100% {
          text-shadow: 0 0 15px purple;
        }
      }

      @-webkit-keyframes glow {
        0% {
          text-shadow: 0 0 15px purple;
        }

        50% {
          text-shadow: 0 0 0;
        }

        100% {
          text-shadow: 0 0 15px purple;
        }
      }

      .txt-outlinetext {
        color: white;
        -webkit-text-stroke: 1px purple;
      }

      #txt-shakyfilter {
        animation: squiggly-anim .5s linear infinite;
      }

      @keyframes squiggly-anim {
        0% {
          -webkit-filter: url("#squiggly-0");
          filter: url("#squiggly-0");
        }

        25% {
          -webkit-filter: url("#squiggly-1");
          filter: url("#squiggly-1");
        }

        50% {
          -webkit-filter: url("#squiggly-2");
          filter: url("#squiggly-2");
        }

        75% {
          -webkit-filter: url("#squiggly-3");
          filter: url("#squiggly-3");
        }

        100% {
          -webkit-filter: url("#squiggly-4");
          filter: url("#squiggly-4");
        }
      }

     .svg-container {
          width: 0;
         height: 0;
         overflow: hidden;
      }
      #txt-shaketext {
        padding: 4px;
        animation: shake 0.5s infinite;
      }

      @keyframes shake {
        0% {
          transform: translate(1px, 1px) rotate(0deg);
        }

        10% {
          transform: translate(-1px, -2px) rotate(-1deg);
        }

        20% {
          transform: translate(-3px, 0px) rotate(1deg);
        }

        30% {
          transform: translate(3px, 2px) rotate(0deg);
        }

        40% {
          transform: translate(1px, -1px) rotate(1deg);
        }

        50% {
          transform: translate(-1px, 2px) rotate(-1deg);
        }

        60% {
          transform: translate(-3px, 1px) rotate(0deg);
        }

        70% {
          transform: translate(3px, 1px) rotate(-1deg);
        }

        80% {
          transform: translate(-1px, -1px) rotate(1deg);
        }

        90% {
          transform: translate(1px, 2px) rotate(0deg);
        }

        100% {
          transform: translate(1px, -2px) rotate(0deg);
        }
      }

      #txt-dottedlink {
        text-decoration: underline;
        text-decoration-style: dotted;
      }

      .link {
        position: relative;
        transition: clip-path 275ms ease;
      }

      .link:hover span::before,
      .link:focus span::before {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
      }

      .link span {
        position: relative;
        display: inline-block;
      }

      .link span::before {
        position: absolute;
        content: attr(data-content);
        text-decoration: underline;
        clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);
        transition: clip-path 275ms ease;
      }

      span.dashed::before {
        text-decoration-style: dashed;
      }

      span.wavy::before {
        text-decoration-style: wavy;
      }

      .txt-bouncedall {
        position: relative;
        top: 0;
        animation: bounceda 0.3s ease infinite alternate;
      }

      @keyframes bounceda {
        100% {
          top: -.2rem;
        }
      }

      .txt-ellipsehighlight {
        background-color: #c9c6cc;
        border-radius: 100%;
        padding: 0 0px 0 0px;
        display: inline-block;
      }

      .txt-radialhighlight {
        background-image: radial-gradient(#e0b8ff 30%, transparent 70%);
        line-spacing: 2px;
      }

      .txt-radialwithshadowhighlight {
        background-image: radial-gradient(#F5A6E6 30%, transparent 70%);
        border-radius: 100%;
        border: 1px solid white;
        -webkit-box-shadow: 0px 0px 5px 0px #7FC8F8;
        -moz-box-shadow: 0px 0px 5px 0px #7FC8F8;
        box-shadow: 0px 0px 5px 0px #7FC8F8;
      }

      #txt-underlinelink {
        text-decoration-line: underline;
        text-decoration-style: solid;
      }

      #txt-squigglylink {
        text-decoration-line: underline;
        text-decoration-style: wavy;
      }

      #txt-glitchcrazy {
        animation: glitch-122 2s infinite linear;
      }

      @keyframes glitch-122 {

        0%,
        12%,
        15%,
        52%,
        55%,
        82%,
        85%,
        100% {
          opacity: 1;
          transform: scaleX(1) scaleY(1);
        }

        13% {
          opacity: .8;
          transform: scaleY(2);
          color: #;
        }

        53% {
          opacity: .8;
          transform: scaleX(.7);
          color: #;
        }

        83% {
          opacity: 8;
          transform: rotate(-10deg);
          color: #;
        }
      }

      @keyframes glitch-2 {
        13% {
          color: #;
        }

        53% {
          color: #;
        }

        83% {
          color: #;
        }
      }

      #txt-ulink:hover {
        text-decoration-line: underline;
        text-decoration-style: solid;
      }

      #txt-squiggle:hover {
        text-decoration-line: underline;
        text-decoration-style: wavy;
      }

      #txt-dlink:hover {
        text-decoration-line: underline;
        text-decoration-style: dotted;
      }

      #txt-ilink:hover {
        font-style: italic;
      }

      #txt-floatlink:hover {
        transition: .2s ease;
        transform: translate(0, -6px);
      }

      #txt-colorchange:hover {
        color: red;
      }

      a.txt-wipesdways:link {
        text-decoration: none;
      }

      a.txt-wipesdways::before {
        transform: scaleX(0);
        transform-origin: bottom right;
      }

      a.txt-wipesdways:hover::before {
        transform: scaleX(1);
        transform-origin: bottom left;
      }

      a.txt-wipesdways::before {
        content: " ";
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        inset: 0 0 0 0;
        background: purple;
        z-index: -1;
        transition: transform .5s ease;
      }

      a.txt-wipesdways {
        position: relative;
      }

      a.txt-bgcolorhover {
        box-shadow: inset 0 0 0 0 #FFABD9;
        -webkit-transition: all ease 0.5s;
        -moz-transition: all ease 0.5s;
        transition: all ease 0.5s;
      }

      a.txt-bgcolorhover:hover {
        box-shadow: inset 0 50px 0 0 purple;
        color: white;
      }

      #txt-skewhover {
        transition: .09s linear;
        background: none;
        display: inline-block;
        text-decoration: none;
      }

      #txt-skewhover:hover {
        transform: translate(0px, 0px) rotatex(0deg) rotatey(41deg) rotatez(58deg) skewX(0deg) skewY(0deg) scaleX(1) scaleY(1);
        transition: .09s linear;
      }
      
      .txt-textoutlinerainbow{
        -webkit-text-fill-color: #fff;
	-webkit-background-clip: text;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #FF0000;
	-webkit-animation: animatedBackground_c 2s infinite alternate;
}

@keyframes animatedBackground_c {
	0% {-webkit-text-stroke-color: #FFA53A}
	10% {-webkit-text-stroke-color: #FFE53A}
	20% {-webkit-text-stroke-color: #E8FF3A}
	30% {-webkit-text-stroke-color: #A5FF3A}
	40% {-webkit-text-stroke-color: #3AFF4E}
	50% {-webkit-text-stroke-color: #3AFFAE}
	60% {-webkit-text-stroke-color: #3AF3FF}
	70% {-webkit-text-stroke-color: #3AA2FF}
	80% {-webkit-text-stroke-color: #4B3AFF}
	90% {-webkit-text-stroke-color: #B43AFF}
	100% {-webkit-text-stroke-color: #FF3AEE}
}