html,
body {
  height: 100%;
}
body {
  display: grid;
  width: 100%;
  font-family: Inconsolata, monospace;
  align-content: center;
}
body div#error {
  position: relative;
  margin: auto;
  padding: 20px;
  z-index: 2;
}
body div#error div#box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #000;
}
body div#error div#box:before,
body div#error div#box:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0px 0px 0px 1px #000;
  mix-blend-mode: multiply;
  animation: dance 2s infinite steps(1);
}
body div#error div#box:before {
  clip-path: polygon(0 0, 65% 0, 35% 100%, 0 100%);
  box-shadow: inset 0px 0px 0px 1px currentColor;
  color: #f0f;
}
body div#error div#box:after {
  clip-path: polygon(65% 0, 100% 0, 100% 100%, 35% 100%);
  animation-duration: 0.5s;
  animation-direction: alternate;
  box-shadow: inset 0px 0px 0px 1px currentColor;
  color: #0ff;
}
body div#error h3 {
  position: relative;
  font-size: 5vw;
  font-weight: 700;
  text-transform: uppercase;
 /* animation: blink 1.3s infinite steps(1); */
}
body div#error h3:before,
body div#error h3:after {
  
  position: absolute;
  top: -1px;
  left: 0;
  mix-blend-mode: soft-light;
  animation: dance 2s infinite steps(2);
}
body div#error h3:before {
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  color: #f0f;
  animation: shiftright 200ms steps(2) infinite;
}
body div#error h3:after {
  clip-path: polygon(0 100%, 100% 100%, 100% 50%, 0 50%);
  color: #0ff;
  animation: shiftleft 200ms steps(2) infinite;
}
body div#error p {
  position: relative;
  margin-bottom: 8px;
}
body div#error p span {
  position: relative;
  display: inline-block;
  font-weight: bold;
  color: #000;
  animation: blink 3s steps(1) infinite;
}
body div#error p span:before,
body div#error p span:after {
  content: 'TELEGRAM';
  position: absolute;
  top: -1px;
  left: 0;
  mix-blend-mode: multiply;
}
body div#error p span:before {
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  color: #f0f;
  animation: shiftright 1.5s steps(2) infinite;
}
body div#error p span:after {
  clip-path: polygon(0 100%, 100% 100%, 100% 50%, 0 50%);
  color: #0ff;
  animation: shiftleft 1.7s steps(2) infinite;
}
@-moz-keyframes dance {
  0%, 84%, 94% {
    transform: skew(0deg);
  }
  85% {
    transform: skew(5deg);
  }
  90% {
    transform: skew(-5deg);
  }
  98% {
    transform: skew(3deg);
  }
}
@-webkit-keyframes dance {
  0%, 84%, 94% {
    transform: skew(0deg);
  }
  85% {
    transform: skew(5deg);
  }
  90% {
    transform: skew(-5deg);
  }
  98% {
    transform: skew(3deg);
  }
}
@-o-keyframes dance {
  0%, 84%, 94% {
    transform: skew(0deg);
  }
  85% {
    transform: skew(5deg);
  }
  90% {
    transform: skew(-5deg);
  }
  98% {
    transform: skew(3deg);
  }
}
@keyframes dance {
  0%, 84%, 94% {
    transform: skew(0deg);
  }
  85% {
    transform: skew(5deg);
  }
  90% {
    transform: skew(-5deg);
  }
  98% {
    transform: skew(3deg);
  }
}
@-moz-keyframes shiftleft {
  0%, 87%, 100% {
    transform: translate(0, 0) skew(0deg);
  }
  84%, 90% {
    transform: translate(-8px, 0) skew(20deg);
  }
}
@-webkit-keyframes shiftleft {
  0%, 87%, 100% {
    transform: translate(0, 0) skew(0deg);
  }
  84%, 90% {
    transform: translate(-8px, 0) skew(20deg);
  }
}
@-o-keyframes shiftleft {
  0%, 87%, 100% {
    transform: translate(0, 0) skew(0deg);
  }
  84%, 90% {
    transform: translate(-8px, 0) skew(20deg);
  }
}
@keyframes shiftleft {
  0%, 87%, 100% {
    transform: translate(0, 0) skew(0deg);
  }
  84%, 90% {
    transform: translate(-8px, 0) skew(20deg);
  }
}
@-moz-keyframes shiftright {
  0%, 87%, 100% {
    transform: translate(0, 0) skew(0deg);
  }
  84%, 90% {
    transform: translate(8px, 0) skew(20deg);
  }
}
@-webkit-keyframes shiftright {
  0%, 87%, 100% {
    transform: translate(0, 0) skew(0deg);
  }
  84%, 90% {
    transform: translate(8px, 0) skew(20deg);
  }
}
@-o-keyframes shiftright {
  0%, 87%, 100% {
    transform: translate(0, 0) skew(0deg);
  }
  84%, 90% {
    transform: translate(8px, 0) skew(20deg);
  }
}
@keyframes shiftright {
  0%, 87%, 100% {
    transform: translate(0, 0) skew(0deg);
  }
  84%, 90% {
    transform: translate(8px, 0) skew(20deg);
  }
}
@-moz-keyframes blink {
  0%, 50%, 85%, 100% {
    color: #000;
  }
  87%, 95% {
    color: transparent;
  }
}
@-webkit-keyframes blink {
  0%, 50%, 85%, 100% {
    color: #000;
  }
  87%, 95% {
    color: transparent;
  }
}
@-o-keyframes blink {
  0%, 50%, 85%, 100% {
    color: #000;
  }
  87%, 95% {
    color: transparent;
  }
}
@keyframes blink {
  0%, 50%, 85%, 100% {
    color: #000;
  }
  87%, 95% {
    color: transparent;
  }
}

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap");


