h1,

h2 {

  margin: 0;

}

@import url('https://fonts.cdnfonts.com/css/gg-sans-2');



.pda{

	position:absolute;

	background-image: url('/theme/img/pda.png');

	background-repeat: no-repeat;

	background-size: 658px 461px;

	width:658px;

	left:	calc(50% - 329px);

	margin:0 auto;

	height:755px;

	top:130px;

	display:block;

}

.hdsel:hover,.hwsel:hover,.hackinfo:hover{

	background-color:#A9A9A9;

	cursor:pointer;

	color:black;

}

#hack {

	font-family: "Courier New" !important;

	color:#c6c6c6;

	position:absolute;

	top: 20px;

    left: 38px;

	width: 580px;

}

.hero {

  font-size: clamp(40px, 10vw, 100px);

  /*line-height: 1;*/

  display: inline-block;

  color: #fff;

  z-index: 2;

  letter-spacing: 11px;



  /* Bright things in dark environments usually cast that light, giving off a glow */

  filter: drop-shadow(0 1px 3px);

}



.demo {

  height: 100px;

  background: #fff;

}



.layers {

  position: relative;

}



.layers::before,

.layers::after {

  content: attr(data-text);

  position: absolute;

  width: 110%;

  z-index: -1;

}



.layers::before {

  top: 10px;

  left: 15px;

  color: #e0287d;

}



.layers::after {

  top: 5px;

  left: -10px;

  color: #1bc7fb;

}



.single-path {

  clip-path: polygon(

    0% 12%,

    53% 12%,

    53% 26%,

    25% 26%,

    25% 86%,

    31% 86%,

    31% 0%,

    53% 0%,

    53% 84%,

    92% 84%,

    92% 82%,

    70% 82%,

    70% 29%,

    78% 29%,

    78% 65%,

    69% 65%,

    69% 66%,

    77% 66%,

    77% 45%,

    85% 45%,

    85% 26%,

    97% 26%,

    97% 28%,

    84% 28%,

    84% 34%,

    54% 34%,

    54% 89%,

    30% 89%,

    30% 58%,

    83% 58%,

    83% 5%,

    68% 5%,

    68% 36%,

    62% 36%,

    62% 1%,

    12% 1%,

    12% 34%,

    60% 34%,

    60% 57%,

    98% 57%,

    98% 83%,

    1% 83%,

    1% 53%,

    91% 53%,

    91% 84%,

    8% 84%,

    8% 83%,

    4% 83%

  );

}



.paths {

  animation: paths 5s step-end infinite;

}



