.page404 {
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 200px;
	color:#533a0a;
  }
  
  .segment {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	width: 300px;
	height: 200px;
  }
  
  .glitch {
	position: relative;
	font-size: 36px;
	line-height: 1;
  }
  
  .symbol {
	position: absolute;
	top: 0;
	transform: translate(-50%, -50%) scale(3);
	white-space: nowrap;
	letter-spacing: 10px;
	text-indent: 10px;
	animation-name: symbol-move;
	animation-iteration-count: infinite;
	
	&.shallow {
	  left: 1px;
	  z-index: 2;
	  text-shadow: 1px 0 0 red;
	  animation-duration: 0.95s;
	}
	&.deep {
	  left: 0;
	  z-index: 3;
	  text-shadow: 1px 0 0 cyan;
	  mix-blend-mode: darken;
	  animation-duration: 1.1s;
	  animation-delay: 0.2s;
	}
  }
  
  .hline {
	position: absolute;
	z-index: 4;
	transform: translate(-50%, -50%);
	width: 100vw;
	height: 3px;
	background-color: rgb(251, 253, 255);
	animation: line-move 15s ease-out infinite;
  }
  
  
  @keyframes symbol-move {
	10% { top: -0.8px; left: -2.2px; }
	20% { top: 0.8px; left: -0.4px; }
	30% { left: 1px; }
	40% { top: -0.6px; left: -1.4px; }
	50% { left: 0.4px; }
	60% { top: 3.6px; left: -2.4px; }
	70% { top: -2px; left: 0.2px; }
	80% { top: -0.8px; left: -1.8px; }
	90% { left: 2.4px; }
	100% { left: -2.4px; }
  }
  

  
  @keyframes line-move {
	0% { top: -60px; }
	9% { top: 25px; }
	14% { top: -30px }
	18% { top: 40px; }
	22% { top: -25px; }
	32% { top: 45px; }
	34% { top: -10px; }
	40% { top: 35px; }
	43% { top: -25px; }
	99% { top: 45px; }
	100% { top: 60px }
  }