html {
  font: 5vmin/1.3 Serif;
  overflow: hidden;
  background: #123;
}

body, head {
  display: block;
  font-size: 52px;
  color: transparent;
}

head::before, head::after,
body::before, body::after {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 3em;
  height: 3em;
  content: '.';
  mix-blend-mode: screen;
  animation: 44s -27s move infinite ease-in-out alternate;
}

body::before {
  text-shadow: 2.9992971153em 2.6581597212em 7px rgba(130, 204, 0, 0.6), 0.1959423187em 1.0748815em 7px rgba(0, 204, 146, 0.6), 2.2447278383em -0.4972450535em 7px rgba(204, 20, 0, 0.6), 1.6110166182em 0.4352207946em 7px rgba(0, 43, 204, 0.6), -0.4872643119em 3.1884817305em 7px rgba(0, 183, 204, 0.6), 0.1109786151em 1.7582380686em 7px rgba(82, 0, 204, 0.6), 0.6885355133em 1.1464384587em 7px rgba(204, 0, 160, 0.6), 0.39452165em 2.0082798561em 7px rgba(187, 0, 204, 0.6), 0.697902841em 0.9204140745em 7px rgba(156, 204, 0, 0.6), 1.0579901507em 1.6849275765em 7px rgba(204, 22, 0, 0.6), 2.4797178078em 2.6809040677em 7px rgba(204, 111, 0, 0.6), 2.7662655157em 0.785370516em 7px rgba(204, 174, 0, 0.6), 1.3201808343em 1.0718671477em 7px rgba(204, 0, 33, 0.6), 3.203463112em 0.4874234915em 7px rgba(68, 0, 204, 0.6), 0.0794039286em 3.157839611em 7px rgba(0, 93, 204, 0.6), 0.3666400846em -0.0390187352em 7px rgba(137, 0, 204, 0.6), 2.6684579738em 3.2452034778em 7px rgba(204, 0, 54, 0.6), 3.2075262448em -0.2126905678em 7px rgba(204, 0, 62, 0.6), 1.8151704487em 3.461343201em 7px rgba(204, 84, 0, 0.6), -0.0841530094em 1.4542539121em 7px rgba(204, 0, 107, 0.6), 2.5151776198em 2.7802401921em 7px rgba(0, 204, 68, 0.6), -0.4411305473em 0.2000975592em 7px rgba(0, 31, 204, 0.6), 2.5036416343em 2.5970505109em 7px rgba(204, 0, 163, 0.6), -0.0905444045em 1.8122135521em 7px rgba(204, 0, 175, 0.6), 1.9277552685em 1.8128496113em 7px rgba(0, 173, 204, 0.6), 1.1251694139em 0.2357548666em 7px rgba(0, 185, 204, 0.6), 1.5616664163em 3.0798743275em 7px rgba(134, 0, 204, 0.6), 0.2393611743em -0.3027299273em 7px rgba(54, 0, 204, 0.6), 0.817861126em 3.1980561719em 7px rgba(0, 108, 204, 0.6), 3.3195268382em 0.2191756797em 7px rgba(0, 204, 73, 0.6), 1.1313641453em 2.3752021321em 7px rgba(0, 204, 159, 0.6), 1.6503619956em 0.8369557301em 7px rgba(0, 176, 204, 0.6), 3.4722986578em 0.4940121867em 7px rgba(0, 117, 204, 0.6), 2.107243072em 1.008377128em 7px rgba(164, 0, 204, 0.6), 1.6514211336em 1.6859457602em 7px rgba(0, 204, 153, 0.6), -0.2315864913em 3.3360028583em 7px rgba(177, 204, 0, 0.6), 2.5781723912em 3.2729967165em 7px rgba(0, 76, 204, 0.6), 1.5644094023em -0.2903322322em 7px rgba(160, 204, 0, 0.6), 0.5516931193em 2.8777878114em 7px rgba(0, 193, 204, 0.6), 1.3368876711em -0.1834502973em 7px rgba(137, 204, 0, 0.6), 1.7023421704em 2.4362239689em 7px rgba(0, 61, 204, 0.6);
  animation-duration: 8s;
  animation-delay: -27s;
}

body::after {
  text-shadow: 2.2005821592em -0.2172162539em 7px rgba(0, 204, 129, 0.6), 1.9490685492em 1.9625713683em 7px rgba(204, 99, 0, 0.6), 2.5022428777em 0.519069001em 7px rgba(0, 204, 80, 0.6), 2.1823524937em 1.2431713603em 7px rgba(0, 9, 204, 0.6), 2.9565814247em 2.8510948378em 7px rgba(0, 33, 204, 0.6);
  animation-duration: 13s;
  animation-delay: -32s;
}

