@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro:300,400,500");
html,
body {
  height: 100%;
  font-family: 'Source Code Pro', monospace;
  font-size: 14px;
}

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

mark {
  background: transparent;
  color: rgba(20, 230, 255, 0.99);
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}

.icon {
  width: 54px;
  height: 54px;
  background-repeat: no-repeat;
}

.title {
  font-size: 2.5rem;
  text-transform: uppercase;
  letter-spacing: 24px;
  border-bottom: solid 3px;
  padding-bottom: 1.5rem;
}
.title span {
  letter-spacing: 0.7px;
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 100vh;
  background: #252423;
  color: #ffffff;
}

.logo {
  position: absolute;
  top: 8.9%;
  left: 6%;
  background-image: url("../images/logo.png");
  background-color: #fff;
}

.resume {
  position: absolute;
  top: 12.1%;
  right: 4.8%;
  letter-spacing: 9px;
}

.introduction {
  font-size: 18px;
  line-height: 1.67;
  letter-spacing: 0.7px;
  padding-left: 5%;
  padding-right: 5%;
}

.line {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

.line-number {
  width: 14px;
  margin-right: 1.5rem;
  opacity: 0.33;
}

.line-content,
.line-content mark {
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 4px;
  opacity: 85%;
}
.line-content mark {
  letter-spacing: 6px;
}

.empty-line {
  background: linear-gradient(to bottom, #252423, #252525);
}
.empty-line .line-number {
  display: block;
}
.empty-line .line-number-a {
  opacity: 0.15;
}
.empty-line .line-number-b {
  opacity: 0.1;
}
.empty-line .line-number-c {
  opacity: 0.05;
}
.empty-line .line-number-d {
  opacity: 0.04;
}

.skills {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  padding-top: 15%;
}
.skills .title {
  display: inline;
}
.skills .content {
  margin-top: 20%;
}
.skills .row {
  flex-direction: column;
}
.skills .item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 8rem;
  text-align: center;
}
.skills .icon {
  margin-bottom: 1.5rem;
}
.skills .caption {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.33;
  letter-spacing: 6px;
}
.skills em {
  display: block;
  font-weight: 500;
}

.icon-1 {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2254px%22%20height%3D%2254px%22%20viewBox%3D%220%200%2054%2054%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2044.1%20%2841455%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eicon-javascript%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Crect%20id%3D%22path-1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2254%22%20height%3D%2254%22%3E%3C/rect%3E%0A%20%20%20%20%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Liulian-Copy-11%22%20transform%3D%22translate%28-421.000000%2C%20-667.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22icon-javascript%22%20transform%3D%22translate%28421.000000%2C%20667.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-2%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-1%22%3E%3C/use%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/mask%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Rectangle-8-Copy%22%20fill%3D%22%232259C8%22%20xlink%3Ahref%3D%22%23path-1%22%3E%3C/use%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-8-Copy%22%20fill%3D%22%232D8EFF%22%20mask%3D%22url%28%23mask-2%29%22%20x%3D%2228%22%20y%3D%2228%22%20width%3D%2226%22%20height%3D%2226%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22Rectangle-8-Copy%22%20fill%3D%22%23579AE9%22%20mask%3D%22url%28%23mask-2%29%22%20transform%3D%22translate%2827.064479%2C%2027.043159%29%20rotate%28-180.000000%29%20translate%28-27.064479%2C%20-27.043159%29%20%22%20points%3D%2254.1289579%20-7.10542736e-15%2054.1289579%2054.0863176%20-2.06057393e-13%2054.0863176%22%3E%3C/polygon%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ccircle%20id%3D%22Oval-2%22%20fill%3D%22%233F76E5%22%20mask%3D%22url%28%23mask-2%29%22%20cx%3D%2227%22%20cy%3D%220%22%20r%3D%2227%22%3E%3C/circle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E");
}

.icon-2 {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2254px%22%20height%3D%2254px%22%20viewBox%3D%220%200%2054%2054%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2044.1%20%2841455%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eicon-css%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Crect%20id%3D%22path-1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2254%22%20height%3D%2254%22%3E%3C/rect%3E%0A%20%20%20%20%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Liulian-Copy-11%22%20transform%3D%22translate%28-649.000000%2C%20-668.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22icon-css%22%20transform%3D%22translate%28649.000000%2C%20668.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-2%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-1%22%3E%3C/use%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/mask%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Rectangle-8-Copy%22%20fill%3D%22%2314DCAF%22%20xlink%3Ahref%3D%22%23path-1%22%3E%3C/use%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-8-Copy%22%20fill%3D%22%238EF1B9%22%20mask%3D%22url%28%23mask-2%29%22%20x%3D%2213%22%20y%3D%2227%22%20width%3D%2214%22%20height%3D%2214%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-8-Copy%22%20fill%3D%22%230CC393%22%20mask%3D%22url%28%23mask-2%29%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2227%22%20height%3D%2227%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-8-Copy-2%22%20fill%3D%22%23A0FFD1%22%20mask%3D%22url%28%23mask-2%29%22%20x%3D%2241%22%20y%3D%2227%22%20width%3D%2214%22%20height%3D%2214%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-8-Copy-2%22%20fill%3D%22%2319AC8B%22%20mask%3D%22url%28%23mask-2%29%22%20x%3D%2227%22%20y%3D%2241%22%20width%3D%2214%22%20height%3D%2214%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E");
}

.icon-3 {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2254px%22%20height%3D%2254px%22%20viewBox%3D%220%200%2054%2054%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2044.1%20%2841455%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eicon-frontend%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Crect%20id%3D%22path-1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2254%22%20height%3D%2254%22%3E%3C/rect%3E%0A%20%20%20%20%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Liulian-Copy-11%22%20transform%3D%22translate%28-876.000000%2C%20-665.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22icon-frontend%22%20transform%3D%22translate%28876.000000%2C%20665.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-2%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-1%22%3E%3C/use%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/mask%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Rectangle-8-Copy%22%20fill%3D%22%23FFC778%22%20xlink%3Ahref%3D%22%23path-1%22%3E%3C/use%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-8-Copy%22%20fill%3D%22%23FFE377%22%20mask%3D%22url%28%23mask-2%29%22%20x%3D%22-1%22%20y%3D%22-1%22%20width%3D%2235%22%20height%3D%2256%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-8-Copy-10%22%20fill%3D%22%23FFEB9F%22%20mask%3D%22url%28%23mask-2%29%22%20x%3D%2234%22%20y%3D%220%22%20width%3D%2220%22%20height%3D%2215%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E");
}

.icon-4 {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2254px%22%20height%3D%2254px%22%20viewBox%3D%220%200%2054%2054%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2044.1%20%2841455%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eicon-server%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Crect%20id%3D%22path-1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2254%22%20height%3D%2254%22%3E%3C/rect%3E%0A%20%20%20%20%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Liulian-Copy-11%22%20transform%3D%22translate%28-423.000000%2C%20-898.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22icon-server%22%20transform%3D%22translate%28423.000000%2C%20898.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-2%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-1%22%3E%3C/use%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/mask%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Rectangle-8-Copy%22%20fill%3D%22%23A256E4%22%20xlink%3Ahref%3D%22%23path-1%22%3E%3C/use%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-8-Copy-10%22%20fill%3D%22%23BE7DF7%22%20mask%3D%22url%28%23mask-2%29%22%20x%3D%22-1%22%20y%3D%22-1%22%20width%3D%2256%22%20height%3D%2229%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-10%22%20fill%3D%22%23974CD9%22%20mask%3D%22url%28%23mask-2%29%22%20x%3D%229%22%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-10-Copy%22%20fill%3D%22%23D488EB%22%20mask%3D%22url%28%23mask-2%29%22%20x%3D%229%22%20y%3D%2236%22%20width%3D%2210%22%20height%3D%2210%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E");
}

.icon-5 {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2254px%22%20height%3D%2254px%22%20viewBox%3D%220%200%2054%2054%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2044.1%20%2841455%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eicon-responsive%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Crect%20id%3D%22path-1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2254%22%20height%3D%2254%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%3Crect%20id%3D%22path-3%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2236%22%20height%3D%2254%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%3Crect%20id%3D%22path-5%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2217%22%20height%3D%2254%22%3E%3C/rect%3E%0A%20%20%20%20%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Liulian-Copy-11%22%20transform%3D%22translate%28-651.000000%2C%20-898.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22icon-responsive%22%20transform%3D%22translate%28651.000000%2C%20898.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-2%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-1%22%3E%3C/use%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/mask%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Rectangle-8-Copy%22%20fill%3D%22%23D74949%22%20xlink%3Ahref%3D%22%23path-1%22%3E%3C/use%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-4%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-3%22%3E%3C/use%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/mask%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Rectangle-8-Copy%22%20fill%3D%22%23FC887D%22%20xlink%3Ahref%3D%22%23path-3%22%3E%3C/use%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-6%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-5%22%3E%3C/use%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/mask%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Rectangle-8-Copy-3%22%20fill%3D%22%23FC6161%22%20xlink%3Ahref%3D%22%23path-5%22%3E%3C/use%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E");
}

.icon-6 {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2254px%22%20height%3D%2254px%22%20viewBox%3D%220%200%2054%2054%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2044.1%20%2841455%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eicon-restful%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Crect%20id%3D%22path-1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2254%22%20height%3D%2254%22%3E%3C/rect%3E%0A%20%20%20%20%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Liulian-Copy-11%22%20transform%3D%22translate%28-878.000000%2C%20-898.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22icon-restful%22%20transform%3D%22translate%28878.000000%2C%20898.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-2%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-1%22%3E%3C/use%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/mask%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Rectangle-8-Copy%22%20fill%3D%22%2358E0D2%22%20xlink%3Ahref%3D%22%23path-1%22%3E%3C/use%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-8-Copy-11%22%20fill%3D%22%232DB6B7%22%20mask%3D%22url%28%23mask-2%29%22%20x%3D%2211%22%20y%3D%2211%22%20width%3D%2231%22%20height%3D%2231%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-8-Copy-11%22%20fill%3D%22%2364DBDB%22%20mask%3D%22url%28%23mask-2%29%22%20x%3D%2221%22%20y%3D%2221%22%20width%3D%2211%22%20height%3D%2211%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E");
}

.icon-7 {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2254px%22%20height%3D%2254px%22%20viewBox%3D%220%200%2054%2054%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2044.1%20%2841455%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eicon-git%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Crect%20id%3D%22path-1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2254%22%20height%3D%2254%22%3E%3C/rect%3E%0A%20%20%20%20%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Liulian-Copy-11%22%20transform%3D%22translate%28-419.000000%2C%20-1145.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22icon-git%22%20transform%3D%22translate%28419.000000%2C%201145.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-2%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-1%22%3E%3C/use%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/mask%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Rectangle-8-Copy%22%20fill%3D%22%2344BF79%22%20xlink%3Ahref%3D%22%23path-1%22%3E%3C/use%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22Rectangle-8-Copy%22%20fill%3D%22%23B8E986%22%20mask%3D%22url%28%23mask-2%29%22%20points%3D%2254%200.211128682%2054%2027%200%2027%22%3E%3C/polygon%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22Rectangle-8-Copy%22%20fill%3D%22%236FD49A%22%20mask%3D%22url%28%23mask-2%29%22%20transform%3D%22translate%2827.000000%2C%2040.399864%29%20scale%281%2C%20-1%29%20translate%28-27.000000%2C%20-40.399864%29%20%22%20points%3D%2254%2026.7531365%2054%2054.046591%200%2054.046591%22%3E%3C/polygon%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E");
}

.icon-8 {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2254px%22%20height%3D%2254px%22%20viewBox%3D%220%200%2054%2054%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2044.1%20%2841455%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eicon-automation%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Crect%20id%3D%22path-1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2254%22%20height%3D%2254%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%3Crect%20id%3D%22path-3%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2254%22%20height%3D%2227%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%3Crect%20id%3D%22path-5%22%20x%3D%228%22%20y%3D%228%22%20width%3D%2237%22%20height%3D%2237%22%3E%3C/rect%3E%0A%20%20%20%20%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Liulian-Copy-11%22%20transform%3D%22translate%28-646.000000%2C%20-1145.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22icon-automation%22%20transform%3D%22translate%28646.000000%2C%201145.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-2%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-1%22%3E%3C/use%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/mask%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Rectangle-8-Copy%22%20fill%3D%22%23E1755A%22%20xlink%3Ahref%3D%22%23path-1%22%3E%3C/use%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-4%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-3%22%3E%3C/use%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/mask%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Rectangle-8-Copy%22%20fill%3D%22%23FEAF8A%22%20xlink%3Ahref%3D%22%23path-3%22%3E%3C/use%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-6%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-5%22%3E%3C/use%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/mask%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Rectangle-8-Copy%22%20fill%3D%22%23FDCA9F%22%20transform%3D%22translate%2826.500000%2C%2026.500000%29%20rotate%28-315.000000%29%20translate%28-26.500000%2C%20-26.500000%29%20%22%20xlink%3Ahref%3D%22%23path-5%22%3E%3C/use%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E");
}

.icon-9 {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2256px%22%20height%3D%2256px%22%20viewBox%3D%220%200%2056%2056%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2044.1%20%2841455%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eicon-noSQL%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Liulian-Copy-11%22%20transform%3D%22translate%28-872.000000%2C%20-1145.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22icon-noSQL%22%20transform%3D%22translate%28872.000000%2C%201145.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-8-Copy-10%22%20fill%3D%22%234F5CD9%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2256%22%20height%3D%2237%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-8-Copy-12%22%20fill%3D%22%236876FC%22%20x%3D%220%22%20y%3D%2218%22%20width%3D%2256%22%20height%3D%2238%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-8-Copy-11%22%20fill%3D%22%23FFFFFF%22%20style%3D%22mix-blend-mode%3A%20soft-light%3B%22%20x%3D%220%22%20y%3D%2218%22%20width%3D%2256%22%20height%3D%2219%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E");
}

.footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #252423;
  padding-top: 13rem;
  padding-bottom: 4rem;
}

