@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  text-align: center;
  display: flex;
  background: #ffffff;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.content {
  text-align: center;
  position: relative;
}

.content h6 {
  color: #fff;
  font-size: 33px;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  align-items: center;
  justify-content: center;


}

.content h6:nth-child(1) {
  color: transparent;
  -webkit-text-stroke: 2px #f27c22;
}

.content h6:nth-child(2) {
  color: #ff7003;
  animation: animate 4s ease-in-out infinite;
}

@keyframes animate {

  0%,
  100% {
    clip-path: polygon(0% 45%,
        16% 44%,
        33% 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%);
  }

}

.animate-charcter {
  text-transform: uppercase;
  background-image: linear-gradient(-225deg,
      #f79f5c 0%,
      #ff7003 29%,
      #ff7003 67%,
      #f79f5c 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;
  font-size: 90px;
}

.animate-charcter2 {
  text-transform: uppercase;
  background-image: linear-gradient(-225deg,
      #ff7003 0%,
      #f79f5c  29%,
      #f79f5c  67%,
      #ff7003 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;
  font-size: 15px;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

@import url("https://fonts.googleapis.com/css?family=Raleway:900&display=swap");

body {
  margin: 0px;
}

#container1 {
  position: absolute;
  margin: auto;
  width: 100vw;
  height: 80pt;
  top: 0;
  bottom: 0;

  filter: url(#threshold) blur(0.6px);
}

#text1,
#text2 {
  position: absolute;
  width: 100%;
  display: inline-block;

  font-family: "Raleway", sans-serif;
  font-size: 80pt;

  text-align: center;

  user-select: none;
}