* { margin: 0; padding: 0; }

/*** Global ***/
:root {
  --scroll: 0;
}

body {
  background: #fff;
  color: #333;
  text-align: center;
  font: 62.5% helvetica,sans-serif;
}

.wrapper {
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
  padding: 1em 0;
  text-align: left;
}


.bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index:2;
  width: 100vw;
  height: 100vh;
  background-size: 100% 100%;
  background-blend-mode: multiply;
  background-image:
    linear-gradient(calc(var(--scroll) * -20deg +   10deg), magenta 10%, transparent 10%),
    linear-gradient(calc(var(--scroll) * -20deg +   70deg), magenta  5%, transparent  5%),
    linear-gradient(calc(var(--scroll) * -25deg + -120deg),    cyan 10%, transparent 10%),
    linear-gradient(calc(var(--scroll) * -25deg +  185deg),    cyan 10%, transparent 10%),
    linear-gradient(calc(var(--scroll) *  30deg + -100deg),  yellow  8%, transparent  8%),
    linear-gradient(calc(var(--scroll) *  35deg +  80deg),  yellow  8%, transparent  8%);
}

/*** Typography ***/
h1, h2 {
  padding: 1em 0 0;
  font-family: LeagueGothicRegular,Impact,Helvetica;
  font-size: 6.8em;
  text-transform: uppercase;
  position: relative;
  mix-blend-mode: multiply;
  color: cyan;
}
h1::before,
h1::after,
h2::before,
h2::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  padding: 1em 0;
  mix-blend-mode: multiply;
}
h1::after,
h2:after {
  color: magenta;
  animation: 6s steps(1, end) 1s infinite h1-after;
}
@keyframes h1-after {
     0%, 40% { margin-top: -1px;  margin-left: -1px; }
     45% { margin-top: 2px;  margin-left: -5px; }
    50% { margin-top: -4px;  margin-left: 6px; }
    55%, 100% { margin-top: -1px;  margin-left: 1px; }
}
h1::before,
h2::before {
  color: yellow;
  animation: 7s steps(1, end) 1s infinite h1-before;
}
@keyframes h1-before {
     0% { margin-top: 0px;  margin-left: 0px; }
     5% { margin-top: 6px;  margin-left: 6px; }
   10%, 100% { margin-top: -2px;  margin-left: -1px; }
}
h2 {
  font-size: 4em;
  margin: 0.5em 0 0.25em;
  padding: 0;
}
h2::before,
h2::after {
  padding: 0;
  animation-delay: .5s;
}
h2::after {
  animation-direction: alternate;
}
h3, h4, h5 {
  font-size: 3em;
  margin: 0.5em 0 0.25em;
}
h3, h4, h5 {
  font-size: 2.3em;
}
p {
  font-size: 1.8em;
  line-height: 1.6;
  margin-bottom: 1em;
}
ol, ul {
  margin-bottom: 1em;
  margin-left: 1.5em;
  font-size: 1.8em;
  line-height: 1.6;
}
li {
  margin-bottom: 0.4em;
}
li ol,
li ul {
  font-size: 1em;
}
ol li p,
ul li p {
  font-size: 1em;
}
pre {
  width: 96%;
  padding: 2%;
  margin-bottom: 1.54em;
  font-size: 1.6em;
  line-height: 1.4;
  overflow: auto;
  background: #ddd;
  border: 1px solid #bbb;
  border-radius: 5px;
}
p code {
  background: #ddd;
}
blockquote {
  background: yellow;
  padding: 2%;
  margin-bottom: 1em;
  border-left: 5px solid cyan;
}
blockquote p:last-child {
  margin-bottom: 0;
}
p img {
  width: 100%;
}
.table-wrapper {
  width: 100%;
  overflow-x: scroll;
}

table {
  margin-bottom: 1.8em;
  border-collapse: collapse;
  min-width: 100%;
}
table th, table td {
  font-size: 1.8em;
  border-bottom: 1px solid #aaa;
  padding: .3em;
  white-space: nowrap;
}
table th {
  border-bottom-width: 2px;
}

/*** Typography > Links ***/
h1 a:link, h1 a:visited {
  position: relative;
  mix-blend-mode: multiply;
  z-index: 2;
  color: inherit;
  text-decoration: none;
}
h1 a:hover, h1 a:active, h1 a:focus,
a:hover, a:active, a:focus {
  color: #f00;
}

/*** Main > Home ***/
article {
  padding-bottom: 3em;
  border-bottom: 5px solid magenta;
}
article .meta {
  font-size: 1.4em;
  color: #666;
}

/*** Archive ***/
.visit-archives {
  margin-top: 2em;
}
.archive .meta {
  color: #666;
}

/*** Footer ***/

footer {
  padding-top: 4em;
}
footer p {
  font-size: 1.4em;
  text-align: center;
  color: #666;
}
footer p .home {
  position: relative;
  width: 150px;
  height: 150px;
  display: inline-block;
  text-decoration: none;
  color: #fff;
  font-family: 'Lucida Handwriting', Georgia;
  font-size: 2em;
}
footer p .home:hover:before {
  position: absolute;
  left: 0;
  top: 0;
  line-height: 150px;
  text-align: center;
  width: 150px;
  background: rgba(0,0,0,0.6);
  content: "home";
  border-radius: 75px;
  color: #fff;
}
footer .avatar {
  border-radius: 75px;
  filter: sepia(100%) saturate(400%) hue-rotate(0deg);
  animation: 4s steps(1, end) 1s infinite avatar;
}
@keyframes avatar {
     0%, 30% {filter: sepia(100%) saturate(400%) hue-rotate(0deg);}
     35% {filter: sepia(100%) saturate(400%) hue-rotate(120deg);}
    60% {filter: sepia(100%) saturate(1000%) hue-rotate(260deg);}
    65%, 100% {filter: sepia(100%) saturate(400%) hue-rotate(0deg);}
}
footer .copy {
  font-size: 0.8em;
  margin-top: 2em;
  text-align: center;
  color: #999;
}
footer .copy a:link,
footer .copy a:visited {
  color: #999;
  text-decoration: none;
}
footer .copy a:hover,
footer .copy a:active,
footer .copy a:focus {
  color: #f00;
}

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('fonts/League_Gothic-webfont.eot');
    src: url('fonts/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/League_Gothic-webfont.woff') format('woff'),
         url('fonts/League_Gothic-webfont.ttf') format('truetype'),
         url('fonts/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}