html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: transparent;
}

.glow-on-hover {
    border: none;
    outline: none;
    color: #fff;
    background: linear-gradient(90deg, #6c04f0 0%, #8c44f4 100%);
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 50px;
    width: 100%;
    display: inline-block;
    padding: .375rem .75rem;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(115deg,#4fcf70,#fad648,#a767e5,#12bcfe,#44ce7b);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    /*filter: blur(5px);*/
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 50px;
}

.glow-on-hover:active {
    color: #fff
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #0062cc;
    left: 0;
    top: 0;
    border-radius: 50px;
}

.glow2-on-hover {
    border: none;
    outline: none;
    color: #fff;
    background: linear-gradient(90deg, #ffc107 0%, #eebb20 100%);
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: .25rem;
    width: 100%;
    display: inline-block;
    padding: .375rem .75rem;
}

.glow2-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: .25rem;
}

.glow2-on-hover:active {
    color: #fff
}

.glow2-on-hover:active:after {
    background: transparent;
}

.glow2-on-hover:hover:before {
    opacity: 1;
}

.glow2-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    left: 0;
    top: 0;
    border-radius: .25rem;
}

.glow3-on-hover {
    border: none;
    outline: none;
    color: #fff;
    background: linear-gradient(90deg, #34ca56 0%, #28a745 100%);
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: .25rem;
    width: 100%;
    display: inline-block;
    padding: .375rem .75rem;
}

.glow3-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: .25rem;
}

.glow3-on-hover:active {
    color: #fff
}

.glow3-on-hover:active:after {
    background: transparent;
}

.glow3-on-hover:hover:before {
    opacity: 1;
}

.glow3-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    left: 0;
    top: 0;
    border-radius: .25rem;
}

.glow4-on-hover {
    border: none;
    outline: none;
    color: #fff;
    background: linear-gradient(90deg, #007bff 0%, #0069d9 100%);
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: .25rem;
    width: 100%;
    display: inline-block;
    padding: .375rem .75rem;
}

.glow4-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: .25rem;
}

.glow4-on-hover:active {
    color: #fff
}

.glow4-on-hover:active:after {
    background: transparent;
}

.glow4-on-hover:hover:before {
    opacity: 1;
}

.glow4-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    left: 0;
    top: 0;
    border-radius: .25rem;
}

.glow5-on-hover {
    border: none;
    outline: none;
    color: #fff;
    background: linear-gradient(90deg, #dc3545 0%, #c82333 100%);
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: .25rem;
    width: 100%;
    display: inline-block;
    padding: .375rem .75rem;
}

.glow5-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: .25rem;
}

.glow5-on-hover:active {
    color: #fff
}

.glow5-on-hover:active:after {
    background: transparent;
}

.glow5-on-hover:hover:before {
    opacity: 1;
}

.glow5-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    left: 0;
    top: 0;
    border-radius: .25rem;
}

