/*
@author Jack Philippi
@description @NewRetroWave - I don't own any rights to the NewRetroWave logo or name 👽. Sorry it plays up on Mozilla. I'll fix it when I have a minute!
*/

@font-face {
  font-family: OutRun;
  src: url("https://jackphilippi.com.au/cdn/fonts/outrun_future.otf")
    format("opentype");
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  text-align: center;
  font-family: "Open Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #111;
  background: linear-gradient(#0c141f 40%, #cf33d9 41%, #0c141f 60%);
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.inner-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0 auto;
  perspective: 180px;
  perspective-origin: 50% 40%;
}

.landscape {
  position: absolute;
  width: 200%;
  left: -50%;
  height: 130%;
  bottom: -30%;
  background-image: -webkit-linear-gradient(top, #cf33d9 2px, transparent 2px),
    -webkit-linear-gradient(left, #cf33d9 2px, transparent 2px);
  background-size: 50px 50px, 80px 80px;
  background-position: -1px -1px, -1px -1px;
  transform: rotateX(85deg);
  animation: moveUp 1s infinite linear;
}

.nrw {
  z-index: 50;
}

.triangle {
  z-index: 0;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  width: 0;
  height: 0;
  border-left: 200px solid transparent;
  border-right: 250px solid transparent;
  border-bottom: 200px solid rgba(5, 5, 5, 0.33);
  transform: rotate(15deg);
}

.new {
  font-size: 5.2em;
  text-transform: uppercase;
  font-family: "Open Sans";
  color: transparent;
  position: relative;
  display: block;
  letter-spacing: -15px;
  transform: rotate(-10deg) skew(-20deg);
  margin-left: -100px;
  margin-bottom: -36px;
}
.new > .letter {
  -webkit-text-stroke: 2px #f4c6f4;
  margin-top: -8px;
  display: inline-block;
  padding: 0 1px;
  animation: glow 2.5s linear infinite;
}

@keyframes moveUp {
  0% {
    background-position: -1px -1px, -1px -1px;
  }
  100% {
    background-position: -50px -50px, -1px -1px;
  }
}

@keyframes glow {
  0% {
    filter: drop-shadow(0 0 6px #cf33d9) drop-shadow(0 0 6px #cf33d9);
  }
  50% {
    filter: drop-shadow(0 0 1px #cf33d9) drop-shadow(0 0 1px #cf33d9);
  }
  100% {
    filter: drop-shadow(0 0 6px #cf33d9) drop-shadow(0 0 6px #cf33d9);
  }
}
.retro {
  font-size: 5.5em;
  font-weight: 800;
  display: block;
  text-transform: uppercase;
  letter-spacing: -12px;
  transform: rotate(-10deg) skew(-15deg);
  margin-bottom: -20px;
}
.retro > .letter {
  display: inline-block;
  padding: 0 10px;
  margin: 0 -10px;
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIzMiUiIHN0b3AtY29sb3I9IiMxODE5MWEiLz48c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iIzE1N2JlNiIvPjxzdG9wIG9mZnNldD0iNTIlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIi8+PHN0b3Agb2Zmc2V0PSI1NiUiIHN0b3AtY29sb3I9IiMxODE5MWEiLz48c3RvcCBvZmZzZXQ9Ijg1JSIgc3RvcC1jb2xvcj0iIzE1N2JlNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==");
  background: -webkit-gradient(
    linear,
    50% 0%,
    50% 100%,
    color-stop(32%, #18191a),
    color-stop(40%, #157be6),
    color-stop(52%, #ffffff),
    color-stop(56%, #18191a),
    color-stop(85%, #157be6),
    color-stop(100%, #ffffff)
  );
  background: -moz-linear-gradient(
    top,
    #18191a 32%,
    #157be6 40%,
    #ffffff 52%,
    #18191a 56%,
    #157be6 85%,
    #ffffff
  );
  background: -webkit-linear-gradient(
    top,
    #18191a 32%,
    #157be6 40%,
    #ffffff 52%,
    #18191a 56%,
    #157be6 85%,
    #ffffff
  );
  background: linear-gradient(
    to bottom,
    #18191a 32%,
    #157be6 40%,
    #ffffff 52%,
    #18191a 56%,
    #157be6 85%,
    #ffffff
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff;
}

.wave {
  position: relative;
  z-index: 100;
  font-family: "OutRun", "Helvetica", sans-serif;
  font-size: 3.8em;
  color: #fa26f7;
  text-transform: uppercase;
  letter-spacing: -10px;
  transform: rotate(-3deg) skew(-3deg);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #000;
}