* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  width: 100%;
}

a {
  text-decoration: none;
}

body {
  background-image: url("../img/dark_wall.png");
  background-repeat: repeat;
  -webkit-box-shadow: inset 0 0 85px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: inset 0 0 85px rgba(0, 0, 0, 0.7);
  box-shadow: inset 0 0 85px rgba(0, 0, 0, 0.7);
}

.wrapper {
  width: 1000px;
  position: relative;
  margin: auto;
}

.wf-loading * {
  opacity: 0;
}

h1 {
  position: absolute;
  left: 65px;
  font-family: "Monoton", sans-serif;
  font-size: 111px;
  font-weight: 200;
  color: white;
  -webkit-animation: pink-glow 2s ease-in-out infinite alternate;
  -moz-animation: pink-glow 2s ease-in-out infinite alternate;
  -o-animation: pink-glow 2s ease-in-out infinite alternate;
  animation: pink-glow 2s ease-in-out infinite alternate;
}

.emma {
  top: 120px;
}

.zhou {
  top: 250px;
}

.heart {
  top: 120px;
  left: 815px;
}

.bio {
  position: absolute;
  top: 340px;
  left: 515px;
  width: 400px;
  padding: 40px 20px;
  font-family: "Anonymous Pro", monospace;
  font-size: 18px;
  font-weight: bold;
  background-image: url("../img/clouds.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: black;
  text-shadow: 0 0 2px black;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 125px lightpink;
  -moz-box-shadow: inset 0 0 125px lightpink;
  box-shadow: inset 0 0 125px lightpink;
  -webkit-filter: brightness(1.2) contrast(1.1) drop-shadow(0 0 3px #ffe9ec);
  filter: brightness(1.2) contrast(1.1) drop-shadow(0 0 3px #ffe9ec);
}

.bio p {
  margin-top: 20px;
}

.bio p span {
  display: inline-block;
  background-color: white;
  padding: 3px 5px;
  opacity: 0.7;
  -webkit-box-shadow: inset 0 0 45px lightpink;
  -moz-box-shadow: inset 0 0 45px lightpink;
  box-shadow: inset 0 0 45px lightpink;
  -webkit-filter: drop-shadow(0 0 3px white);
  filter: drop-shadow(0 0 3px white);
}

.bio p:first-child {
  margin-top: 0;
}

.bio p:nth-child(2) span:first-child {
  margin-left: 40px;
  -webkit-animation: flicker1 13s linear infinite;
  -moz-animation: flicker1 13s linear infinite;
  -o-animation: flicker1 13s linear infinite;
  animation: flicker1 13s linear infinite;
}

.bio p:nth-child(3) span:nth-child(2) {
  margin-left: 20px;
}

.bio p:nth-child(3) span:last-child {
  margin-left: 220px;
  -webkit-animation: flicker2 10s linear infinite;
  -moz-animation: flicker2 10s linear infinite;
  -o-animation: flicker2 10s linear infinite;
  animation: flicker2 10s linear infinite;
}

.bio p:nth-child(4) span:nth-child(3) {
  margin-left: 40px;
}

.bio p:last-child span:first-child {
  margin-left: 20px;
}

.bio p:last-child span:last-child {
  margin-left: 80px;
  -webkit-animation: flicker1 11s linear infinite;
  -moz-animation: flicker1 11s linear infinite;
  -o-animation: flicker1 11s linear infinite;
  animation: flicker1 11s linear infinite;
}

.bio p a {
  color: black;
  text-decoration: none;
}

.profile-pic {
  position: absolute;
  background-color: #333;
  top: 90px;
  left: 565px;
  border: none;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  width: 200px;
  height: 200px;
  overflow: hidden;
  cursor: pointer;
  -webkit-filter: drop-shadow(0 0 3px #333) drop-shadow(0 0 10px #333);
  filter: drop-shadow(0 0 3px #333) drop-shadow(0 0 10px #333);
}

.profile-pic div {
  background-image: url("../img/fb.jpeg");
  -webkit-filter: brightness(1.5) contrast(1.2) hue-rotate(-20deg);
  filter: brightness(1.5) contrast(1.2) hue-rotate(-20deg);
  -webkit-box-shadow: inset 0 0 10px #333, inset 0 0 30px #333,
    inset 0 0 50px #333;
  -moz-box-shadow: inset 0 0 10px #333, inset 0 0 30px #333, inset 0 0 50px #333;
  box-shadow: inset 0 0 10px #333, inset 0 0 30px #333, inset 0 0 50px #333;
}

.code {
  position: absolute;
  background-color: #444;
  color: white;
  font-family: "Anonymous Pro", monospace;
  font-size: 20px;
  padding: 20px;
  width: 400px;
  left: 25px;
  top: 440px;
  -webkit-box-shadow: inset 0 0 20px #222, inset 0 0 40px #222,
    inset 0 0 60px #333;
  -moz-box-shadow: inset 0 0 20px #222, inset 0 0 40px #222, inset 0 0 60px #333;
  box-shadow: inset 0 0 20px #222, inset 0 0 40px #222, inset 0 0 60px #333;
  text-shadow: 0 0 8px white, 2px 0 4px #1177ff, -2px 0 4px #ff1177;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.code p .command {
  position: absolute;
  width: 8ch;
  white-space: nowrap;
  overflow: hidden;
  -webkit-animation: typing 6s steps(8, end) infinite alternate;
  -moz-animation: typing 6s steps(8, end) infinite alternate;
  -o-animation: typing 6s steps(8, end) infinite alternate;
  animation: typing 6s steps(8, end) infinite alternate;
}

.code p .caret {
  position: absolute;
  display: inline;
  height: 20px;
  width: 2px;
  background-color: white;
  -webkit-box-shadow: 0 0 8px white, 1px 0 2px #1177ff, -1px 0 2px #ff1177;
  -moz-box-shadow: 0 0 8px white, 1px 0 2px #1177ff, -1px 0 2px #ff1177;
  box-shadow: 0 0 8px white, 1px 0 2px #1177ff, -1px 0 2px #ff1177;
  -webkit-animation: blink-caret 0.5s step-end infinite alternate,
    typing-caret 6s steps(8, end) infinite alternate;
  -moz-animation: blink-caret 0.5s step-end infinite alternate,
    typing-caret 6s steps(8, end) infinite alternate;
  -o-animation: blink-caret 0.5s step-end infinite alternate,
    typing-caret 6s steps(8, end) infinite alternate;
  animation: blink-caret 0.5s step-end infinite alternate,
    typing-caret 6s steps(8, end) infinite alternate;
}

.code .pink {
  color: #ff1177;
  text-shadow: 0 0 8px #ff1177, 2px 0 4px #1177ff, -2px 0 4px #ff1177;
}

.readme {
  position: absolute;
  top: 570px;
  left: 85px;
  font-family: "Reenie Beanie", cursive;
  color: #eee;
  -webkit-animation: coral-glow 2s ease-in-out infinite alternate;
  -moz-animation: coral-glow 2s ease-in-out infinite alternate;
  -o-animation: coral-glow 2s ease-in-out infinite alternate;
  animation: coral-glow 2s ease-in-out infinite alternate;
}

.readme h3 {
  font-size: 60px;
}

.readme p {
  margin-left: 40px;
  font-size: 30px;
}

.social {
  position: absolute;
  top: 750px;
}

.social div {
  position: absolute;
}

.social div img {
  width: 100px;
}

.facebook {
  left: 440px;
}

.facebook img {
  -webkit-animation: white-glow 2s ease-in-out infinite alternate;
  -moz-animation: white-glow 2s ease-in-out infinite alternate;
  -o-animation: white-glow 2s ease-in-out infinite alternate;
  animation: white-glow 2s ease-in-out infinite alternate;
}

.twitter {
  left: 575px;
}

.twitter img {
  -webkit-animation: white-glow 2s ease-in-out infinite alternate;
  -moz-animation: white-glow 2s ease-in-out infinite alternate;
  -o-animation: white-glow 2s ease-in-out infinite alternate;
  animation: white-glow 2s ease-in-out infinite alternate;
}

.medium {
  left: 725px;
}

.medium img {
  -webkit-animation: white-glow 2s ease-in-out infinite alternate;
  -moz-animation: white-glow 2s ease-in-out infinite alternate;
  -o-animation: white-glow 2s ease-in-out infinite alternate;
  animation: white-glow 2s ease-in-out infinite alternate;
}

.wordpress {
  left: 875px;
}

.wordpress img {
  -webkit-animation: white-glow 2s ease-in-out infinite alternate;
  -moz-animation: white-glow 2s ease-in-out infinite alternate;
  -o-animation: white-glow 2s ease-in-out infinite alternate;
  animation: white-glow 2s ease-in-out infinite alternate;
}

.spacer {
  position: absolute;
  top: 960px;
  height: 1px;
  width: 1px;
}

@-webkit-keyframes pink-glow {
  from {
    -webkit-filter: drop-shadow(0 0 5px white) drop-shadow(0 0 15px #ffe9ec)
      drop-shadow(0 0 15px #ff1177) drop-shadow(0 0 35px #ff1177);
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 15px #ffe9ec)
      drop-shadow(0 0 15px #ff1177) drop-shadow(0 0 35px #ff1177);
  }
  to {
    -webkit-filter: drop-shadow(0 0 5px white) drop-shadow(0 0 10px lightpink)
      drop-shadow(0 0 10px #ff1177) drop-shadow(0 0 25px #ff1177);
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 10px lightpink)
      drop-shadow(0 0 10px #ff1177) drop-shadow(0 0 25px #ff1177);
  }
}

@-moz-keyframes pink-glow {
  from {
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 15px #ffe9ec)
      drop-shadow(0 0 15px #ff1177) drop-shadow(0 0 35px #ff1177);
  }
  to {
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 10px lightpink)
      drop-shadow(0 0 10px #ff1177) drop-shadow(0 0 25px #ff1177);
  }
}

@-o-keyframes pink-glow {
  from {
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 15px #ffe9ec)
      drop-shadow(0 0 15px #ff1177) drop-shadow(0 0 35px #ff1177);
  }
  to {
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 10px lightpink)
      drop-shadow(0 0 10px #ff1177) drop-shadow(0 0 25px #ff1177);
  }
}

@keyframes pink-glow {
  from {
    -webkit-filter: drop-shadow(0 0 5px white) drop-shadow(0 0 15px #ffe9ec)
      drop-shadow(0 0 15px #ff1177) drop-shadow(0 0 35px #ff1177);
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 15px #ffe9ec)
      drop-shadow(0 0 15px #ff1177) drop-shadow(0 0 35px #ff1177);
  }
  to {
    -webkit-filter: drop-shadow(0 0 5px white) drop-shadow(0 0 10px lightpink)
      drop-shadow(0 0 10px #ff1177) drop-shadow(0 0 25px #ff1177);
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 10px lightpink)
      drop-shadow(0 0 10px #ff1177) drop-shadow(0 0 25px #ff1177);
  }
}

@-webkit-keyframes coral-glow {
  from {
    -webkit-filter: drop-shadow(0 0 5px white) drop-shadow(0 0 15px lightcoral)
      drop-shadow(0 0 30px lightcoral);
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 15px lightcoral)
      drop-shadow(0 0 30px lightcoral);
  }
  to {
    -webkit-filter: drop-shadow(0 0 5px white) drop-shadow(0 0 10px lightcoral)
      drop-shadow(0 0 20px lightcoral);
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 10px lightcoral)
      drop-shadow(0 0 20px lightcoral);
  }
}

@-moz-keyframes coral-glow {
  from {
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 15px lightcoral)
      drop-shadow(0 0 30px lightcoral);
  }
  to {
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 10px lightcoral)
      drop-shadow(0 0 20px lightcoral);
  }
}

@-o-keyframes coral-glow {
  from {
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 15px lightcoral)
      drop-shadow(0 0 30px lightcoral);
  }
  to {
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 10px lightcoral)
      drop-shadow(0 0 20px lightcoral);
  }
}

@keyframes coral-glow {
  from {
    -webkit-filter: drop-shadow(0 0 5px white) drop-shadow(0 0 15px lightcoral)
      drop-shadow(0 0 30px lightcoral);
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 15px lightcoral)
      drop-shadow(0 0 30px lightcoral);
  }
  to {
    -webkit-filter: drop-shadow(0 0 5px white) drop-shadow(0 0 10px lightcoral)
      drop-shadow(0 0 20px lightcoral);
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 10px lightcoral)
      drop-shadow(0 0 20px lightcoral);
  }
}

@-webkit-keyframes white-glow {
  from {
    -webkit-filter: drop-shadow(0 0 5px white) drop-shadow(0 0 15px #ccc)
      drop-shadow(0 0 15px #777) drop-shadow(0 0 30px #777);
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 15px #ccc)
      drop-shadow(0 0 15px #777) drop-shadow(0 0 30px #777);
  }
  to {
    -webkit-filter: drop-shadow(0 0 5px white) drop-shadow(0 0 10px #aaa)
      drop-shadow(0 0 10px #777) drop-shadow(0 0 20px #777);
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 10px #aaa)
      drop-shadow(0 0 10px #777) drop-shadow(0 0 20px #777);
  }
}

@-moz-keyframes white-glow {
  from {
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 15px #ccc)
      drop-shadow(0 0 15px #777) drop-shadow(0 0 30px #777);
  }
  to {
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 10px #aaa)
      drop-shadow(0 0 10px #777) drop-shadow(0 0 20px #777);
  }
}

@-o-keyframes white-glow {
  from {
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 15px #ccc)
      drop-shadow(0 0 15px #777) drop-shadow(0 0 30px #777);
  }
  to {
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 10px #aaa)
      drop-shadow(0 0 10px #777) drop-shadow(0 0 20px #777);
  }
}

@keyframes white-glow {
  from {
    -webkit-filter: drop-shadow(0 0 5px white) drop-shadow(0 0 15px #ccc)
      drop-shadow(0 0 15px #777) drop-shadow(0 0 30px #777);
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 15px #ccc)
      drop-shadow(0 0 15px #777) drop-shadow(0 0 30px #777);
  }
  to {
    -webkit-filter: drop-shadow(0 0 5px white) drop-shadow(0 0 10px #aaa)
      drop-shadow(0 0 10px #777) drop-shadow(0 0 20px #777);
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 10px #aaa)
      drop-shadow(0 0 10px #777) drop-shadow(0 0 20px #777);
  }
}

@-webkit-keyframes flicker1 {
  0%,
  19.999%,
  22%,
  62.999%,
  64%,
  64.999%,
  70%,
  100% {
    font-style: normal;
  }
  20%,
  21.999%,
  63%,
  63.999%,
  65%,
  69.999% {
    font-style: italic;
  }
}

@-moz-keyframes flicker1 {
  0%,
  19.999%,
  22%,
  62.999%,
  64%,
  64.999%,
  70%,
  100% {
    font-style: normal;
  }
  20%,
  21.999%,
  63%,
  63.999%,
  65%,
  69.999% {
    font-style: italic;
  }
}

@-o-keyframes flicker1 {
  0%,
  19.999%,
  22%,
  62.999%,
  64%,
  64.999%,
  70%,
  100% {
    font-style: normal;
  }
  20%,
  21.999%,
  63%,
  63.999%,
  65%,
  69.999% {
    font-style: italic;
  }
}

@keyframes flicker1 {
  0%,
  19.999%,
  22%,
  62.999%,
  64%,
  64.999%,
  70%,
  100% {
    font-style: normal;
  }
  20%,
  21.999%,
  63%,
  63.999%,
  65%,
  69.999% {
    font-style: italic;
  }
}

@-webkit-keyframes flicker2 {
  0%,
  12%,
  18.999%,
  23%,
  31.999%,
  33%,
  44.999%,
  46%,
  68.999%,
  71%,
  85.999%,
  90%,
  100% {
    font-style: normal;
  }
  19%,
  22.99%,
  32%,
  32.999%,
  45%,
  45.999%,
  69%,
  70.999%,
  86%,
  89.999% {
    font-style: italic;
  }
}

@-moz-keyframes flicker2 {
  0%,
  12%,
  18.999%,
  23%,
  31.999%,
  33%,
  44.999%,
  46%,
  68.999%,
  71%,
  85.999%,
  90%,
  100% {
    font-style: normal;
  }
  19%,
  22.99%,
  32%,
  32.999%,
  45%,
  45.999%,
  69%,
  70.999%,
  86%,
  89.999% {
    font-style: italic;
  }
}

@-o-keyframes flicker2 {
  0%,
  12%,
  18.999%,
  23%,
  31.999%,
  33%,
  44.999%,
  46%,
  68.999%,
  71%,
  85.999%,
  90%,
  100% {
    font-style: normal;
  }
  19%,
  22.99%,
  32%,
  32.999%,
  45%,
  45.999%,
  69%,
  70.999%,
  86%,
  89.999% {
    font-style: italic;
  }
}

@keyframes flicker2 {
  0%,
  12%,
  18.999%,
  23%,
  31.999%,
  33%,
  44.999%,
  46%,
  68.999%,
  71%,
  85.999%,
  90%,
  100% {
    font-style: normal;
  }
  19%,
  22.99%,
  32%,
  32.999%,
  45%,
  45.999%,
  69%,
  70.999%,
  86%,
  89.999% {
    font-style: italic;
  }
}

@-webkit-keyframes typing {
  0%,
  30% {
    width: 0;
  }
  45%,
  100% {
    width: 8ch;
  }
}

@-moz-keyframes typing {
  0%,
  30% {
    width: 0;
  }
  45%,
  100% {
    width: 8ch;
  }
}

@-o-keyframes typing {
  0%,
  30% {
    width: 0;
  }
  45%,
  100% {
    width: 8ch;
  }
}

@keyframes typing {
  0%,
  30% {
    width: 0;
  }
  45%,
  100% {
    width: 8ch;
  }
}

@-webkit-keyframes typing-caret {
  0%,
  30% {
    margin-left: 0;
  }
  45%,
  100% {
    margin-left: 8ch;
  }
}

@-moz-keyframes typing-caret {
  0%,
  30% {
    margin-left: 0;
  }
  45%,
  100% {
    margin-left: 8ch;
  }
}

@-o-keyframes typing-caret {
  0%,
  30% {
    margin-left: 0;
  }
  45%,
  100% {
    margin-left: 8ch;
  }
}

@keyframes typing-caret {
  0%,
  30% {
    margin-left: 0;
  }
  45%,
  100% {
    margin-left: 8ch;
  }
}

@-webkit-keyframes blink-caret {
  50% {
    opacity: 0;
  }
}

@-moz-keyframes blink-caret {
  50% {
    opacity: 0;
  }
}

@-o-keyframes blink-caret {
  50% {
    opacity: 0;
  }
}

@keyframes blink-caret {
  50% {
    opacity: 0;
  }
}

@media (max-width: 1000px) {
  body {
    padding-top: 200px;
  }

  .wrapper {
    width: 600px;
  }

  h1,
  .readme {
    position: static;
    text-align: center;
  }

  .zhou {
    margin-top: -40px;
  }

  .heart,
  .profile-pic {
    display: none;
  }

  .readme h3 {
    font-size: 50px;
  }

  .bio,
  .code,
  .readme,
  .social {
    position: static;
    margin: 0 auto;
  }

  .bio {
    margin-top: 20px;
  }

  .code,
  .readme {
    margin-top: 50px;
  }

  .social {
    position: static;
    text-align: center;
    margin-top: 80px;
    padding-bottom: 200px;
  }

  .social div {
    position: relative;
    left: 0;
    display: inline;
  }

  .medium,
  .wordpress {
    margin-left: 15px;
  }
}