head::before {
  text-shadow: 1.8861167869em 3.252535099em 7px rgba(142, 0, 204, 0.6), 0.3604969041em 3.4690380823em 7px rgba(122, 0, 204, 0.6), 0.8795165653em 1.7980215647em 7px rgba(175, 204, 0, 0.6), 3.1879509562em 3.0349283077em 7px rgba(0, 189, 204, 0.6), 0.1935686667em 0.1915907308em 7px rgba(204, 98, 0, 0.6);
  animation-duration: 42s;
  animation-delay: -23s;
}

head::after {
  text-shadow: 2.1838352587em -0.3644894923em 7px rgba(0, 204, 194, 0.6), 3.2172984265em 0.5470211619em 7px rgba(0, 152, 204, 0.6), 2.9465896204em 1.3748672373em 7px rgba(194, 0, 204, 0.6), 2.9683255344em 1.6831566774em 7px rgba(56, 204, 0, 0.6), 0.1244192305em 1.3270227728em 7px rgba(204, 0, 160, 0.6);
  animation-duration: 41s;
  animation-delay: -19s;
}

html::before {
  content: 'Hendrik Reinhold\A Webdesign\A\A\A\A';
  letter-spacing: .5em;
  text-shadow: 0 0 5px #000;
  white-space: pre;
  color: #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #999;
}

html:first-line {
  font-size: 140%;
  font-style: italic;
  letter-spacing: 0;
  color: #fff;
}


@keyframes move {
  from {
    transform: rotate(0deg) scale(12) translateX(20px);
  }
  to {
    transform: rotate(360deg) scale(18) translateX(-20px);
  }
}



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

a {
  display: block;
  width: 220px;
  height: 70px;
  z-index: 1;
}
a:after {
  content: '';
  background: linear-gradient(120deg, #6559ae, #ff7159, #6559ae);
  background-size: 400% 400%;
  -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 4px 66px, 4px 100%, 100% 100%, 100% 0%, 0% 0%);
  -moz-animation: gradient 3s ease-in-out infinite, border 1s forwards ease-in-out reverse;
  -webkit-animation: gradient 3s ease-in-out infinite, border 1s forwards ease-in-out reverse;
  animation: gradient 3s ease-in-out infinite, border 1s forwards ease-in-out reverse;
}
a > span {
  display: block;
  background: linear-gradient(120deg, #6559ae, #ff7159, #6559ae);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-animation: gradient 3s ease-in-out infinite;
  -webkit-animation: gradient 3s ease-in-out infinite;
  animation: gradient 3s ease-in-out infinite;
}

/* helpers */
.absolute-centering, body:after, a, a:after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.text-formatting, a {
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  letter-spacing: 2px;
  line-height: 70px;
  font-family: 'Squada One', cursive;
  font-size: 28px;
}

/* motion */
@-moz-keyframes gradient {
  0% {
    background-position: 14% 0%;
  }
  50% {
    background-position: 87% 100%;
  }
  100% {
    background-position: 14% 0%;
  }
}
@-webkit-keyframes gradient {
  0% {
    background-position: 14% 0%;
  }
  50% {
    background-position: 87% 100%;
  }
  100% {
    background-position: 14% 0%;
  }
}
@keyframes gradient {
  0% {
    background-position: 14% 0%;
  }
  50% {
    background-position: 87% 100%;
  }
  100% {
    background-position: 14% 0%;
  }
}
@-moz-keyframes border {
  0% {
    -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 4px 66px, 4px 100%, 100% 100%, 100% 0%, 0% 0%);
  }
  25% {
    -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 216px 66px, 216px 100%, 100% 100%, 100% 0%, 0% 0%);
  }
  50% {
    -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 100% 0%, 0% 0%);
  }
  75% {
    -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 0%, 0% 0%);
  }
  100% {
    -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 0% 100%);
  }
}
@-webkit-keyframes border {
  0% {
    -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 4px 66px, 4px 100%, 100% 100%, 100% 0%, 0% 0%);
  }
  25% {
    -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 216px 66px, 216px 100%, 100% 100%, 100% 0%, 0% 0%);
  }
  50% {
    -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 100% 0%, 0% 0%);
  }
  75% {
    -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 0%, 0% 0%);
  }
  100% {
    -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 0% 100%);
  }
}
@keyframes border {
  0% {
    -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 4px 66px, 4px 100%, 100% 100%, 100% 0%, 0% 0%);
  }
  25% {
    -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 216px 66px, 216px 100%, 100% 100%, 100% 0%, 0% 0%);
  }
  50% {
    -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 100% 0%, 0% 0%);
  }
  75% {
    -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 0%, 0% 0%);
  }
  100% {
    -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 0% 100%);
  }
}