@keyframes paths {

  0% {

    clip-path: polygon(

      0% 43%,

      83% 43%,

      83% 22%,

      23% 22%,

      23% 24%,

      91% 24%,

      91% 26%,

      18% 26%,

      18% 83%,

      29% 83%,

      29% 17%,

      41% 17%,

      41% 39%,

      18% 39%,

      18% 82%,

      54% 82%,

      54% 88%,

      19% 88%,

      19% 4%,

      39% 4%,

      39% 14%,

      76% 14%,

      76% 52%,

      23% 52%,

      23% 35%,

      19% 35%,

      19% 8%,

      36% 8%,

      36% 31%,

      73% 31%,

      73% 16%,

      1% 16%,

      1% 56%,

      50% 56%,

      50% 8%

    );

  }



  5% {

    clip-path: polygon(

      0% 29%,

      44% 29%,

      44% 83%,

      94% 83%,

      94% 56%,

      11% 56%,

      11% 64%,

      94% 64%,

      94% 70%,

      88% 70%,

      88% 32%,

      18% 32%,

      18% 96%,

      10% 96%,

      10% 62%,

      9% 62%,

      9% 84%,

      68% 84%,

      68% 50%,

      52% 50%,

      52% 55%,

      35% 55%,

      35% 87%,

      25% 87%,

      25% 39%,

      15% 39%,

      15% 88%,

      52% 88%

    );

  }



  30% {

    clip-path: polygon(

      0% 53%,

      93% 53%,

      93% 62%,

      68% 62%,

      68% 37%,

      97% 37%,

      97% 89%,

      13% 89%,

      13% 45%,

      51% 45%,

      51% 88%,

      17% 88%,

      17% 54%,

      81% 54%,

      81% 75%,

      79% 75%,

      79% 76%,

      38% 76%,

      38% 28%,

      61% 28%,

      61% 12%,

      55% 12%,

      55% 62%,

      68% 62%,

      68% 51%,

      0% 51%,

      0% 92%,

      63% 92%,

      63% 4%,

      65% 4%

    );

  }



  45% {

    clip-path: polygon(

      0% 33%,

      2% 33%,

      2% 69%,

      58% 69%,

      58% 94%,

      55% 94%,

      55% 25%,

      33% 25%,

      33% 85%,

      16% 85%,

      16% 19%,

      5% 19%,

      5% 20%,

      79% 20%,

      79% 96%,

      93% 96%,

      93% 50%,

      5% 50%,

      5% 74%,

      55% 74%,

      55% 57%,

      96% 57%,

      96% 59%,

      87% 59%,

      87% 65%,

      82% 65%,

      82% 39%,

      63% 39%,

      63% 92%,

      4% 92%,

      4% 36%,

      24% 36%,

      24% 70%,

      1% 70%,

      1% 43%,

      15% 43%,

      15% 28%,

      23% 28%,

      23% 71%,

      90% 71%,

      90% 86%,

      97% 86%,

      97% 1%,

      60% 1%,

      60% 67%,

      71% 67%,

      71% 91%,

      17% 91%,

      17% 14%,

      39% 14%,

      39% 30%,

      58% 30%,

      58% 11%,

      52% 11%,

      52% 83%,

      68% 83%

    );

  }



  76% {

    clip-path: polygon(

      0% 26%,

      15% 26%,

      15% 73%,

      72% 73%,

      72% 70%,

      77% 70%,

      77% 75%,

      8% 75%,

      8% 42%,

      4% 42%,

      4% 61%,

      17% 61%,

      17% 12%,

      26% 12%,

      26% 63%,

      73% 63%,

      73% 43%,

      90% 43%,

      90% 67%,

      50% 67%,

      50% 41%,

      42% 41%,

      42% 46%,

      50% 46%,

      50% 84%,

      96% 84%,

      96% 78%,

      49% 78%,

      49% 25%,

      63% 25%,

      63% 14%

    );

  }



  90% {

    clip-path: polygon(

      0% 41%,

      13% 41%,

      13% 6%,

      87% 6%,

      87% 93%,

      10% 93%,

      10% 13%,

      89% 13%,

      89% 6%,

      3% 6%,

      3% 8%,

      16% 8%,

      16% 79%,

      0% 79%,

      0% 99%,

      92% 99%,

      92% 90%,

      5% 90%,

      5% 60%,

      0% 60%,

      0% 48%,

      89% 48%,

      89% 13%,

      80% 13%,

      80% 43%,

      95% 43%,

      95% 19%,

      80% 19%,

      80% 85%,

      38% 85%,

      38% 62%

    );

  }



  1%,

  7%,

  33%,

  47%,

  78%,

  93% {

    clip-path: none;

  }

}



.movement {

  /* Normally this position would be absolute & on the layers, set to relative here so we can see it on the div */

  position: relative;

  animation: movement 8s step-end infinite;

}



@keyframes movement {

  0% {

    top: 0px;

    left: -20px;

  }



  15% {

    top: 10px;

    left: 10px;

  }



  60% {

    top: 5px;

    left: -10px;

  }



  75% {

    top: -5px;

    left: 20px;

  }



  100% {

    top: 10px;

    left: 5px;

  }

}



.opacity {

  animation: opacity 5s step-end infinite;

}



@keyframes opacity {

  0% {

    opacity: 0.1;

  }



  5% {

    opacity: 0.7;

  }



  30% {

    opacity: 0.4;

  }



  45% {

    opacity: 0.6;

  }



  76% {

    opacity: 0.4;

  }



  90% {

    opacity: 0.8;

  }



  1%,

  7%,

  33%,

  47%,

  78%,

  93% {

    opacity: 0;

  }

}



