:root {
  --pink: #ed1e79;
  --lpurple: #951DDB;
  --dpurple: #18013A;
  --main: #00fd11;
}

.cctext-anim {
  animation: text-shadow 3s ease-in-out infinite;
  font-weight: 900;
  line-height: 1;
  color: #ffffffa1
}

.cctext-anim:hover {
  animation-play-state: paused
}

@keyframes text-shadow {
  0% {
      transform: translateZ(0);
      text-shadow: 0 0 0 var(--dpurple),0 0 0 var(--pink),0 0 0 var(--lpurple),0 0 0 var(--main)
  }

  20% {
      transform: translateZ(-1em);
      text-shadow: 0 .125em 0 var(--dpurple),0 .25em 0 var(--pink),0 -.125em 0 var(--lpurple),0 -.25em 0 var(--main)
  }

  40% {
      transform: translateZ(0.5em);
      text-shadow: 0 -.0625em 0 var(--dpurple),0 -.125em 0 var(--lpurple),0 .0625em 0 var(--pink),0 .125em 0 var(--main)
  }

  60% {
      transform: translateZ(-0.25em);
      text-shadow: 0 .03125em 0 var(--dpurple),0 .0625em 0 var(--lpurple),0 -.03125em 0 var(--pink),0 -.0625em 0 var(--main)
  }

  80% {
      transform: translateZ(0);
      text-shadow: 0 0 0 var(--dpurple),0 0 0 var(--lpurple),0 0 0 var(--pink),0 0 0 var(--main)
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
      animation: none!important;
      transition: none!important
  }
}

.cupcodetp {
  width: 40%
}

.cupcodetp .ccbtn {
  position: relative;
  top: 0;
  left: 0;
  width: 250px;
  height: 50px;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center
}

.cupcodetp .ccbtn a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(12 255 0/10%);
  box-shadow: 0 15px 15px rgb(23 255 2/10%);
  border-bottom: 1px solid rgba(255,255,255,.1);
  border-top: 1px solid rgba(255,255,255,.1);
  border-radius: 30px;
  padding: 10px;
  letter-spacing: 1px;
  text-decoration: none;
  overflow: hidden;
  color: #fff;
  font-weight: 900px;
  z-index: 1;
  transition: .5s;
  backdrop-filter: blur(15px)
}

.cupcodetp .ccbtn:hover a {
  color: #ed1e79;
  font-weight: 700
}

.cupcodetp .ccbtn a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to left,rgba(255,255,255,0.15),transparent);
  transform: skewX(45deg) translate(0);
  transition: .5s;
  filter: blur(0px)
}

.cupcodetp .ccbtn:hover a::before {
  transform: skewX(45deg) translate(200px)
}

.cupcodetp .ccbtn::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  bottom: -5px;
  width: 30px;
  height: 10px;
  background: red;
  border-radius: 10px;
  transition: .5s;
  transition-delay: .5
}

.cupcodetp .ccbtn:hover::before {
  bottom: 0;
  height: 50%;
  width: 80%;
  border-radius: 30px
}

.cupcodetp .ccbtn::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  top: -5px;
  width: 30px;
  height: 10px;
  background: red;
  border-radius: 10px;
  transition: .5s;
  transition-delay: .5
}

.cupcodetp .ccbtn:hover::after {
  top: 0;
  height: 50%;
  width: 80%;
  border-radius: 30px
}

.cupcodetp .ccbtn:nth-child(1)::before,.cupcodetp .ccbtn:nth-child(1)::after {
  background: #1eff45;
  box-shadow: 0 0 5px #1eff45,0 0 15px #1eff45,0 0 30px #1eff45,0 0 60px #1eff45
}

.cupcodetp .ccbtn:nth-child(2)::before,.cupcodetp .ccbtn:nth-child(2)::after {
  background: #2db2ff;
  box-shadow: 0 0 5px #2db2ff,0 0 15px #2db2ff,0 0 30px #2db2ff,0 0 60px #2db2ff
}

.cupcodetp .ccbtn:nth-child(3)::before,.cupcodetp .ccbtn:nth-child(3)::after {
  background: #ff1f71;
  box-shadow: 0 0 5px #ff1f71,0 0 15px #ff1f71,0 0 30px #ff1f71,0 0 60px #ff1f71
}

