html,body {
  margin: 0;
  padding: 0;
}

.error-page {
  margin: 0;
  box-sizing: border-box;
  background-color: #000000;
  background-image: radial-gradient(#11581e, #041607);
  font-family: "VT323", Helvetica, sans-serif;
  font-size: 1.5rem;
  font-weight: 300;
  color: rgba(128, 255, 128, 0.8);
  text-shadow: 0 0 1ex #33ff33, 0 0 2px rgba(102, 74, 74, 0.8);
  width: 100vw;
  height: 100vh;
}

.error-page a {
  color: #fff;
  text-decoration: none;
}

.error-page a::before {
  content: "[";
}

.error-page a::after {
  content: "]";
}

.error-page .overlay {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%);
  background-size: auto 4px;
  z-index: 99;
}

.error-page .overlay::before {
  content: "";
  pointer-events: none;
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(0deg, transparent 0%, rgba(32, 128, 32, 0.2) 2%, rgba(32, 128, 32, 0.8) 3%, rgba(32, 128, 32, 0.2) 3%, transparent 100%);
  background-repeat: no-repeat;
  animation: scan 7.5s linear 0s infinite;
}

@keyframes scan {
  0% {
    background-position: 0 -100vh;
  }

  35%,
  100% {
    background-position: 0 100vh;
  }
}

.error-page .terminal {
  box-sizing: inherit;
  position: absolute;
  height: 100%;
  width: 100%;
  max-width: 100%;
  padding: 4rem;
  overflow-y: auto;
}

.command {
  background-color: #000;
  padding: 12px 8px;
  color: #fff;
  border-radius: 8px;
  margin: 20px 0;
  width: 50%;
  box-shadow: inset 0 0 10px #0000ff;
}

/* 滚动条美化 */
.error-page .terminal::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.error-page .terminal::-webkit-scrollbar-track {
  background-color: #000;
}

.error-page .terminal::-webkit-scrollbar-thumb {
  background-color: #fff;
}

.error-page .terminal .glitch {
  color: white;
  position: relative;
  margin: 0 auto;
  word-break: break-all;
}

.error-page .terminal .glitch:after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -1px 0 red;
  top: 0;
  color: white;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim 2s infinite linear alternate-reverse;
}

.error-page .terminal .glitch:before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: 1px 0 blue;
  top: 0;
  color: white;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim-2 3s infinite linear alternate-reverse;
}

@keyframes noise-anim {
  0% {
    clip: rect(65px, 9999px, 42px, 0);
  }

  5% {
    clip: rect(29px, 9999px, 80px, 0);
  }

  10% {
    clip: rect(67px, 9999px, 44px, 0);
  }

  15% {
    clip: rect(34px, 9999px, 57px, 0);
  }

  20% {
    clip: rect(42px, 9999px, 71px, 0);
  }

  25% {
    clip: rect(98px, 9999px, 45px, 0);
  }

  30% {
    clip: rect(32px, 9999px, 40px, 0);
  }

  35% {
    clip: rect(8px, 9999px, 11px, 0);
  }

  40% {
    clip: rect(5px, 9999px, 37px, 0);
  }

  45% {
    clip: rect(99px, 9999px, 48px, 0);
  }

  50% {
    clip: rect(84px, 9999px, 60px, 0);
  }

  55% {
    clip: rect(45px, 9999px, 72px, 0);
  }

  60% {
    clip: rect(61px, 9999px, 6px, 0);
  }

  65% {
    clip: rect(35px, 9999px, 39px, 0);
  }

  70% {
    clip: rect(74px, 9999px, 3px, 0);
  }

  75% {
    clip: rect(94px, 9999px, 78px, 0);
  }

  80% {
    clip: rect(51px, 9999px, 15px, 0);
  }

  85% {
    clip: rect(52px, 9999px, 84px, 0);
  }

  90% {
    clip: rect(79px, 9999px, 56px, 0);
  }

  95% {
    clip: rect(6px, 9999px, 87px, 0);
  }

  100% {
    clip: rect(95px, 9999px, 35px, 0);
  }
}

@keyframes noise-anim-2 {
  0% {
    clip: rect(44px, 9999px, 55px, 0);
  }

  5% {
    clip: rect(78px, 9999px, 31px, 0);
  }

  10% {
    clip: rect(72px, 9999px, 57px, 0);
  }

  15% {
    clip: rect(44px, 9999px, 48px, 0);
  }

  20% {
    clip: rect(11px, 9999px, 55px, 0);
  }

  25% {
    clip: rect(64px, 9999px, 55px, 0);
  }

  30% {
    clip: rect(3px, 9999px, 86px, 0);
  }

  35% {
    clip: rect(86px, 9999px, 15px, 0);
  }

  40% {
    clip: rect(49px, 9999px, 39px, 0);
  }

  45% {
    clip: rect(6px, 9999px, 31px, 0);
  }

  50% {
    clip: rect(3px, 9999px, 37px, 0);
  }

  55% {
    clip: rect(81px, 9999px, 56px, 0);
  }

  60% {
    clip: rect(11px, 9999px, 50px, 0);
  }

  65% {
    clip: rect(6px, 9999px, 9px, 0);
  }

  70% {
    clip: rect(100px, 9999px, 7px, 0);
  }

  75% {
    clip: rect(20px, 9999px, 69px, 0);
  }

  80% {
    clip: rect(36px, 9999px, 69px, 0);
  }

  85% {
    clip: rect(33px, 9999px, 71px, 0);
  }

  90% {
    clip: rect(10px, 9999px, 45px, 0);
  }

  95% {
    clip: rect(21px, 9999px, 94px, 0);
  }

  100% {
    clip: rect(98px, 9999px, 27px, 0);
  }
}

.error-page .terminal .output {
  color: rgba(128, 255, 128, 0.8);
  text-shadow: 0 0 1px rgba(51, 255, 51, 0.4), 0 0 2px rgba(255, 255, 255, 0.8);
  width: 50%;
  word-break: break-all;
}

.error-page .terminal .output::before {
  content: "> ";
}

.error-page .terminal .input {
  color: rgba(192, 255, 192, 0.8);
  text-shadow: 0 0 1px rgba(51, 255, 51, 0.4), 0 0 2px rgba(255, 255, 255, 0.8);
}

.error-page .terminal .input::before {
  content: "$ ";
}

@media screen and (max-width: 768px) {
  .error-page .terminal .output,
  .error-page .terminal .input {
    width: 100%;
  }

  .command {
    width: 100%;
  }
}