@font-face {
  font-family: PXFXDisco;
  src: url("pxfxdisco.woff2");
}

html {
}

*, ::before, ::after {
  box-sizing: border-box;
}

body {
  display:          grid;
  height:           100%;
  min-height:       100vh;
  align-items:      center;
  background-size:  cover;
  background-color: #092139;
  font-family:      PXFXDisco, Arial, Helvetica, sans-serif;
  font-style:       normal;
}

.text-wrapper {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
}

.title {
  position:    relative;
  font-size:   9em;
  font-weight: 700;
  color:       #b26b26;
}

.subtitle {
  position:    relative;
  font-size:   40px;
  font-weight: 700;
  color:       #b26b26;
}

.subtitle::after, .title::after {
  content:     attr(data-content);
  position:    absolute;
  left:        2px;
  text-shadow: red -2px 0px;
  top:         0px;
  color:       #fff2d9;
  overflow:    hidden;
  clip-path:   inset(0px   calc(100% - 900px) 100% 0px);
  animation:   2s linear 0s infinite alternate-reverse none running glitch;
}

@keyframes glitch {
  0%   { clip-path: inset(1px   calc(100% - 9999px) calc(100% - 172px) 0px); }
  5%   { clip-path: inset(182px calc(100% - 9999px) calc(100% - 44px)  0px); }
  10%  { clip-path: inset(126px calc(100% - 9999px) calc(100% - 71px)  0px); }
  15%  { clip-path: inset(104px calc(100% - 9999px) calc(100% - 22px)  0px); }
  20%  { clip-path: inset(44px  calc(100% - 9999px) calc(100% - 127px) 0px); }
  25%  { clip-path: inset(150px calc(100% - 9999px) calc(100% - 39px)  0px); }
  30%  { clip-path: inset(109px calc(100% - 9999px) calc(100% - 183px) 0px); }
  35%  { clip-path: inset(81px  calc(100% - 9999px) calc(100% - 68px)  0px); }
  40%  { clip-path: inset(188px calc(100% - 9999px) calc(100% - 69px)  0px); }
  45%  { clip-path: inset(9px   calc(100% - 9999px) calc(100% - 24px)  0px); }
  50%  { clip-path: inset(176px calc(100% - 9999px) calc(100% - 98px)  0px); }
  55%  { clip-path: inset(155px calc(100% - 9999px) calc(100% - 142px) 0px); }
  60%  { clip-path: inset(51px  calc(100% - 9999px) calc(100% - 131px) 0px); }
  65%  { clip-path: inset(148px calc(100% - 9999px) calc(100% - 108px) 0px); }
  70%  { clip-path: inset(5px   calc(100% - 9999px) calc(100% - 187px) 0px); }
  75%  { clip-path: inset(183px calc(100% - 9999px) calc(100% - 188px) 0px); }
  80%  { clip-path: inset(5px   calc(100% - 9999px) calc(100% - 139px) 0px); }
  85%  { clip-path: inset(123px calc(100% - 9999px) calc(100% - 37px)  0px); }
  90%  { clip-path: inset(136px calc(100% - 9999px) calc(100% - 100px) 0px); }
  95%  { clip-path: inset(5px   calc(100% - 9999px) calc(100% - 25px)  0px); }
  100% { clip-path: inset(80px  calc(100% - 9999px) calc(100% - 25px)  0px); }
}

.subtitle::before, .title::before {
  content:     attr(data-content);
  position:    absolute;
  left:        -2px;
  text-shadow: blue 2px 0px;
  top:         0px;
  color:       #d24015;
  overflow:    hidden;
  clip-path:   inset(0px   calc(100% - 900px) 100% 0px);
  animation:   3s linear 0s infinite alternate-reverse none running glitch-2;
}

@keyframes glitch-2 {
  0%   { clip-path: inset(101px calc(100% - 9999px) calc(100% - 145px) 0px); }
  5%   { clip-path: inset(108px calc(100% - 9999px) calc(100% - 24px)  0px); }
  10%  { clip-path: inset(117px calc(100% - 9999px) calc(100% - 159px) 0px); }
  15%  { clip-path: inset(108px calc(100% - 9999px) calc(100% - 114px) 0px); }
  20%  { clip-path: inset(191px calc(100% - 9999px) calc(100% - 101px) 0px); }
  25%  { clip-path: inset(60px  calc(100% - 9999px) calc(100% - 143px) 0px); }
  30%  { clip-path: inset(123px calc(100% - 9999px) calc(100% - 21px)  0px); }
  35%  { clip-path: inset(167px calc(100% - 9999px) calc(100% - 85px)  0px); }
  40%  { clip-path: inset(141px calc(100% - 9999px) calc(100% - 186px) 0px); }
  45%  { clip-path: inset(194px calc(100% - 9999px) calc(100% - 41px)  0px); }
  50%  { clip-path: inset(165px calc(100% - 9999px) calc(100% - 67px)  0px); }
  55%  { clip-path: inset(77px  calc(100% - 9999px) calc(100% - 132px) 0px); }
  60%  { clip-path: inset(182px calc(100% - 9999px) calc(100% - 115px) 0px); }
  65%  { clip-path: inset(3px   calc(100% - 9999px) calc(100% - 166px) 0px); }
  70%  { clip-path: inset(143px calc(100% - 9999px) calc(100% - 119px) 0px); }
  75%  { clip-path: inset(153px calc(100% - 9999px) calc(100% - 2px)   0px); }
  80%  { clip-path: inset(193px calc(100% - 9999px) calc(100% - 88px)  0px); }
  85%  { clip-path: inset(190px calc(100% - 9999px) calc(100% - 8px)   0px); }
  90%  { clip-path: inset(152px calc(100% - 9999px) calc(100% - 90px)  0px); }
  95%  { clip-path: inset(104px calc(100% - 9999px) calc(100% - 78px)  0px); }
  100% { clip-path: inset(27px  calc(100% - 9999px) calc(100% - 31px)  0px); }
}