@import url("https://fonts.googleapis.com/css?family=Orbitron");
body {
  font-family: Sans-serif;
  background: linear-gradient(45deg, #222529 0%, #191519 100%);
}

body:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-style: solid;
  border-width: 72px 72px 72px 72px;
  border-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0.2);
}

.text {
  color: #36ba2c;
  font-size: 24px;
  padding: 0 4px;
  display: inline-block;
  text-shadow: 0px 0px 8px #79ba48;
}

.container {
  background: #222;
  background: radial-gradient(ellipse at center, #2e3d26 0%, #040805 100%);
  background-attachment: fixed;
  position: absolute;
  top: 64px;
  left: 64px;
  right: 64px;
  bottom: 64px;
  padding: 64px;
  border-radius: 24px;
  overflow: hidden;
}

.container:before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.container:after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  box-shadow: inset 0px 0px 32px 16px rgba(0, 0, 0, 0.4);
  z-index: 2;
  border-radius: 24px;
}

.inner-container:after {
  position: absolute;
  content: "";
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url(http://i.imgur.com/VXcVUTX.png);
  border-radius: 24px;
}

.err-code {
  font-family: "Orbitron";
  font-weight: bold;
  font-size: 128px;
  padding: 0 4px;
}

.buzz {
  color: #36ba2c;
  position: relative;
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
.blip {
  animation: blink 1.5s steps(5, start) infinite;
}

@keyframes noise-anim {
  0% {
    clip: rect(83px, 9999px, 65px, 0);
  }
  3.3333333333% {
    clip: rect(45px, 9999px, 24px, 0);
  }
  6.6666666667% {
    clip: rect(28px, 9999px, 171px, 0);
  }
  10% {
    clip: rect(42px, 9999px, 97px, 0);
  }
  13.3333333333% {
    clip: rect(90px, 9999px, 119px, 0);
  }
  16.6666666667% {
    clip: rect(12px, 9999px, 74px, 0);
  }
  20% {
    clip: rect(5px, 9999px, 174px, 0);
  }
  23.3333333333% {
    clip: rect(69px, 9999px, 9px, 0);
  }
  26.6666666667% {
    clip: rect(6px, 9999px, 89px, 0);
  }
  30% {
    clip: rect(45px, 9999px, 28px, 0);
  }
  33.3333333333% {
    clip: rect(56px, 9999px, 113px, 0);
  }
  36.6666666667% {
    clip: rect(52px, 9999px, 96px, 0);
  }
  40% {
    clip: rect(25px, 9999px, 160px, 0);
  }
  43.3333333333% {
    clip: rect(69px, 9999px, 144px, 0);
  }
  46.6666666667% {
    clip: rect(9px, 9999px, 198px, 0);
  }
  50% {
    clip: rect(64px, 9999px, 189px, 0);
  }
  53.3333333333% {
    clip: rect(40px, 9999px, 117px, 0);
  }
  56.6666666667% {
    clip: rect(26px, 9999px, 50px, 0);
  }
  60% {
    clip: rect(88px, 9999px, 150px, 0);
  }
  63.3333333333% {
    clip: rect(77px, 9999px, 59px, 0);
  }
  66.6666666667% {
    clip: rect(20px, 9999px, 137px, 0);
  }
  70% {
    clip: rect(4px, 9999px, 33px, 0);
  }
  73.3333333333% {
    clip: rect(45px, 9999px, 98px, 0);
  }
  76.6666666667% {
    clip: rect(21px, 9999px, 65px, 0);
  }
  80% {
    clip: rect(90px, 9999px, 25px, 0);
  }
  83.3333333333% {
    clip: rect(27px, 9999px, 139px, 0);
  }
  86.6666666667% {
    clip: rect(30px, 9999px, 106px, 0);
  }
  90% {
    clip: rect(22px, 9999px, 72px, 0);
  }
  93.3333333333% {
    clip: rect(69px, 9999px, 62px, 0);
  }
  96.6666666667% {
    clip: rect(11px, 9999px, 130px, 0);
  }
  100% {
    clip: rect(70px, 9999px, 29px, 0);
  }
}
.buzz:after {
  content: attr(data-text);
  position: absolute;
  left: 4px;
  top: 0;
  background: radial-gradient(ellipse at center, #2e3d26 0%, #040805 100%);
  background-attachment: fixed;
  animation: noise-anim 2s infinite linear alternate-reverse;
}

@keyframes noise-anim-2 {
  0% {
    clip: rect(34px, 9999px, 70px, 0);
  }
  3.3333333333% {
    clip: rect(16px, 9999px, 1px, 0);
  }
  6.6666666667% {
    clip: rect(75px, 9999px, 18px, 0);
  }
  10% {
    clip: rect(31px, 9999px, 150px, 0);
  }
  13.3333333333% {
    clip: rect(30px, 9999px, 42px, 0);
  }
  16.6666666667% {
    clip: rect(34px, 9999px, 36px, 0);
  }
  20% {
    clip: rect(57px, 9999px, 56px, 0);
  }
  23.3333333333% {
    clip: rect(6px, 9999px, 40px, 0);
  }
  26.6666666667% {
    clip: rect(64px, 9999px, 74px, 0);
  }
  30% {
    clip: rect(84px, 9999px, 147px, 0);
  }
  33.3333333333% {
    clip: rect(39px, 9999px, 1px, 0);
  }
  36.6666666667% {
    clip: rect(55px, 9999px, 116px, 0);
  }
  40% {
    clip: rect(75px, 9999px, 15px, 0);
  }
  43.3333333333% {
    clip: rect(26px, 9999px, 88px, 0);
  }
  46.6666666667% {
    clip: rect(47px, 9999px, 9px, 0);
  }
  50% {
    clip: rect(7px, 9999px, 26px, 0);
  }
  53.3333333333% {
    clip: rect(4px, 9999px, 92px, 0);
  }
  56.6666666667% {
    clip: rect(52px, 9999px, 18px, 0);
  }
  60% {
    clip: rect(66px, 9999px, 129px, 0);
  }
  63.3333333333% {
    clip: rect(43px, 9999px, 15px, 0);
  }
  66.6666666667% {
    clip: rect(76px, 9999px, 66px, 0);
  }
  70% {
    clip: rect(42px, 9999px, 88px, 0);
  }
  73.3333333333% {
    clip: rect(5px, 9999px, 92px, 0);
  }
  76.6666666667% {
    clip: rect(81px, 9999px, 16px, 0);
  }
  80% {
    clip: rect(6px, 9999px, 51px, 0);
  }
  83.3333333333% {
    clip: rect(55px, 9999px, 131px, 0);
  }
  86.6666666667% {
    clip: rect(34px, 9999px, 132px, 0);
  }
  90% {
    clip: rect(23px, 9999px, 124px, 0);
  }
  93.3333333333% {
    clip: rect(52px, 9999px, 139px, 0);
  }
  96.6666666667% {
    clip: rect(7px, 9999px, 93px, 0);
  }
  100% {
    clip: rect(82px, 9999px, 87px, 0);
  }
}
.buzz:before {
  content: attr(data-text);
  position: absolute;
  left: -3px;
  top: 0;
  padding: 0 4px;
  background: radial-gradient(ellipse at center, #2e3d26 0%, #040805 100%);
  background-attachment: fixed;
  animation: noise-anim-2 3s infinite linear alternate-reverse;
}