.contact {
  position: relative;
  width: 100%;
  background-color: #353535;
}
.contact .title {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  top: -1.5rem;
  color: #ffffff;
  border-bottom-color: #ffffff;
  border-bottom: solid 3px #ffffff;
}
.contact .content .icon {
  width: 37px;
  height: 37px;
  margin-bottom: 1.5rem;
}

.link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 300;
  text-transform: capitalize;
  letter-spacing: 6px;
  padding-top: 6.5rem;
  padding-bottom: 3.5rem;
  background-repeat: no-repeat;
}

.email > .icon {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2237px%22%20height%3D%2237px%22%20viewBox%3D%220%200%2037%2037%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2044.1%20%2841455%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eicon-email%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Liulian-Copy-11%22%20transform%3D%22translate%28-431.000000%2C%20-1691.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22icon-email%22%20transform%3D%22translate%28431.000000%2C%201691.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group-5%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-8-Copy-6%22%20fill%3D%22%23C1C7CE%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2237%22%20height%3D%2237%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22Rectangle-8-Copy-6%22%20fill%3D%22%23FFFFFF%22%20points%3D%220%200%2037%200%2018.2247799%2015.8571429%22%3E%3C/polygon%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E");
}

.github > .icon {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2237px%22%20height%3D%2237px%22%20viewBox%3D%220%200%2037%2037%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2044.1%20%2841455%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eicon-git%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Liulian-Copy-11%22%20transform%3D%22translate%28-937.000000%2C%20-1691.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22icon-git%22%20transform%3D%22translate%28937.000000%2C%201691.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-8-Copy-5%22%20fill%3D%22%23201D1C%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2237%22%20height%3D%2237%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M23%2C26.1173317%20C26.5130141%2C25.0742401%2028.9331626%2C22.7676269%2028.9986379%2C19%20L29%2C19%20L29%2C6%20L23.3295315%2C11.6704685%20C21.7506831%2C11.1554115%2019.9336043%2C10.9074074%2018%2C10.9074074%20C16.0663957%2C10.9074074%2014.2493169%2C11.1554115%2012.6704685%2C11.6704685%20L7%2C6%20L7%2C19%20L7.00136211%2C19%20C7.07288259%2C23.1154831%209.95395127%2C25.4877142%2014%2C26.3740934%20L14%2C37%20L23%2C37%20L23%2C26.1173317%20Z%22%20id%3D%22Combined-Shape%22%20fill%3D%22%23FFFFFF%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E");
}