.font {

  animation: font 7s step-end infinite;

}



@keyframes font {

  0% {

    font-weight: 100;

    color: #e0287d;

    filter: blur(3px);

  }



  20% {

    font-weight: 500;

    color: #fff;

    filter: blur(0);

  }



  50% {

    font-weight: 300;

    color: #1bc7fb;

    filter: blur(2px);

  }



  60% {

    font-weight: 700;

    color: #fff;

    filter: blur(0);

  }



  90% {

    font-weight: 500;

    color: #e0287d;

    filter: blur(6px);

  }

}



.glitch span {

  animation: paths 5s step-end infinite;

}



.glitch::before {

  animation: paths 5s step-end infinite, opacity 5s step-end infinite,

    font 8s step-end infinite, movement 10s step-end infinite;

}



.glitch::after {

  animation: paths 5s step-end infinite, opacity 5s step-end infinite,

    font 7s step-end infinite, movement 8s step-end infinite;

}



.hero-container {

  position: relative;

  padding: 200px 0;

  text-align: center;

}





.mglitch {

  position: relative;

  color: yellow;

  mix-blend-mode: lighten;

}



.mglitch:before,

.mglitch:after {

  content: attr(data-text);

  position: absolute;

  top: 0;

  width: 100%;

  background: black;

  clip: rect(0, 0, 0, 0);

}



.mglitch:before {

  left: -4px;

  text-shadow: 6px 0 #ff00ff;

}



.mglitch:hover:before {

  text-shadow: 4px 0 #ff00ff;

  animation: glitch-anim-1 0.4s normal ease-in-out alternate-reverse;

}



.mglitch:after {

  left: 4px;

  text-shadow: -3px 0 #00ffc8;

}



.mglitch:hover:after {

  text-shadow: -5px 0 #00ffc8;

  animation: glitch-anim-2 0.3s normal ease-in-out alternate-reverse;

}



@keyframes glitch-anim-1 {

  0% {

    clip: rect(30px, 9999px, 10px, 0);

  }

  25% {

    clip: rect(15px, 9999px, 100px, 0);

  }

  50% {

    clip: rect(50px, 9999px, 105px, 0);

  }

  75% {

    clip: rect(2px, 9999px, 80px, 0);

  }

  100% {

    clip: rect(90px, 9999px, 100px, 0);

  }

}



@keyframes glitch-anim-2 {

  0% {

    top: -1px;

    left: 50px;

    clip: rect(65px, 9999px, 119px, 0);

  }

  25% {

    top: -10px;

    left: 1px;

    clip: rect(79px, 9999px, 19px, 0);

  }

  50% {

    top: -7px;

    left: 20px;

    clip: rect(65px, 9999px, 11px, 0);

  }

  75% {

    top: 10px;

    right: 20px;

    left: -50px;

    clip: rect(95px, 9999px, 53px, 0);

  }

  100% {

    top: -5px;

    left: -7px;

    clip: rect(31px, 9999px, 149px, 0);

  }

}



/*==============*/



