@font-face {
  font-family: NotoEmoji;
  src: url('fonts/NotoEmoji-Regular.ttf') format('truetype');
}

/* latin-ext */
@font-face {
  font-family: 'Chau Philomene One';
  font-style: normal;
  font-weight: 400;
  src: local('Chau Philomene One Regular'), local('ChauPhilomeneOne-Regular'), url('fonts/Chau_Philomene_One/55xxezRsPtfie1vPY49qzdgSlJiHRQFclYZ6cMI.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Chau Philomene One';
  font-style: normal;
  font-weight: 400;
  src: local('Chau Philomene One Regular'), local('ChauPhilomeneOne-Regular'), url('fonts/Chau_Philomene_One/55xxezRsPtfie1vPY49qzdgSlJiHRQFcm4Z6.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Racing Sans One';
  font-style: normal;
  font-weight: 400;
  src: local('Racing Sans One'), local('RacingSansOne-Regular'), url('fonts/Racing_Sans_One/sykr-yRtm7EvTrXNxkv5jfKKyDCAJnDnapI.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Racing Sans One';
  font-style: normal;
  font-weight: 400;
  src: local('Racing Sans One'), local('RacingSansOne-Regular'), url('fonts/Racing_Sans_One/sykr-yRtm7EvTrXNxkv5jfKKyDCAKHDn.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* gujarati */
@font-face {
  font-family: 'Shrikhand';
  font-style: normal;
  font-weight: 400;
  src: local('Shrikhand Regular'), local('Shrikhand-Regular'), url('fonts/Shrikhand/a8IbNovtLWfR7T7bMJwrGIKR4zg.woff2') format('woff2');
  unicode-range: U+0964-0965, U+0A80-0AFF, U+200C-200D, U+20B9, U+25CC, U+A830-A839;
}
/* latin-ext */
@font-face {
  font-family: 'Shrikhand';
  font-style: normal;
  font-weight: 400;
  src: local('Shrikhand Regular'), local('Shrikhand-Regular'), url('fonts/Shrikhand/a8IbNovtLWfR7T7bMJwrDYKR4zg.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Shrikhand';
  font-style: normal;
  font-weight: 400;
  src: local('Shrikhand Regular'), local('Shrikhand-Regular'), url('fonts/Shrikhand/a8IbNovtLWfR7T7bMJwrA4KR.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Global styles */

html, body {
  min-height: 100%;
}

html {
    background: linear-gradient(180deg, black 0%, #004400 50%, #000044 100%);
    background-size: 60vw;
    font-family: 'Open Sans', sans-serif;
    color: white;
}

body {
  font-size: 1.3rem;
}

/* Typography */

h1 {
  font-family: 'Shrikhand', sans-serif;
  font-size: 8rem;
  font-weight: normal;
  text-align: center;
  margin: 0.3em 0;
}

h2, h3, h4, h5, h6 {
  font-family: 'Chau Philomene One', sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0.3em 0;
}

h2 {
  font-size: 2.75rem;
}

.headline {
  margin: 0.1em 0;
}

.subheadline {
  font-family: 'Chau Philomene One', sans-serif;
  text-align: center;
  text-transform: uppercase;
  font-size: 2.5rem;
  color: #a31806;
  animation-name: pulsate;
  animation-duration: 2.75s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  letter-spacing: 0.03em;
  margin: 0.1em 0;
}

a {
  color: yellow;
}

p {
  margin: 1.5em 0;
}

dl {
  margin: 2em 0;
}
dl dt {
  font-weight: bold;
}
dl dd {
  margin-bottom: 1.2em;
}

i {
  font-family: 'NotoEmoji', sans-serif;
  font-style: normal;
}

/* Top nav */

body > header nav {
  max-width: 800px;
  margin: 3rem auto;
  display: flex;
  justify-content: center;
}

body > header nav a.button {
  border-radius: 0;
}

/* Main body layout */

body > header {
  margin: 3rem 0;
}
body > main {
  max-width: 800px;
  margin: 3rem auto;
  background: rgba(255, 0, 0, 0.5);
  border-radius: 10px;
  overflow: hidden;
  line-height: 1.5;
}
body > main h2 {
  color: yellow;
}
body > main > article {
  padding: 0 40px;
}
body > main > article > section {
  margin: 2em 0;
}
body > footer {
  text-align: center;
  margin: 1.5em 0;
}

/* UI / Misc elements */

a.button,
button {
  display: table;
  text-decoration: none;
  padding: 10px 20px;
  background: rgba(0, 0, 255, 0.3);
  border-radius: 4px;
  text-shadow: 0px 2px 3px rgba(0, 50, 0, 0.4);
  box-shadow: 0px 2px 3px rgba(0, 50, 0, 0.4);
  transition: all 0.2s;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 1rem;
  border: 0;
  color: yellow;
}
a.button:hover,
button:hover {
  box-shadow: 0px 2px 5px rgba(0, 50, 0, 0.4);
  animation-name: rainbow;
  animation-duration: 30s;
  animation-iteration-count: infinite;
}

img.hacker {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 2rem;
}

.glitter {
  color: #931474;
  background: url('images/glitter.gif'), -webkit-linear-gradient(#cc0000, #cc0000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#canvasBubbles {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

.vegan {
  font-size: 1.75rem;
  font-family: 'Racing Sans One', sans-serif;
  line-height: 1;
}

.communist {
  display: inline-block;
  animation-name: shake;
  animation-duration: 100ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.meta {
  color: rgba(255, 255, 255, 0.75);
}
.meta .status {
  color: #54ff5f;
}
.meta .status::before {
  content: '';
  display: inline-block;
  width: 0.65em;
  height: 0.65em;
  margin-right: 0.2em;
  border-radius: 100%;
  background-color: #00d800;
  vertical-align: baseline;
}

.services {
  display: flex;
  flex-wrap: wrap;
}
.services .service {
  width: 33.33%;
  font-size: 0.8em;
  padding: 10px 0;
}
.services .service .icon svg,
.services .service .icon img {
  width: 16px;
  height: 16px;
  transform: translateY(1px);
}
.services .service .label {
  font-weight: bold;
}
.services .service .id a {
  text-decoration: none;
}

.projects {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}
.projects .project img {
  max-width: 100%;
  border: 2px solid white;
}
.projects .project h3 {
  font-size: 18px;
}
.projects .project .description {
  font-size: 14px;
  margin-bottom: 1em;
}
.project button {
  cursor: pointer;
  margin-top: auto;
  margin-left: auto;
}
a.project {
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

body > footer {
  text-shadow: -1px 1px 3px rgba(0, 0, 255, 0.4);
}
body > footer i {
  text-shadow: 0 1px 4px blue;
}

.tribute{
  max-width: 800px;
  padding: 0 10px;
  margin: 0 auto;
}
.tribute img {
  display: block;
  width: 100%;
}

/* Pulsating "web developer" text at the top */
@keyframes pulsate {
  0%   {color: #a31806;}
  100% {color: #ba4807;}
}

/* Ridiculous flashing hover state */
@keyframes rainbow {
  0%   {background-color: rgba(0, 200,   0,   1);}
  33%  {background-color: rgba(0,   255, 0,   1);}
  50%  {background-color: rgba(0,   255, 255, 1);}
  67%  {background-color: rgba(0,   0,   255, 1);}
  83%  {background-color: rgba(255, 0,   255, 1);}
  100% {background-color: rgba(255, 0,   0,   1);}
}

/* Dat shake. Taken from: https://elrumordelaluz.github.io/csshake/ */
@keyframes shake {
 2% {transform:translate(.5px, 2.5px) rotate(1.5deg)}
 4% {transform:translate(2.5px, 1.5px) rotate(1.5deg)}
 6% {transform:translate(1.5px, .5px) rotate(.5deg)}
 8% {transform:translate(-1.5px, -1.5px) rotate(-.5deg)}
 10% {transform:translate(-1.5px, 2.5px) rotate(1.5deg)}
 12% {transform:translate(-1.5px, .5px) rotate(.5deg)}
 14% {transform:translate(-1.5px, -1.5px) rotate(-.5deg)}
 16% {transform:translate(1.5px, 2.5px) rotate(1.5deg)}
 18% {transform:translate(1.5px, -.5px) rotate(1.5deg)}
 20% {transform:translate(1.5px, -.5px) rotate(1.5deg)}
 22% {transform:translate(-1.5px, .5px) rotate(-.5deg)}
 24% {transform:translate(.5px, -1.5px) rotate(-.5deg)}
 26% {transform:translate(-1.5px, 2.5px) rotate(1.5deg)}
 28% {transform:translate(-.5px, .5px) rotate(-.5deg)}
 30% {transform:translate(-1.5px, 2.5px) rotate(.5deg)}
 32% {transform:translate(.5px, -1.5px) rotate(1.5deg)}
 34% {transform:translate(.5px, -1.5px) rotate(1.5deg)}
 36% {transform:translate(2.5px, .5px) rotate(.5deg)}
 38% {transform:translate(-.5px, .5px) rotate(-.5deg)}
 40% {transform:translate(.5px, .5px) rotate(1.5deg)}
 42% {transform:translate(.5px, 1.5px) rotate(1.5deg)}
 44% {transform:translate(.5px, 2.5px) rotate(.5deg)}
 46% {transform:translate(1.5px, 1.5px) rotate(-.5deg)}
 48% {transform:translate(2.5px, .5px) rotate(-.5deg)}
 50% {transform:translate(1.5px, 1.5px) rotate(1.5deg)}
 52% {transform:translate(1.5px, 2.5px) rotate(1.5deg)}
 54% {transform:translate(1.5px, 1.5px) rotate(.5deg)}
 56% {transform:translate(.5px, -.5px) rotate(.5deg)}
 58% {transform:translate(-1.5px, .5px) rotate(.5deg)}
 60% {transform:translate(2.5px, 1.5px) rotate(1.5deg)}
 62% {transform:translate(1.5px, 2.5px) rotate(-.5deg)}
 64% {transform:translate(.5px, -1.5px) rotate(1.5deg)}
 66% {transform:translate(-1.5px, 2.5px) rotate(-.5deg)}
 68% {transform:translate(-1.5px, 1.5px) rotate(-.5deg)}
 70% {transform:translate(1.5px, -1.5px) rotate(.5deg)}
 72% {transform:translate(-.5px, 1.5px) rotate(.5deg)}
 74% {transform:translate(-.5px, .5px) rotate(-.5deg)}
 76% {transform:translate(2.5px, 1.5px) rotate(-.5deg)}
 78% {transform:translate(1.5px, .5px) rotate(1.5deg)}
 80% {transform:translate(-1.5px, .5px) rotate(1.5deg)}
 82% {transform:translate(2.5px, 1.5px) rotate(1.5deg)}
 84% {transform:translate(-.5px, .5px) rotate(-.5deg)}
 86% {transform:translate(-1.5px, 2.5px) rotate(-.5deg)}
 88% {transform:translate(1.5px, -.5px) rotate(-.5deg)}
 90% {transform:translate(-1.5px, 2.5px) rotate(-.5deg)}
 92% {transform:translate(-1.5px, 2.5px) rotate(.5deg)}
 94% {transform:translate(-.5px, .5px) rotate(-.5deg)}
 96% {transform:translate(.5px, -1.5px) rotate(.5deg)}
 98% {transform:translate(.5px, .5px) rotate(1.5deg)}
 0%,100% {transform:translate(0, 0) rotate(0)}
}

/* Responsive */
@media(max-width: 650px) {
  body {
    font-size: 1rem;
  }
  h2 {
    font-size: 1.75rem;
  }
  .headline {
    font-size: 18vw;
  }
  .subheadline {
    font-size: 5vw;
  }
  .vegan {
    font-size: 1.4rem;
    white-space: nowrap;
  }
  body>header {
    margin: 2rem 0;
  }
  body>main {
    margin: 2rem 0;
  }
  body>main>article {
    padding: 0 10px;
  }
  .services {
    display: block;
  }
  .services .service {
    width: auto;
  }
  .projects {
    grid-template-columns: 1fr;
  }
  .projects .project {
    display: block;
  }
}

.wallet-id {
  font-size: 16px;
  word-wrap: break-word;
}

.wallet-id--yuge {
  font-size: 10px;
}