.glow6-on-hover {
    border: none;
    outline: none;
    color: #fff;
    background: linear-gradient(90deg, #28a745 0%, #218838 100%);
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 50px;
    width: 100%;
    display: inline-block;
    padding: .375rem .75rem;
}

.glow6-on-hover:before {
    content: '';
    background: linear-gradient(115deg,#4fcf70,#fad648,#a767e5,#12bcfe,#44ce7b);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    /*filter: blur(5px);*/
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 50px;
}

.glow6-on-hover:active {
    color: #fff
}

.glow6-on-hover:active:after {
    background: transparent;
}

.glow6-on-hover:hover:before {
    opacity: 1;
}

.glow6-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #28a745 0%, #218838 100%);
    left: 0;
    top: 0;
    border-radius: 50px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

.blink {
  -webkit-animation: 2s linear infinite kedip;
  animation: 2s linear infinite kedip;
}
@-webkit-keyframes kedip { 
  0% {
    visibility: hidden;
  }
  50% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}
@keyframes kedip {
    0% {
    opacity: 0;
    }
    50% {
    opacity: .5;
    }
    100% {
    opacity: 1;
    }
}

h1{
  font-size: 11px;
}

h1 span{
  display: block;
  float: left;
  animation: animate 2.25s linear infinite;
  /*margin: 0 5px;*/
  padding: 0;
  position: relative;
  color: #fff;
}

h1 span:nth-child(1){
  animation-delay: 0s;
}
h1 span:nth-child(2){
  animation-delay: .20s;
}
h1 span:nth-child(2){
  animation-delay: .40s;
}
h1 span:nth-child(3){
  animation-delay: .60s;
}
h1 span:nth-child(4){
  animation-delay: .80s;
}
h1 span:nth-child(5){
  animation-delay: 1s;
}
h1 span:nth-child(6){
  animation-delay: 1.20s;
}
h1 span:nth-child(7){
  animation-delay: 1.40s;
}
h1 span:nth-child(8){
  animation-delay: 1.60s;
}
h1 span:nth-child(9){
  animation-delay: 1.80s;
}
h1 span:nth-child(10){
  animation-delay: 2s;
}
h1 span:nth-child(11){
  animation-delay: 2.20s;
}
h1 span:nth-child(12){
  animation-delay: 2.40s;
}
h1 span:nth-child(13){
  animation-delay: 2.60s;
}
h1 span:nth-child(14){
  animation-delay: 2.80s;
}
h1 span:nth-child(15){
  animation-delay: 3s;
}
h1 span:nth-child(16){
  animation-delay: 3.20s;
}
h1 span:nth-child(17){
  animation-delay: 3.40s;
}
h1 span:nth-child(18){
  animation-delay: 3.60s;
}
h1 span:nth-child(19){
  animation-delay: 3.80s;
}
h1 span:nth-child(20){
  animation-delay: 4s;
}
h1 span:nth-child(21){
  animation-delay: 4.20s;
}
h1 span:nth-child(22){
  animation-delay: 4.40s;
}
h1 span:nth-child(23){
  animation-delay: 4.60s;
}
h1 span:nth-child(24){
  animation-delay: 4.80s;
}
h1 span:nth-child(25){
  animation-delay: 5s;
}
h1 span:nth-child(26){
  animation-delay: 5.20s;
}
h1 span:nth-child(27){
  animation-delay: 5.40s;
}
h1 span:nth-child(28){
  animation-delay: 5.60s;
}
h1 span:nth-child(29){
  animation-delay: 5.80s;
}
h1 span:nth-child(30){
  animation-delay: 6s;
}
h1 span:nth-child(31){
  animation-delay: 6.20s;
}
h1 span:nth-child(32){
  animation-delay: 6.40s;
}
h1 span:nth-child(33){
  animation-delay: 6.60s;
}
h1 span:nth-child(34){
  animation-delay: 6.80s;
}
h1 span:nth-child(35){
  animation-delay: 7s;
}
h1 span:nth-child(36){
  animation-delay: 7.20s;
}
h1 span:nth-child(37){
  animation-delay: 7.40s;
}
h1 span:nth-child(38){
  animation-delay: 7.60s;
}
@keyframes animate {
  0%, 100%{
    color: #fff;
    filter: blur(0px);
    text-shadow: 0 0 10px #000,
      0 0 20px #000,
      0 0 30px #000,
      0 0 40px #000,
      0 0 50px #000,
      0 0 60px #000,
      0 0 70px #000,
      0 0 80px #000;
  }
  5%, 95%{
    color: #111;
    filter: blur(0px);
    text-shadow: none;
  }
}

/*Floating Text Loading Animation Source Code*/
/*{
    margin: 0;
    padding: 0;
    background-color: rgb(22, 22, 22);
}
.loader{
  text-align: center;
  height: 40px;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}
.loader span{
    font-size: 2.5rem;
    font-weight: 700;
    transform: translateZ(-100%);
    display: inline-block;
    color: red;
    animation: animate 2s infinite;
    transition: all 0.5s;
}
.loader span:nth-child(1) {
    animation-delay: 0.1s;
}
.loader span:nth-child(2) {
    animation-delay: 0.2s;
}
.loader span:nth-child(3) {
    animation-delay: 0.3s;
}
.loader span:nth-child(4) {
    animation-delay: 0.4s;
}
.loader span:nth-child(5) {
    animation-delay: 0.5s;
}
.loader span:nth-child(6) {
    animation-delay: 0.6s;
}
.loader span:nth-child(7) {
    animation-delay: 0.7s;
}
@keyframes animate{
    0% {
        color: rgb(245, 20, 20);
        transform: translateY(0);
        margin-left:0 ;
    }
    25%{
        transform: translateY(-15%);
        margin-left: 10px;
        text-shadow: 0 15px 5px rgba(0, 0, 0, 1);
    }
    100%{
        color: rgb(255, 255, 255, .1);
        transform: translateY(0);
        margin-left: 0;
    }
}*/