@charset "UTF-8";

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
  border-collapse: collapse; 
  font-family: 'Harrington'; 
}

html, body {
    width: 100%;
    height: 100%;
    background: #000;
}

body {
	display:flex; 
  flex-direction:column;
}

header {
	z-index: 2;
	color: #fff;
	text-align: center;
}

header .wrap {
	display: flex;
  align-items: center;
  justify-content: center;
  margin: 100px auto;
}

article {
	display: flex;
	flex:1;
	flex-direction: column;
	color: #fff;
	position: relative;
	font-size:20px;
	color: #fff;
	z-index: 2;
	width:100%;
}

#retrobackvideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

.wrapper-two-col {
	display: flex;
	width: 100%; 
	margin: 0 auto;
	text-align: center;
}

.wrapper-two-col ul {
	list-style-type: none;
	margin: 5px;
}

.wrapper-two-col ul li {
	margin: 2px;
}

.wrapper-two-col a {
  text-decoration-thickness: 1px; 
  color: #fff; 
	/* animation: color-change 20s infinite; */
}

.wrapper-two-col a:hover {
	/* color: #fff; */
	animation: color-change 10s infinite;
	/* background-color: #000; */
    /* text-shadow: 
    1px 1px 0 white, 
    -1px 1px 0 white, 
    1px -1px 0 white, 
    -1px -1px 0 white, 
    1px 0 0 white, 
    -1px 0 0 white, 
    0 1px 0 white, 
    0 -1px 0 white; */
  text-decoration-thickness: 3px;      
}

@keyframes color-change {
  0% { color: rgb(255, 0, 255); }
  25% { color: rgb(0, 255, 255); }
  50% { color: rgb(255, 0, 0); }
  75% { color: rgb(0, 255, 255); }
  100% { color: rgb(255, 0, 255); }
}

.wrapper-left {
	flex:1;
	float: left; 
	text-align: right;
	display: flex;
	gap: 20px; 
	flex-wrap:nowrap;
	justify-content: right;
	align-items:flex-start;
	margin: 10px 10px 100px;
}

.wrapper-right {
	flex:1;
	float: right; 
	text-align: left;
	display: flex;
	gap: 20px; 
	flex-wrap: nowrap;
	justify-content: left;
	align-items:flex-start;
	margin: 10px 10px 100px;
}

.wrapper-item {
  line-height: 1.5rem;
}

.outlined-text {
  text-shadow: 
    1px 1px 0 black, 
    -1px 1px 0 black, 
    1px -1px 0 black, 
    -1px -1px 0 black, 
    1px 0 0 black, 
    -1px 0 0 black, 
    0 1px 0 black, 
    0 -1px 0 black;
}

footer {  
	background: rgba(0, 0, 0, .7);
	display: flex;
  justify-content: center;
  align-items: center;
	flex-wrap: wrap;
	padding:20px;
	font-size:18px;
	z-index: 2;
	color: #fff;
	margin: auto;
  text-align: center;
  width:100%;
}

footer a {
	margin-left:10px;
	font-weight:600;
}

.p-canvas-webgl {
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
}

#x_wrapper {
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.navbar {
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  height: 50px;
  background: rgba(0, 0, 0, .7);
  z-index: 3;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
}

.nav-list {
  list-style: none;
  display: flex;
  gap: 20px;
}

.nav-item a {
  color: #fff;
  text-decoration: none;
  padding: 10px 10px;
  transition: background-color 0.3s, color 0.3s;
}

.nav-item a:hover {
  /* color: #ff83e0; */
  animation: color-change 10s infinite;
  text-decoration: underline;
  text-decoration-thickness: 3px;
	background-color: #000;
}

@media only screen and (max-width: 576px) {
	header .wrap {
		margin: 50px auto;
	}
	.glitch {
		font-size: 40px;
	}
	.wrapper {
		margin: auto 20px 50px;
	}
  .nav-item a {
  padding: 10px 3px;
  }
}