.ccspan {
  font-size: 120px;
  letter-spacing: .1em;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #00ff14;
  text-shadow: 3px 3px #b30dfb,5px 5px #18013a;
  filter: drop-shadow(1px 1px 2px #00ff14)
}

.tiktok-cc {
  text-shadow: 1px 1px #00f2ea,-1px -1px #ff0050;
  animation: pulse 1s infinite;
  font-weight: 700
}

@keyframes pulse {
  0% {
      text-shadow: 1px 1px #00f2ea,-1px -1px #ff0050
  }

  50% {
      text-shadow: -1px -1px #00f2ea,1px 1px #ff0050
  }

  100% {
      text-shadow: 1px 1px #00f2ea,-1px -1px #ff0050
  }
}

.linkedin {
  color: #0077b5;
  font-weight: 700
}

.in {
  background-color: #0077b5;
  color: #fff;
  padding: 0 3px;
  border-radius: 22%;
  margin-left: 1px
}

.google-cc {
  font-weight: 700
}

.g-blue {
  color: #4285f4
}

.o-red {
  color: #db4437
}

.o-yellow {
  color: #f4b400
}

.l-green {
  color: #0f9d58
}

.enviar {
  background: #2d9955
}

.e-red {
  color: #db4437
}

.youtube-cc {
  align-items: center;
  font-family: arial,sans-serif;
  font-weight: 700;
  color: #fff
}

.youtube-cc svg {
  width: 24px;
  height: 24px;
  fill: red;
  margin-top: -3px
}

.facebook-cc {
  color: #1877f2;
  font-weight: 700
}

.fbmessenger-cc {
  color: #00b2ff;
  font-weight: 700
}

.whatsapp-cc {
  color: #25d366;
  font-weight: 700
}

.instagram-cc {
  font-weight: 700;
  background: radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent
}

.underlined {
  position: relative
}

.underline-purple:after {
  content: '';
  position: absolute;
  top: 85%;
  width: 150%;
  aspect-ratio: 3/1;
  left: 50%;
  transform: translate(-50%,0);
  border-radius: 50%;
  border: 3px solid var(--lpurple);
  clip-path: polygon(0 0,80% 40%,85% 0)
}

.underline-pink:after {
  content: '';
  position: absolute;
  top: 85%;
  width: 150%;
  aspect-ratio: 3/1;
  left: 50%;
  transform: translate(-50%,0);
  border-radius: 50%;
  border: 3px solid var(--pink);
  clip-path: polygon(0 0,80% 40%,85% 0)
}

.vcEstaAqui {
  color: var(--dpurple);
  pointer-events: none;
  font-weight: bolder;
  background-color: var(--main)
}

.vcEstaAqui small {
  color: #fff;
  background-color: var(--pink);
  font-size: 9px;
  float: right;
  padding: 0 5px
}

.underline-green:after {
  content: '';
  position: absolute;
  top: 85%;
  width: 150%;
  aspect-ratio: 3/1;
  left: 50%;
  transform: translate(-50%,0);
  border-radius: 50%;
  border: 3px solid hsl(130 80% 50%);
  clip-path: polygon(0 0,80% 40%,85% 0)
}

.cupcode {
  text-align: center;
  font-family: tomorrow,sans-serif;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-shadow: 1px 1px 0 #fff,2px 2px 0 var(--pink),3px 3px 0 var(--lpurple),4px 4px 0 var(--dpurple)
}

.glassmorph {
  background: rgba(27,255,3,.17);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0,0,0,.1);
  backdrop-filter: blur(8.3px);
  -webkit-backdrop-filter: blur(8.3px);
  border: 1px solid rgba(27,255,3,.35);
  padding: 10px 20px
}

.blob {
  position: absolute;
  width: 500px;
  height: 500px;
  background: linear-gradient(180deg,rgb(9 139 44/42%) 31.77%,#029d0a8c 100%);
  mix-blend-mode: color-dodge;
  -webkit-animation: move 25s infinite alternate;
  animation: move 25s infinite alternate;
  transition: 1s cubic-bezier(.07,.8,.16,1)
}

.blob:hover {
  width: 520px;
  height: 520px;
  -webkit-filter: blur(30px);
  filter: blur(30px);
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.6),inset 100px 100px 0 0 #fa709a,inset 200px 200px 0 0 #784ba8,inset 300px 300px 0 0 #2b86c5
}

@-webkit-keyframes move {
  from {
      transform: translate(-100px,-50px) rotate(-90deg);
      border-radius: 24% 76% 35% 65%/27% 36% 64% 73%
  }

  to {
      transform: translate(500px,100px) rotate(-10deg);
      border-radius: 76% 24% 33% 67%/68% 55% 45% 32%
  }
}

@keyframes move {
  from {
      transform: translate(-100px,-50px) rotate(-90deg);
      border-radius: 24% 76% 35% 65%/27% 36% 64% 73%
  }

  to {
      transform: translate(500px,100px) rotate(-10deg);
      border-radius: 76% 24% 33% 67%/68% 55% 45% 32%
  }
}

.cc-holography-anim {
  animation: holography 3s ease-in-out infinite;
  width: 20%;
  position: absolute;
  margin: -180px auto auto -80px
}

.body-text {
  font-family: tomorrow;
  font-size: 40px;
  display: flex;
  align-items: stretch;
  flex-direction: column;
  font-weight: 700;
  color: #18013a;
  margin-top: -55px;
  z-index: 9
}

.t3xts {
  line-height: 1;
  position: relative;
  perspective: 1000px;
  text-transform: uppercase
}

.t3xt {
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
  text-transform: uppercase
}

.t3xt-out {
  animation: text-out .5s ease
}

.t3xt-in {
  animation: text-in .5s ease
}

.t3xt-2 {
  color: #ed1e79
}

.t3xt-3 {
  color: #7f47dd
}

@keyframes text-out {
  to {
      transform: rotateX(90deg);
      opacity: 0
  }
}

@keyframes text-in {
  from {
      opacity: 0;
      transform: rotateX(-90deg)
  }

  to {
      transform: rotateX(0deg);
      opacity: 1
  }
}

.ref {
  background-color: #000;
  border-radius: 3px;
  padding: 5px 8px;
  position: absolute;
  font-size: 16px;
  bottom: 10px;
  right: 10px;
  color: #fff;
  font-weight: 300;
  font-family: sans-serif;
  text-decoration: none
}

.ref::first-letter {
  font-size: 12px
}

h1.p.color-two {
  font-weight: 300;
  font-size: 18px;
  padding: 20px 0
}

brilho.color-four {
  transform: translateZ(0px);
  text-shadow: rgba(255,242,242,.95) 0 0 1.01391px,rgba(255,255,255,.75) 0 0 5.06955px,rgba(255,255,255,.44) 0 0 15.2086px;
  padding-right: 15px;
  line-height: normal
}