.text-container {
  display: flex;
  justify-content: center;
  block-size: min(10rem, 23vw);
  min-inline-size: 20.5rem;
}

.text-stroke {
  font-size: 42px;
  letter-spacing: 4px;
  fill: none;
  stroke: #101bff;
  stroke-width: 1;
  stroke-dasharray: 100%;
  stroke-dashoffset: 100%;
  animation: textStrokeAnim 9000ms linear both;
  animation-iteration-count: 1;
}

.reset {
  width: max-content;
  margin-inline: auto;
  padding: 0.5em 1.25em;
  font-size: 1.5rem;
  border-radius: 1rem;
  border: 0;
  position: relative;
  background-color: hsl(49deg, 100%, 62%);
  color: #555;
}

.reset::after,
.reset::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: all 66ms ease;
}

.reset::after {
  box-shadow: 0 0.25rem 0.5rem #0003, -0.124rem 0.5rem 0.45rem #0002;
  opacity: 1;
}

.reset::before {
  box-shadow: inset 0 1px 0.5px 0px #777, inset 0 -2px 0.5px 0px #fff9,
  inset 0 4px 10px 0px #0007, inset 0 -4px 16px 0px #fff7;
  opacity: 0;
}

.reset:focus-visible {
  outline: 2px solid #0ebeff;
  outline-offset: 1px;
}

.reset:active {
  scale: 0.98;
}

.reset:is(:active, :focus-visible)::after {
  opacity: 0;
}

.reset:active::before {
  opacity: 1;
}

@keyframes textStrokeAnim {
  0% {
    stroke-dasharray: 100%;
    stroke-dashoffset: 100%;
    fill: #0000;
  }
  65% {
    stroke-dasharray: 50%;
    stroke-dashoffset: 90%;
    fill: #0000;
  }
  100% {
    stroke-dasharray: 0%;
    stroke-dashoffset: 0%;
    fill: #9b9dad;
    filter: drop-shadow(2px 2px 10px #0007);
  }
}