*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  color: #d3d3d3;
  height: 100vh;
  font-family: "Caveat", cursive, monospace;
  background: #242424;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

main {
  height: calc(100vh - 25vh);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1.8rem;
}

main p {
  -webkit-transition: all ease;
  transition: all ease;
}

main p:hover {
  cursor: none;
  background-image: -webkit-gradient(linear, left bottom, right top, from(#c471ed), color-stop(#d16ba5), color-stop(#c777b9), color-stop(#ba83ca), color-stop(#aa8fd8), color-stop(#9a9ae1), color-stop(#8aa7ec), color-stop(#79b3f4), color-stop(#69bff8), color-stop(#52cffe), color-stop(#41dfff), color-stop(#46eefa), to(#5ffbf1));
  background-image: linear-gradient(to right top, #c471ed, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-size: 200%;
  -webkit-animation: gradient 1.5s linear infinite alternate;
          animation: gradient 1.5s linear infinite alternate;
}

main span {
  font-weight: 700;
}

a {
  text-decoration: none;
  color: #d3d3d3;
}

footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  height: 15vh;
  font-weight: 600;
}

footer > p {
  font-size: 1.2rem;
}

footer > p:hover {
  cursor: default;
  background: -webkit-gradient(linear, left top, right top, from(#12c2e9), color-stop(#c471ed), to(#f64f59));
  background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-size: 200%;
  -webkit-animation: gradient 1.5s linear infinite alternate;
          animation: gradient 1.5s linear infinite alternate;
}

footer .social-links {
  width: 35vw;
  margin-bottom: 0.3em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

footer .social-links .fab,
footer .social-links .fas {
  font-size: 1.6rem;
  -webkit-transition: color ease-in-out alternate 0.3s;
  transition: color ease-in-out alternate 0.3s;
}

footer .social-links .gmail:hover {
  color: #db4437;
  -webkit-animation: blink 1s infinite alternate linear;
          animation: blink 1s infinite alternate linear;
}

footer .social-links .twitter:hover {
  color: #00acee;
  -webkit-animation: blink 1s infinite alternate linear;
          animation: blink 1s infinite alternate linear;
}

footer .social-links .instagram:hover {
  color: #e1306c;
  -webkit-animation: blink 1s infinite alternate linear;
          animation: blink 1s infinite alternate linear;
}

footer .social-links .github:hover {
  color: #c0c0c0;
  -webkit-animation: blink 1s infinite alternate linear;
          animation: blink 1s infinite alternate linear;
}

header {
  height: 10vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

header > a {
  letter-spacing: 0.25em;
  font-size: 2rem;
  font-weight: 700;
}

header a:hover {
  background: -webkit-gradient(linear, left top, right top, from(#12c2e9), color-stop(#c471ed), to(#f64f59));
  background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-size: 200%;
  -webkit-animation: gradient 1.5s linear infinite alternate;
          animation: gradient 1.5s linear infinite alternate;
}

@media screen and (max-width: 750px) {
  main {
    padding: 0 1em;
    text-align: center;
    background-image: -webkit-gradient(linear, left bottom, right top, from(#c471ed), color-stop(#d16ba5), color-stop(#c777b9), color-stop(#ba83ca), color-stop(#aa8fd8), color-stop(#9a9ae1), color-stop(#8aa7ec), color-stop(#79b3f4), color-stop(#69bff8), color-stop(#52cffe), color-stop(#41dfff), color-stop(#46eefa), to(#5ffbf1));
    background-image: linear-gradient(to right top, #c471ed, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-size: 200%;
    -webkit-animation: gradient 1.5s linear infinite alternate;
            animation: gradient 1.5s linear infinite alternate;
  }
  main span {
    background: -webkit-gradient(linear, left top, right top, from(#12c2e9), color-stop(#c471ed), to(#f64f59));
    background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-size: 200%;
    -webkit-animation: gradient 1.5s linear infinite alternate;
            animation: gradient 1.5s linear infinite alternate;
  }
  header > a {
    background: -webkit-gradient(linear, left top, right top, from(#12c2e9), color-stop(#c471ed), to(#f64f59));
    background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-size: 200%;
    -webkit-animation: gradient 1.5s linear infinite alternate;
            animation: gradient 1.5s linear infinite alternate;
  }
  footer > p {
    background: -webkit-gradient(linear, left top, right top, from(#db4437), color-stop(#36d1dc), color-stop(#5b86e5), to(#e1306c));
    background: linear-gradient(to right, #db4437, #36d1dc, #5b86e5, #e1306c);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-size: 200%;
    -webkit-animation: gradient 1.5s infinite linear alternate;
            animation: gradient 1.5s infinite linear alternate;
  }
  footer .social-links {
    width: 65vw;
  }
  footer .social-links .fas.gmail,
  footer .social-links .fab.gmail {
    color: #db4437;
    -webkit-animation: blink 2s infinite alternate linear;
            animation: blink 2s infinite alternate linear;
  }
  footer .social-links .fas.twitter,
  footer .social-links .fab.twitter {
    color: #00acee;
    -webkit-animation: blink 2s infinite alternate linear;
            animation: blink 2s infinite alternate linear;
  }
  footer .social-links .fas.instagram,
  footer .social-links .fab.instagram {
    color: #e1306c;
    -webkit-animation: blink 2s infinite alternate linear;
            animation: blink 2s infinite alternate linear;
  }
  footer .social-links .fas.github,
  footer .social-links .fab.github {
    color: #c0c0c0;
    -webkit-animation: blink 2s infinite alternate linear;
            animation: blink 2s infinite alternate linear;
  }
}

@-webkit-keyframes gradient {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}

@keyframes gradient {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}

@-webkit-keyframes blink {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blink {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}