@import url(https://fonts.googleapis.com/css?family=Special+Elite);

* {

  font-size: 100%;

  box-sizing: border-box;

}

.ggrid[data-columns] {

  min-width: 100%;

  -moz-column-count: 3;

       column-count: 3;

  -moz-column-gap: 0.5em;

       column-gap: 0.5em;

}



.ggrid[data-columns] > section.gblock {

  display: inline-block;

  width: 100%;

}



.ggrid[data-columns] > section.gblock:nth-child(even) {

  order: 2;

}



section.gblock {

  margin: 0;

  padding: 1em;

  font-size: 1.1em;

  color: #607779;

  letter-spacing: 1px;

  height: auto;

}

section.gblock span {

  display: inline-block;

  margin-left: 1rem;

}

section.gblock span.b0 {

  width: 20rem;

  height: 1.5rem;

  background: #545657;

}

section.gblock span.b1 {

  width: 22rem;

  height: 1.5rem;

  background: #93a1ab;

}

section.gblock span.b2 {

  width: 8rem;

  height: 1.5rem;

  background: #b3c8dd;

}

section.gblock span.b3 {

  width: 12rem;

  height: 1.5rem;

  background: #6a9c92;

}

section.gblock span.b4 {

  width: 10rem;

  height: 1.5rem;

  background: #bc8696;

}

section.gblock span.b5 {

  width: 15rem;

  height: 1.5rem;

  background: #7ed6be;

}

section.gblock span.b6 {

  width: 16rem;

  height: 1.5rem;

  background: #b3c8dd;

}



@media all and (max-width: 1230px) {

  .ggrid[data-columns] {

    -moz-column-count: 2;

         column-count: 2;

  }

}

@media (max-width: 780px) {

  .ggrid[data-columns] {

    -moz-column-count: 1;

         column-count: 1;

    width: 100%;

  }

  .ggrid[data-columns] section.gblock span {

    width: 95%;

  }

}

@media (max-width: 450px) {

  .ggrid[data-columns] section.gblock {

    padding: 0;

  }

}

.err {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  min-height: 100%;

  line-height: 3rem;

  display: flex;

  flex-direction: column;

  justify-content: center;

}

.err #gl {

	position: absolute;

	top:60px;

	line-height:20px;

	text-align:center;

  cursor: default;

  align-self: center;

  width: 285px;

  height: 80px;

  -webkit-animation: anim 2.5s infinite ease;

          animation: anim 2.5s infinite ease;

  color: #fff;

  text-shadow: -1px 2px 0px #000, -2px 3px 0px rgba(0, 0, 0, 0.8), 3px 4px 0px rgba(0, 0, 0, 0.3), 5px -5px 0px #d24858, 6px 6px 0px rgba(0, 0, 0, 0.4);

  font-size: 15px;

  opacity: 0;

}

.err #gl a{

	text-decoration:none!important;

	color:#fff!important;

}

.err #gl a:hover{

	color:#fff !important;

}



@-webkit-keyframes anim {

  0% {

    transform: none;

    opacity: 0.75;

  }

  7% {

    transform: translate(2px, 3px);

    opacity: 0.85;

    text-shadow: -5px 5px 0px #93a1ab;

  }

  10% {

    transform: none;

    opacity: 0.65;

  }

  27% {

    transform: none;

    opacity: 0.75;

  }

  30% {

    transform: translate(5px, 2px);

    opacity: 0.5;

  }

  35% {

    transform: none;

    opacity: 0.75;

  }

  52% {

    transform: none;

    opacity: 0.85;

  }

  55% {

    transform: translate(5px, 1px);

    opacity: 0.5;

  }

  50% {

    transform: none;

    opacity: 0.75;

  }

  72% {

    transform: none;

    opacity: 0.85;

  }

  75% {

    transform: translate(2px, 6px);

    opacity: 0.5;

  }

  80% {

    transform: none;

    opacity: 0.75;

  }

  100% {

    transform: none;

    opacity: 0.85;

  }

}



@keyframes anim {

  0% {

    transform: none;

    opacity: 0.75;

  }

  7% {

    transform: translate(2px, 3px);

    opacity: 0.85;

    text-shadow: -5px 5px 0px #93a1ab;

  }

  10% {

    transform: none;

    opacity: 0.65;

  }

  27% {

    transform: none;

    opacity: 0.75;

  }

  30% {

    transform: translate(5px, 2px);

    opacity: 0.5;

  }

  35% {

    transform: none;

    opacity: 0.75;

  }

  52% {

    transform: none;

    opacity: 0.85;

  }

  55% {

    transform: translate(5px, 1px);

    opacity: 0.5;

  }

  50% {

    transform: none;

    opacity: 0.75;

  }

  72% {

    transform: none;

    opacity: 0.85;

  }

  75% {

    transform: translate(2px, 6px);

    opacity: 0.5;

  }

  80% {

    transform: none;

    opacity: 0.75;

  }

  100% {

    transform: none;

    opacity: 0.85;

  }

}