.glitch {
  font-family: 'Harrington';  
  font-size: 64px;
  font-weight: 600;
  color: white;
  position: relative;
  margin: 0 auto;
  text-shadow: 0px -5px 10px white, 0px 0px 5px rgba(255, 255, 255, 0), 0px 0px 10px rgba(255, 255, 255, 0), 0px 0px 15px rgba(255, 255, 255, 0), 0px 0px 20px rgba(255, 255, 255, 0);
  -webkit-animation: noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate, blur 8s ease-in-out infinite alternate;
          animation: noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate, blur 8s ease-in-out infinite alternate;
  transform: skewX(0deg);
}
@-webkit-keyframes blur {
  0%,40%, 50%, 60%, 90%, 95%, 100% {
    text-shadow: 0px -5px 10px white, 0px 0px 5px rgba(255, 255, 255, 0), 0px 0px 10px rgba(255, 255, 255, 0), 2px 1px 15px rgba(100, 240, 255, 0), 0px 0px 20px rgba(255, 255, 255, 0);
  }
  45%, 75% {
    text-shadow: 0px -5px 10px white, 0px 0px 5px white, 0px 0px 10px white, 2px 1px 15px #64f0ff, 0px 0px 20px white;
  }
  97.5% {
    text-shadow: 0px -5px 10px rgba(255, 255, 255, 0), 0px 0px 5px rgba(255, 255, 255, 0), 0px 0px 10px rgba(255, 255, 255, 0), 2px 1px 4px #ff6464, 0px 0px 20px rgba(255, 255, 255, 0);
  }
}
@keyframes blur {
  0%,40%, 50%, 60%, 90%, 95%, 100% {
    text-shadow: 0px -5px 10px white, 0px 0px 5px rgba(255, 255, 255, 0), 0px 0px 10px rgba(255, 255, 255, 0), 2px 1px 15px rgba(100, 240, 255, 0), 0px 0px 20px rgba(255, 255, 255, 0);
  }
  45%, 75% {
    text-shadow: 0px -5px 10px white, 0px 0px 5px white, 0px 0px 10px white, 2px 1px 15px #64f0ff, 0px 0px 20px white;
  }
  97.5% {
    text-shadow: 0px -5px 10px rgba(255, 255, 255, 0), 0px 0px 5px rgba(255, 255, 255, 0), 0px 0px 10px rgba(255, 255, 255, 0), 2px 1px 4px #ff6464, 0px 0px 20px rgba(255, 255, 255, 0);
  }
}
.glitch:after {
  content: attr(data-text);
  position: absolute;
  left: 3px;
  text-shadow: -1px 0 red;
  top: 0;
  color: transparent;
  background: transparent;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  -webkit-animation: noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate;
          animation: noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate;
  transform: skewX(0deg);
  z-index: -2;
  opacity: .7;
}

.glitch:before {
  content: attr(data-text);
  position: absolute;
  left: 1px;
  text-shadow: -3px 0 cyan;
  top: 0;
  color: transparent;
  background: transparent;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  -webkit-animation: noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate;
          animation: noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate;
  transform: skewX(0deg);
  z-index: -1;
  opacity: .8;
}

@-webkit-keyframes noise-anim {
  0% {
    clip: rect(83px, 9999px, 1px, 0);
  }
  5% {
    clip: rect(41px, 9999px, 49px, 0);
  }
  10% {
    clip: rect(75px, 9999px, 10px, 0);
  }
  15% {
    clip: rect(35px, 9999px, 33px, 0);
  }
  20% {
    clip: rect(6px, 9999px, 89px, 0);
  }
  25% {
    clip: rect(43px, 9999px, 37px, 0);
  }
  30% {
    clip: rect(36px, 9999px, 44px, 0);
  }
  35% {
    clip: rect(11px, 9999px, 30px, 0);
  }
  40% {
    clip: rect(83px, 9999px, 63px, 0);
  }
  45% {
    clip: rect(95px, 9999px, 82px, 0);
  }
  50% {
    clip: rect(80px, 9999px, 29px, 0);
  }
  55% {
    clip: rect(87px, 9999px, 37px, 0);
  }
  60% {
    clip: rect(44px, 9999px, 74px, 0);
  }
  65% {
    clip: rect(29px, 9999px, 39px, 0);
  }
  70% {
    clip: rect(96px, 9999px, 11px, 0);
  }
  75% {
    clip: rect(27px, 9999px, 53px, 0);
  }
  80% {
    clip: rect(22px, 9999px, 11px, 0);
  }
  85% {
    clip: rect(60px, 9999px, 11px, 0);
  }
  90% {
    clip: rect(52px, 9999px, 45px, 0);
  }
  95% {
    clip: rect(59px, 9999px, 37px, 0);
  }
  100% {
    clip: rect(63px, 9999px, 31px, 0);
  }
}

