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

@font-face {
  font-display:           swap;
  font-family:            TwCenMT;
  src:                    url("TwCenMT.woff2");
}

@font-face {
  font-display:           swap;
  font-family:            TwCenMTBold;
  src:                    url("TwCenMTBold.woff2");
}

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

body {
  display:                grid;
  height:                 100%;
  min-height:             100vh;
  align-items:            center;
  background-size:        cover;
  background-color:       #201e24;
  padding:                0.1vw;
}

h1 {
  font-family:            TwCenMTBold;
  position:               relative;
  font-size:              calc(45px + 7vw);
  font-weight:            700;
  color:                  #f7b500;
  margin-block-start:     1vw;
  margin-block-end:       0;
  letter-spacing:         0.1vw;
}

h2 {
  font-family:            TwCenMT;
  position:               relative;
  font-size:              calc(37px + 5.4vw);
  font-weight:            700;
  color:                  #f7b500;
  margin-block-start:     0;
  margin-block-end:       1vw;
  letter-spacing:         0.3vw;
}

.logo {
  display:                flex;
  align-items:            center;
  width:                  50%;
  min-width:              375px;
  border:                 0;
  padding:                0;
  margin:                 auto;
}

.logo-img {
  width:                  100%;
  height:                 auto;
  max-width:              800px;
  min-width:              220px;
  margin:                 0 1.5vw;
}

.logo-txt {
  display:                inline-block;
  width:                  50%;
  padding:                0 1.5vw;
}

.message {
  display:                flex;
  flex-direction:         column;
  align-items:            center;
  font-family:            PXFXDisco, Arial, Helvetica, sans-serif;
}

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

.subtitle {
  position:               relative;
  font-size:              3.5vw;
  color:                  #f7b500;
}

@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); }
}

@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); }
}

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

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