p {
    font-size: 16px;
}

h2 {
    font-size: 48px;
    font-family: 'Jersey-Regular';
    letter-spacing: 0.1em;
    text-transform: uppercase;
    overflow-wrap: break-word;
}

h3 {
    font-family: 'Jersey-Regular';
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

 .glowing-btn {
  position: relative;
  color: rgba(0,126,189,0.9);
  cursor: pointer;
  padding: 0.6em 1em;
  border: 0.15em solid rgba(0,126,189,0.9);
  border-radius: 0.45em;
  background: none;
  perspective: 2em;
  text-align: center;
  text-decoration: none;
  

  font-size: 18px;
  font-weight: 900;
  //letter-spacing: 0.6em;
 margin-top: 30px;
 text-transform: uppercase;

 //align-self: center;
 width: 200px;
 font-family: 'Jersey-Regular';
    letter-spacing: 0.1em;

  -webkit-box-shadow: inset 0px 0px 0.5em 0px rgba(0,126,189,0.9),
    0px 0px 0.5em 0px rgba(0,126,189,0.9);
  -moz-box-shadow: inset 0px 0px 0.5em 0px rgba(0,126,189,0.9),
    0px 0px 0.5em 0px rgba(0,126,189,0.9);
  box-shadow: inset 0px 0px 0.5em 0px rgba(0,126,189,0.9),
    0px 0px 0.5em 0px rgba(0,126,189,0.9);
  //animation: border-flicker 2s linear infinite;
}

.glowing-txt {
  //float: left;
  //margin-right: -0.8em;
  color: white;
//  -webkit-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3),
//    0 0 0.45em rgba(0,126,189,0.9);
//  -moz-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3),
//    0 0 0.45em rgba(0,126,189,0.9);
//  text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em rgba(0,126,189,0.9);
  //animation: text-flicker 3s linear infinite;
}

.faulty-letter {
  opacity: 1;
  //animation: faulty-flicker 2s linear infinite;
}

//.glowing-btn::before {
//  content: "";
//  position: absolute;
//  top: 0;
//  bottom: 0;
//  left: 0;
//  right: 0;
//  opacity: 0.7;
//  filter: blur(1em);
//  transform: translateY(120%) rotateX(95deg) scale(1, 0.35);
//  background: rgba(0,126,189,0.9);
//  pointer-events: none;
//}

//.glowing-btn::after {
//  content: "";
//  position: absolute;
//  top: 0;
//  left: 0;
//  right: 0;
//  bottom: 0;
//  opacity: 0;
//  z-index: -1;
//  background-color: rgba(0,126,189,0.9);
//  box-shadow: 0 0 2em 0.2em rgba(0,126,189,0.9);
//  transition: opacity 100ms linear;
//}

.glowing-btn:hover {
  background-color: rgba(0,126,189,0.9);
  text-shadow: none;
  animation: none;
}

.glowing-btn:hover .glowing-txt {
  animation: none;
}

.glowing-btn:hover .faulty-letter {
  animation: none;
  text-shadow: none;
  opacity: 1;
}

.glowing-btn:hover:before {
  filter: blur(1.5em);
  opacity: 1;
}

.glowing-btn:hover:after {
  opacity: 1;
}

@keyframes faulty-flicker {
  0% {
    opacity: 0.1;
  }
  2% {
    opacity: 0.1;
  }
  4% {
    opacity: 0.5;
  }
  19% {
    opacity: 0.5;
  }
  21% {
    opacity: 0.1;
  }
  23% {
    opacity: 1;
  }
  80% {
    opacity: 0.5;
  }
  83% {
    opacity: 0.4;
  }

  87% {
    opacity: 1;
  }
}

@keyframes text-flicker {
  0% {
    opacity: 0.1;
  }

  2% {
    opacity: 1;
  }

  8% {
    opacity: 0.1;
  }

  9% {
    opacity: 1;
  }

  12% {
    opacity: 0.1;
  }
  20% {
    opacity: 1;
  }
  25% {
    opacity: 0.3;
  }
  30% {
    opacity: 1;
  }

  70% {
    opacity: 0.7;
  }
  72% {
    opacity: 0.2;
  }

  77% {
    opacity: 0.9;
  }
  100% {
    opacity: 0.9;
  }
}

@keyframes border-flicker {
  0% {
    opacity: 0.1;
  }
  2% {
    opacity: 1;
  }
  4% {
    opacity: 0.1;
  }

  8% {
    opacity: 1;
  }
  70% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}


@keyframes morph {
  0% {border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;} 
  100% {border-radius: 40% 60%;} 
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}
      
      
      /* This is just to transition when you change the viewport size. */
      * {
        transition: all 0.5s ease-out;
      }

      

 .image-box {
        min-height: 60vmin;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;

        .box {
            width: 40vmin;
            height: 40vmin;
            border: 1px dashed rgba(0, 128, 189,0.8);
            position: relative;
            
            @media screen and (min-width: 900px) {
                width: 40vmin;
                height: 40vmin;
            }

            &::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                border-radius: 50%;
                border: 1px dashed rgba(0, 128, 189,0.8);
                transform: scale(1.42);
            }
        }

        .spin-container {
            width: 100%;
            height: 100%;
            animation: spin 12s ease-in-out infinite alternate;
            position: relative;
        }

        .shape {
            width: 100%;
            height: 100%;
            transition: border-radius 1s ease-out;
            border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
            animation: morph 8s ease-in-out infinite both alternate;
            position: absolute;
            overflow: hidden;
            z-index: 5;
        }

        .bd {
            width: 142%;
            height: 142%;
            position: absolute;
            left: -21%;
            top: -21%;
            background: url(../assets/img/lan.jpg);
            background-size: 100%;
            background-position: center center;
            display: flex;
            color: #003;
            font-size: 5vw;
            font-weight: bold;
            align-items: center;
            justify-content: center;
            text-align: center;
            text-transform: uppercase;
            animation: spin 12s ease-in-out infinite alternate-reverse;
            opacity: 1;
            z-index: 2;
        }
    }

    .btn {
                margin: 0 auto;
                margin-top: 30px;
                position: relative;
                display: block;
                border-radius: 999em;
                color: white;
                max-width: 250px;
                height: 45px;
                font-size: 20px;
                letter-spacing: 0.075em;
                text-decoration: none;
                text-transform: uppercase;
                font-family: monospace;
                 font-family: 'Jersey-Regular';

                 span {
                     font-family: 'Jersey-Regular';
                      font-size: 24px;
                 }
              
            
                &__inner {
                    height: 45px;
                    padding: 1px;
                    position: relative;
                    z-index: 2;
                    display: block;
                    overflow: hidden;
                    border-radius: inherit;
                    text-align: center;
                    font-family: monospace;
            
                &:before {
                    height: 45px;
                    position: absolute;
                    inset: 4px;
                    z-index: 1;
                    display: block;
                    opacity: 0;
                    transition: opacity 0.2s linear 0.1s;
                    content: "";
                }
                }
            
                &__label {
                    height: 100%;
                    position: relative;
                    display: block;
                    overflow: hidden;
                    padding: 0.35em 0em 0.35em;
                    border-radius: inherit;
                    color: transparent;
                    white-space: nowrap;
                    font-family: monospace;
                    
                
                    &:before,
                    &:after {
                        position: absolute;
                        top: -2px;
                        left: 0;
                        z-index: 2;
                
                        display: block;
                        padding: inherit;
                        width: 100%;
                
                        color: white;
                        white-space: nowrap;
                
                        transition: transform 0.3s cubic-bezier(1, 0, 0, 1) 0s;
                    }
                
                    &:before {
                        transform: translate3d(0, 0, 0);
                
                        content: attr(data-label);
                    }
                
                    &:after {
                        transform: translate3d(0, -100%, 0);
                
                        content: attr(data-hover);
                    }
                    
                    &__background {
                        position: absolute;
                        inset: -100px;
                        display: block;
                        background: #222;
                        background-blend-mode: overlay;
                    }
                }
            
                &__background {
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 1;
                    display: block;
                    width: 100%;
                    height: 100%;
                    border-radius: inherit;
                
                    &:before,
                    &:after {
                        position: absolute;
                        inset: 0;
                        display: block;
                        border-radius: inherit;
                        content: "";
                    }
                
                    &:before {
                        background: white;
                    }
                }
                
                &:hover {
                    .btn__background {
                        &:before {
                            background: #0080bd;
                        }
                
                        &:after {
                            opacity: 1;
                            transition: opacity 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s;
                        }
                    }
            
            
                    .btn__label {
                        &:before,
                        &:after {
                            transition-duration: 0.6s;
                            transition-timing-function: cubic-bezier(1, -0.6, 0, 1.6);
                        }
                
                        &:before {
                            transform: translate3d(0, 100%, 0);
                        }
                
                        &:after {
                            transform: translate3d(0, 0, 0);
                        }
                    }
                }
            }