.linkedin > .icon {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2237px%22%20height%3D%2237px%22%20viewBox%3D%220%200%2037%2037%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2044.1%20%2841455%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eicon-linkedin%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Liulian-Copy-11%22%20transform%3D%22translate%28-600.000000%2C%20-1691.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22icon-linkedin%22%20transform%3D%22translate%28600.000000%2C%201691.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-8-Copy%22%20fill%3D%22%234087C9%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2237%22%20height%3D%2237%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-3%22%20fill%3D%22%23FFFFFF%22%20x%3D%227.53703704%22%20y%3D%2213.0740741%22%20width%3D%224.7962963%22%20height%3D%2212.3333333%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-4%22%20fill%3D%22%23FFFFFF%22%20x%3D%2218.5%22%20y%3D%2213.0740741%22%20width%3D%2211.6481481%22%20height%3D%2212.3333333%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E");
}

.twitter > .icon {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2237px%22%20height%3D%2237px%22%20viewBox%3D%220%200%2037%2037%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2044.1%20%2841455%29%20-%20http%3A//www.bohemiancoding.com/sketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eicon-twitter%3C/title%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C/desc%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Liulian-Copy-11%22%20transform%3D%22translate%28-768.000000%2C%20-1691.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22icon-twitter%22%20transform%3D%22translate%28768.000000%2C%201691.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-8-Copy-4%22%20fill%3D%22%23CDE5FF%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2237%22%20height%3D%2237%22%3E%3C/rect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M18.64%2C30.4%20L19.432%2C23.92%20L16.12%2C23.92%20L15.328%2C30.4%20L11.8%2C30.4%20L12.592%2C23.92%20L10%2C23.92%20L10%2C20.032%20L13.06%2C20.032%20L13.492%2C16.576%20L10.72%2C16.576%20L10.72%2C12.688%20L13.996%2C12.688%20L14.68%2C7%20L18.136%2C7%20L17.452%2C12.688%20L20.836%2C12.688%20L21.52%2C7%20L24.976%2C7%20L24.292%2C12.688%20L27.136%2C12.688%20L27.136%2C16.576%20L23.824%2C16.576%20L23.428%2C20.032%20L26.416%2C20.032%20L26.416%2C23.92%20L22.96%2C23.92%20L22.168%2C30.4%20L18.64%2C30.4%20Z%20M19.9%2C20.032%20L20.332%2C16.576%20L16.984%2C16.576%20L16.588%2C20.032%20L19.9%2C20.032%20Z%22%20id%3D%22%23%22%20fill%3D%22%235698E4%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E");
}

.copyright {
  color: #787878;
  letter-spacing: 4px;
  padding-top: 10rem;
}

@media all and (min-width: 750px) {
  .introduction {
    padding-left: 0;
    padding-right: 0;
    padding-top: 10%;
    padding-bottom: 10%;
  }

  .title {
    width: 290px;
  }

  .skills {
    flex-direction: row;
  }
  .skills .title {
    flex-grow: 1;
    align-self: flex-start;
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
  .skills .content {
    flex-grow: 2;
    margin-top: 0;
  }
  .skills .hack {
    flex-grow: 1;
    min-width: 5%;
  }
  .skills .row {
    flex-direction: row;
    align-items: baseline;
  }
  .skills .item {
    width: 30%;
    text-align: left;
    align-items: flex-start;
  }

  .contact .title {
    left: 17.5%;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  .contact .content {
    flex-direction: row;
  }
  .contact .link:not(:last-of-type) {
    margin-right: 5.5rem;
  }
}