@charset "UTF-8";
@import "https://fonts.googleapis.com/css?family=Coming+Soon";
html {
  background: -webkit-radial-gradient(circle, #000000 2%, #2f0d73 100%);
  background: radial-gradient(circle, #000000 2%, #2f0d73 100%);
  font-family: 'Coming Soon', cursive;
  font-size: 16px;
}

body {
  overflow-x: hidden;
}

body::-webkit-scrollbar {
  width: 8px;
}

body.thin::-webkit-scrollbar {
  width: 2px;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #73a659;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(192, 47, 42, 0.9);
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(192, 47, 42, 0.9);
}

::-webkit-scrollbar-track-piece:start {
  background: #6abf40;
}

::-webkit-scrollbar-track-piece:start:window-inactive {
  background: rgba(192, 47, 42, 0.9);
}

::-webkit-scrollbar-track-piece:end {
  background: #73a659;
}

::-webkit-scrollbar-track-piece:end:window-inactive {
  background: rgba(192, 47, 42, 0.7);
}

.links {
  display: block;
  width: 57%;
  font-size: 1em;
  position: relative;
  -webkit-animation: hue cubic-bezier(0.1, 2.33, 0.001, -2.33) infinite 12s;
          animation: hue cubic-bezier(0.1, 2.33, 0.001, -2.33) infinite 12s;
}

@-webkit-keyframes hue {
  to {
    -webkit-filter: hue-rotate(360deg);
            filter: hue-rotate(360deg);
  }
}

@keyframes hue {
  to {
    -webkit-filter: hue-rotate(360deg);
            filter: hue-rotate(360deg);
  }
}
p {
  display: block;
  position: relative;
  text-indent: -1.3em;
}
p:before {
  content: '➤  ';
}
p:first-child {
  left: 100%;
  color: yellow;
  -webkit-animation: anim1 3s linear 1 forwards;
          animation: anim1 3s linear 1 forwards;
}
p:nth-child(2) {
  left: 40%;
  color: blue;
  opacity: 0;
  -webkit-animation: anim2 4s ease-in 1 forwards 2s;
          animation: anim2 4s ease-in 1 forwards 2s;
}
p:nth-child(3) {
  left: 40%;
  color: cyan;
  opacity: 0;
  -webkit-animation: anim2 5s cubic-bezier(1, 2.33, 0.5, -0.31875) 1 forwards 3s;
          animation: anim2 5s cubic-bezier(1, 2.33, 0.5, -0.31875) 1 forwards 3s;
}
p:nth-child(4) {
  left: 50%;
  opacity: 0;
  color: deeppink;
  -webkit-animation: anim3 3s cubic-bezier(1, 1.33, 0.5, -0.34252) 1 forwards 3s;
          animation: anim3 3s cubic-bezier(1, 1.33, 0.5, -0.34252) 1 forwards 3s;
}

@-webkit-keyframes anim1 {
  to {
    -webkit-transform: translate(-60%, 30%);
            transform: translate(-60%, 30%);
  }
}

@keyframes anim1 {
  to {
    -webkit-transform: translate(-60%, 30%);
            transform: translate(-60%, 30%);
  }
}
@-webkit-keyframes anim2 {
  to {
    opacity: 1;
  }
}
@keyframes anim2 {
  to {
    opacity: 1;
  }
}
@-webkit-keyframes anim3 {
  to {
    opacity: 1;
    -webkit-transform: translate(-10%, -10%);
            transform: translate(-10%, -10%);
  }
}
@keyframes anim3 {
  to {
    opacity: 1;
    -webkit-transform: translate(-10%, -10%);
            transform: translate(-10%, -10%);
  }
}
a {
  text-decoration: none;
  color: red;
}