/**
 * Theme Name: Hello Elementor Child
 * Template:   hello-elementor
 */

:root {
  --dark: #333;
  --light: #fff;
}

.hidden {
	display: none;
}

.glitch {
  text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
    -0.025em -0.05em 0 rgba(0, 255, 0, 0.75),
    0.025em 0.05em 0 rgba(0, 0, 255, 0.75);

  animation: glitch 2500ms infinite;
}

.glitch span {
  position: absolute;
  top: 0;
  left: 0;
}
.glitch span:first-child {
	animation: glitch 650ms infinite;
  	clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  	transform: translate(-0.025em, -0.0125em);
  	opacity: 0.8;
 }
 .glitch span:last-child {
 	animation: glitch 375ms infinite;
  	clip-path: polygon(0 80%, 100% 20%, 100% 100%, 0 100%);
  	transform: translate(0.0125em, 0.025em);
  	opacity: 0.8;
 }

@keyframes glitch {
  0% {
    text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
      -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
      -0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
  }
  
  15% {
    text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
      0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
      -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  
  50% {
    text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
      0.05em 0 0 rgba(0, 255, 0, 0.75), 
      0 -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  
  100% {
    text-shadow: -0.025em 0 0 rgba(255, 0, 0, 0.75),
      -0.025em -0.025em 0 rgba(0, 255, 0, 0.75),
      -0.025em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
}


.typed-text {
  color: var(--light);
}

.cursor {
  display: inline-block;
  width: 3px;
  margin-left: 4px;
  background: var(--light);
}

.cursor.blink {
  animation: blink 0.8s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% {
    background: var(--light);
  }
  40%, 50% {
    background: transparent;
  }
}