article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, dialog {
  display: block; }

* {
  margin: 0;
  padding: 0;
  border: 0 none; }

ul {
  list-style: none; }

button, textarea, input {
  border: none;
  overflow: auto;
  outline: none;
  box-shadow: none; }

@font-face {
  font-family: "InputMono";
  src: url("../fonts/InputMono-Light.eot");
  src: url("../fonts/InputMono-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/InputMono-Light.woff") format("woff"), url("../fonts/InputMono-Light.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: "InputMono";
  src: url("../fonts/InputMono-Regular.eot");
  src: url("../fonts/InputMono-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/InputMono-Regular.woff") format("woff"), url("../fonts/InputMono-Regular.ttf") format("truetype");
  font-weight: 500;
  font-style: normal; }
body {
  font-family: InputMono, -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: normal;
  line-height: 2; }

h1, h2, h3, h4 {
  font-family: InputMono, -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: normal; }

body {
  font-size: 100%;
  vertical-align: baseline;
  color: #fff;
  background: #000;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-transition: background 0.25s ease-out;
  transition: background 0.25s ease-out;
  -webkit-transition: color 0.25s ease-out;
  transition: color 0.25s ease-out; }

a {
  cursor: pointer;
  color: #fff;
  white-space: nowrap;
  text-decoration: none;
  -webkit-transition: border 0.2s;
  transition: border 0.2s; }
  a:hover {
    color: #aa73ff; }
  a.link {
    display: inline-block; }

.center {
  text-align: center; }

.container {
  max-width: 800px;
  margin: 0 180px; }

header[role="banner"] {
  position: relative;
  margin-top: 164px; }
  header[role="banner"] h1 {
    font-weight: 500; }
  header[role="banner"] h1, header[role="banner"] p {
    margin-top: 32px;
    font-size: 20px; }
    header[role="banner"] h1 span, header[role="banner"] p span {
      display: block; }
  header[role="banner"] .logo {
    position: fixed;
    display: block;
    width: 172px;
    height: 116px;
    top: 120px;
    right: 120px;
    -webkit-mask: url(../images/logo-172x116.svg) no-repeat center center;
            mask: url(../images/logo-172x116.svg) no-repeat center center;
    background: #7724f8 -webkit-linear-gradient(left, #7724f8 1%, #aa73ff 50%, #aa73ff 51%, #7724f8 99%);
    background: #7724f8 linear-gradient(to right, #7724f8 1%, #aa73ff 50%, #aa73ff 51%, #7724f8 99%);
    background-size: 400% auto;
    -webkit-animation: spin 40s linear infinite;
            animation: spin 40s linear infinite; }
    header[role="banner"] .logo:hover {
      cursor: progress;
      background-color: #aa73ff; }

.content {
  margin: 80px 0 120px 0;
  background: #000 -webkit-linear-gradient(top, #fff, #222);
  background: #000 linear-gradient(top, #fff, #222);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent; }
  .content p, .content ul {
    margin: 40px 0;
    font-size: 20px; }
    .content p img, .content ul img {
      width: 100%; }
    .content p a, .content ul a {
      border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
      .content p a:hover, .content ul a:hover {
        background: #fff;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        border-color: #7724f8; }
      .content p a.link-mail span, .content ul a.link-mail span {
        font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, sans-serif; }

.about header[role="banner"] .logo {
  background: url(../images/itsme.jpg) repeat left center;
  background-size: normal; }

@media screen and (max-width: 1160px) {
  .container {
    margin-left: 120px;
    margin-right: 120px; }

  header[role="banner"] {
    margin-top: 112px; }
    header[role="banner"] .logo {
      top: 80px;
      right: 80px; }
    header[role="banner"] p {
      margin-top: 60px; }

  .content p,
  .content ul {
    margin: 60px 0; } }
@media screen and (max-width: 840px) {
  .container {
    margin-left: 80px;
    margin-right: 80px; }

  header[role="banner"] {
    margin-top: 80px; }
    header[role="banner"] .logo {
      position: relative;
      width: 86px;
      height: 58px;
      top: 0;
      right: 0;
      -webkit-mask: url(../images/logo.svg) no-repeat center center;
              mask: url(../images/logo.svg) no-repeat center center; }
    header[role="banner"] p {
      margin-top: 40px; }
    header[role="banner"] h1 {
      margin-top: 80px; }

  .content {
    margin-top: 56px; }
    .content p, .content ul {
      margin: 40px 0; } }
@media screen and (max-width: 660px) {
  .container {
    margin-left: 40px;
    margin-right: 40px; }

  header[role="banner"] {
    margin-top: 40px; }
    header[role="banner"] h1, header[role="banner"] p {
      margin-top: 32px;
      font-size: 16px; }

  .content {
    margin-top: 24px; }
    .content p:first-child {
      background: #000 -webkit-linear-gradient(top, #fff, #aaa);
      background: #000 linear-gradient(top, #fff, #aaa);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      text-fill-color: transparent; }
    .content p, .content ul {
      margin: 16px 0;
      font-size: 16px; }

  .about p:nth-child(2) {
    background: #000 -webkit-linear-gradient(top, #aaa, #888);
    background: #000 linear-gradient(top, #aaa, #888);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent; }
  .about p:nth-child(3) {
    background: #000 -webkit-linear-gradient(top, #888, #666);
    background: #000 linear-gradient(top, #888, #666);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent; } }
body.contrast {
  background: #7724f8;
  color: #fff; }
  body.contrast .logo {
    background: pink; }
  body.contrast .content {
    background: #000 -webkit-linear-gradient(#fff, #924ff9);
    background: #000 linear-gradient(#fff, #924ff9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent; }
    body.contrast .content p a:hover, body.contrast .content ul a:hover {
      background: pink;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent; }

@-webkit-keyframes spin {
  to {
    background-position: 200% center; } }
@keyframes spin {
  to {
    background-position: 200% center; } }