@keyframes noise-anim {
  0% {
    clip: rect(83px, 9999px, 1px, 0);
  }
  5% {
    clip: rect(41px, 9999px, 49px, 0);
  }
  10% {
    clip: rect(75px, 9999px, 10px, 0);
  }
  15% {
    clip: rect(35px, 9999px, 33px, 0);
  }
  20% {
    clip: rect(6px, 9999px, 89px, 0);
  }
  25% {
    clip: rect(43px, 9999px, 37px, 0);
  }
  30% {
    clip: rect(36px, 9999px, 44px, 0);
  }
  35% {
    clip: rect(11px, 9999px, 30px, 0);
  }
  40% {
    clip: rect(83px, 9999px, 63px, 0);
  }
  45% {
    clip: rect(95px, 9999px, 82px, 0);
  }
  50% {
    clip: rect(80px, 9999px, 29px, 0);
  }
  55% {
    clip: rect(87px, 9999px, 37px, 0);
  }
  60% {
    clip: rect(44px, 9999px, 74px, 0);
  }
  65% {
    clip: rect(29px, 9999px, 39px, 0);
  }
  70% {
    clip: rect(96px, 9999px, 11px, 0);
  }
  75% {
    clip: rect(27px, 9999px, 53px, 0);
  }
  80% {
    clip: rect(22px, 9999px, 11px, 0);
  }
  85% {
    clip: rect(60px, 9999px, 11px, 0);
  }
  90% {
    clip: rect(52px, 9999px, 45px, 0);
  }
  95% {
    clip: rect(59px, 9999px, 37px, 0);
  }
  100% {
    clip: rect(63px, 9999px, 31px, 0);
  }
}
@-webkit-keyframes noise-anim-2 {
  0% {
    clip: rect(56px, 9999px, 48px, 0);
  }
  5% {
    clip: rect(61px, 9999px, 39px, 0);
  }
  10% {
    clip: rect(89px, 9999px, 85px, 0);
  }
  15% {
    clip: rect(38px, 9999px, 28px, 0);
  }
  20% {
    clip: rect(32px, 9999px, 18px, 0);
  }
  25% {
    clip: rect(6px, 9999px, 90px, 0);
  }
  30% {
    clip: rect(84px, 9999px, 49px, 0);
  }
  35% {
    clip: rect(62px, 9999px, 11px, 0);
  }
  40% {
    clip: rect(67px, 9999px, 88px, 0);
  }
  45% {
    clip: rect(71px, 9999px, 9px, 0);
  }
  50% {
    clip: rect(87px, 9999px, 97px, 0);
  }
  55% {
    clip: rect(93px, 9999px, 25px, 0);
  }
  60% {
    clip: rect(2px, 9999px, 58px, 0);
  }
  65% {
    clip: rect(24px, 9999px, 5px, 0);
  }
  70% {
    clip: rect(4px, 9999px, 86px, 0);
  }
  75% {
    clip: rect(33px, 9999px, 15px, 0);
  }
  80% {
    clip: rect(58px, 9999px, 31px, 0);
  }
  85% {
    clip: rect(14px, 9999px, 57px, 0);
  }
  90% {
    clip: rect(55px, 9999px, 55px, 0);
  }
  95% {
    clip: rect(13px, 9999px, 89px, 0);
  }
  100% {
    clip: rect(1px, 9999px, 84px, 0);
  }
}
@keyframes noise-anim-2 {
  0% {
    clip: rect(56px, 9999px, 48px, 0);
  }
  5% {
    clip: rect(61px, 9999px, 39px, 0);
  }
  10% {
    clip: rect(89px, 9999px, 85px, 0);
  }
  15% {
    clip: rect(38px, 9999px, 28px, 0);
  }
  20% {
    clip: rect(32px, 9999px, 18px, 0);
  }
  25% {
    clip: rect(6px, 9999px, 90px, 0);
  }
  30% {
    clip: rect(84px, 9999px, 49px, 0);
  }
  35% {
    clip: rect(62px, 9999px, 11px, 0);
  }
  40% {
    clip: rect(67px, 9999px, 88px, 0);
  }
  45% {
    clip: rect(71px, 9999px, 9px, 0);
  }
  50% {
    clip: rect(87px, 9999px, 97px, 0);
  }
  55% {
    clip: rect(93px, 9999px, 25px, 0);
  }
  60% {
    clip: rect(2px, 9999px, 58px, 0);
  }
  65% {
    clip: rect(24px, 9999px, 5px, 0);
  }
  70% {
    clip: rect(4px, 9999px, 86px, 0);
  }
  75% {
    clip: rect(33px, 9999px, 15px, 0);
  }
  80% {
    clip: rect(58px, 9999px, 31px, 0);
  }
  85% {
    clip: rect(14px, 9999px, 57px, 0);
  }
  90% {
    clip: rect(55px, 9999px, 55px, 0);
  }
  95% {
    clip: rect(13px, 9999px, 89px, 0);
  }
  100% {
    clip: rect(1px, 9999px, 84px, 0);
  }
}
@-webkit-keyframes shift {
  0%,40%, 44%, 58%, 61%, 65%,69%,73%,100% {
    transform: skewX(0deg);
  }
  41% {
    transform: skewX(10deg);
  }
  42% {
    transform: skewX(-10deg);
  }
  59% {
    transform: skewX(40deg) skewY(10deg);
  }
  60% {
    transform: skewX(-40deg) skewY(-10deg);
  }
  63% {
    transform: skewX(10deg) skewY(-5deg);
  }
  70% {
    transform: skewX(-50deg) skewY(-20deg);
  }
  71% {
    transform: skewX(10deg) skewY(-10deg);
  }
}
@keyframes shift {
  0%,40%, 44%, 58%, 61%, 65%,69%,73%,100% {
    transform: skewX(0deg);
  }
  41% {
    transform: skewX(10deg);
  }
  42% {
    transform: skewX(-10deg);
  }
  59% {
    transform: skewX(40deg) skewY(10deg);
  }
  60% {
    transform: skewX(-40deg) skewY(-10deg);
  }
  63% {
    transform: skewX(10deg) skewY(-5deg);
  }
  70% {
    transform: skewX(-50deg) skewY(-20deg);
  }
  71% {
    transform: skewX(10deg) skewY(-10deg);
  }
}