@charset "UTF-8";

@font-face {
  font-family: 'GT Haptik';
  src: url("https://cdn.vapid.site/sites/05545820-65c0-11e8-a67b-250a84a68307/stylesheets/fonts/GT-Haptik-Thin-17b6551509baa6f1cbd9bc9b060b4760.eot") format("eot"), url("https://cdn.vapid.site/sites/05545820-65c0-11e8-a67b-250a84a68307/stylesheets/fonts/GT-Haptik-Thin-89dbf7a2fdfcc91a542b1340aebf8578.woff") format("woff"), url("https://cdn.vapid.site/sites/05545820-65c0-11e8-a67b-250a84a68307/stylesheets/fonts/GT-Haptik-Thin-9dac762145e765e1723c2a5e32474840.woff2") format("woff2"), url("https://cdn.vapid.site/sites/05545820-65c0-11e8-a67b-250a84a68307/stylesheets/fonts/GT-Haptik-Thin-31d29ccc12236148d6b6d5957536aafe.ttf") format("ttf");
  font-weight: normal;
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'GT Haptik';
  src: url("https://cdn.vapid.site/sites/05545820-65c0-11e8-a67b-250a84a68307/stylesheets/fonts/GT-Haptik-Thin-Oblique-c3da35375da977fb006750b3c9ecd2d8.eot") format("eot"), url("https://cdn.vapid.site/sites/05545820-65c0-11e8-a67b-250a84a68307/stylesheets/fonts/GT-Haptik-Thin-Oblique-d2ea314c12d6977d452cf743ae79fffe.woff") format("woff"), url("https://cdn.vapid.site/sites/05545820-65c0-11e8-a67b-250a84a68307/stylesheets/fonts/GT-Haptik-Thin-Oblique-48e0a6a208953554b667bd5bcd556374.woff2") format("woff2"), url("https://cdn.vapid.site/sites/05545820-65c0-11e8-a67b-250a84a68307/stylesheets/fonts/GT-Haptik-Thin-Oblique-eae4df83b29c298a931a66938a0f5402.ttf") format("ttf");
  font-weight: normal;
  font-weight: 100;
  font-style: italic;
}

@font-face {
  font-family: 'GT Haptik';
  src: url("https://cdn.vapid.site/sites/05545820-65c0-11e8-a67b-250a84a68307/stylesheets/fonts/GT-Haptik-Black-0727fbc5616857a7b8875042900bd186.eot") format("eot"), url("https://cdn.vapid.site/sites/05545820-65c0-11e8-a67b-250a84a68307/stylesheets/fonts/GT-Haptik-Black-fa8e301ef3f058f6bf970d4eee5a29dc.woff") format("woff"), url("https://cdn.vapid.site/sites/05545820-65c0-11e8-a67b-250a84a68307/stylesheets/fonts/GT-Haptik-Black-f92a0a15ecf4ea387fe8afc5a9372400.woff2") format("woff2"), url("https://cdn.vapid.site/sites/05545820-65c0-11e8-a67b-250a84a68307/stylesheets/fonts/GT-Haptik-Black-006e99e07c6b7cbb296416423efdb7d3.ttf") format("ttf");
  font-weight: bold;
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'GT Haptik Rotalic';
  src: url("https://cdn.vapid.site/sites/05545820-65c0-11e8-a67b-250a84a68307/stylesheets/fonts/GT-Haptik-Thin-Rotalic-443ea60d8708a99e677d7928d3e887c2.eot") format("eot"), url("https://cdn.vapid.site/sites/05545820-65c0-11e8-a67b-250a84a68307/stylesheets/fonts/GT-Haptik-Thin-Rotalic-44753939bedd0679f5c3bd2b3aff040f.woff") format("woff"), url("https://cdn.vapid.site/sites/05545820-65c0-11e8-a67b-250a84a68307/stylesheets/fonts/GT-Haptik-Thin-Rotalic-7f9647584c15c56bdff4c2ce20187201.woff2") format("woff2"), url("https://cdn.vapid.site/sites/05545820-65c0-11e8-a67b-250a84a68307/stylesheets/fonts/GT-Haptik-Thin-Rotalic-9263e50862904049c0d203cc25854f00.ttf") format("ttf");
  font-weight: normal;
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'GT Haptik Rotalic';
  src: url("https://cdn.vapid.site/sites/05545820-65c0-11e8-a67b-250a84a68307/stylesheets/fonts/GT-Haptik-Black-Rotalic-7f3fc4067bfd587c04f508de93185adc.eot") format("eot"), url("https://cdn.vapid.site/sites/05545820-65c0-11e8-a67b-250a84a68307/stylesheets/fonts/GT-Haptik-Black-Rotalic-55af0d395e111eca3fd2df402ff6622f.woff") format("woff"), url("https://cdn.vapid.site/sites/05545820-65c0-11e8-a67b-250a84a68307/stylesheets/fonts/GT-Haptik-Black-Rotalic-35a0436b45a6930b9347c5080f35c010.woff2") format("woff2"), url("https://cdn.vapid.site/sites/05545820-65c0-11e8-a67b-250a84a68307/stylesheets/fonts/GT-Haptik-Black-Rotalic-457414a545865006f1749f3b690e7508.ttf") format("ttf");
  font-weight: bold;
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Feijoa Medium';
  src: url("https://cdn.vapid.site/sites/05545820-65c0-11e8-a67b-250a84a68307/stylesheets/fonts/FeijoaWeb-Medium-03f83c699b450b555e9d8161cf217b99.eot") format("eot"), url("https://cdn.vapid.site/sites/05545820-65c0-11e8-a67b-250a84a68307/stylesheets/fonts/FeijoaWeb-Medium-18194b764d9f3c2459f56792275f3cde.woff") format("woff"), url("https://cdn.vapid.site/sites/05545820-65c0-11e8-a67b-250a84a68307/stylesheets/fonts/FeijoaWeb-Medium-7f306619550817e1fa5df45b72e7b762.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Feijoa Italic';
  src: url("https://cdn.vapid.site/sites/05545820-65c0-11e8-a67b-250a84a68307/stylesheets/fonts/FeijoaWeb-MediumItalic-d81ab8a9a3270507af829d38b064cdd5.eot") format("eot"), url("https://cdn.vapid.site/sites/05545820-65c0-11e8-a67b-250a84a68307/stylesheets/fonts/FeijoaWeb-MediumItalic-3c1f462f1a476098577df927ba861e66.woff") format("woff"), url("https://cdn.vapid.site/sites/05545820-65c0-11e8-a67b-250a84a68307/stylesheets/fonts/FeijoaWeb-MediumItalic-d995dbe751ac5c702a7db594da252d61.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
}

/* #Reset & Basics (Inspired by E. Meyers)
================================================== */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

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

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* #Basic Styles
================================================== */

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #111;
  color: #fff;
  font-size: 1.25rem;
  font-family: "GT Haptik", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 100;
  letter-spacing: 0.05em;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  position: absolute;
  min-height: 100vh;
  width: 100vw;
}

/* #Typography
================================================== */

h1,
h2,
h3 {
  font-family: "GT Haptik", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .1rem;
  text-align: center;
}

h1 {
  font-size: 2.125rem;
  margin: 2rem 0 1em;
}

h2 {
  font-size: 1.5rem;
  margin: 1rem 0;
}

h3 {
  font-size: 1.125rem;
  font-weight: 300;
  margin: 1rem 0;
}

a {
  color: blue;
  background-color: aliceblue;
  text-decoration: none;
  border-radius: 2px;
  padding: 2px;
}

a:hover,
a:focus {
  text-decoration: underline;
}

p {
  margin: .25rem 0 .75rem;
}

.center {
  text-align: center;
}

em {
  font-style: italic;
}

strong,
.bold {
  font-weight: 800;
}

.underline {
  text-decoration: underline;
}

ul {
  list-style: square outside none;
  margin: .25rem 2rem 3rem;
}

ol {
  list-style: decimal outside none;
  margin: .25rem 2rem 3rem;
}

li {
  margin: .5rem 0;
}

ul.inline li {
  display: inline;
}

img {
  max-width: 100%;
  height: auto;
}

svg {
  max-width: 100%;
  height: auto;
  overflow: visible;
  -webkit-transform-origin: center;
  transform-origin: center;
}

svg path {
  -webkit-transform-origin: center;
  transform-origin: center;
}

.vertical-center {
  position: absolute;
  width: 100%;
  max-width: 540px;
  padding: 1em;
  text-align: center;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2em);
    transform: translateY(2em);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2em);
    transform: translateY(2em);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

.ramen {
  position: relative;
  height: 70vh;
  min-height: 420px;
  width: 100vw;
  opacity: 0;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -webkit-transform: translateY(2em);
  transform: translateY(2em);
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 2500ms;
  animation-duration: 2500ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  animation-direction: normal;
  -webkit-animation-delay: 850ms;
  animation-delay: 850ms;
}

.ramen svg {
  max-width: 180px;
  margin: auto;
}

.logo,
.ramen svg {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.about .logo {
  cursor: -webkit-grab;
  cursor: grab;
  padding: 0 1em;
}

.big-to-small {
  max-width: 80px;
  fill: #E87042;
  vertical-align: middle;
  -webkit-transform-origin: center;
  transform-origin: center;
}

.avatar {
  display: block;
  background: transparent;
  text-decoration: none;
  border: none;
}

.avatar img {
  max-width: 180px;
  display: block;
  margin: 0 auto;
  -webkit-transition: -webkit-transform 150ms ease-in-out;
  transition: -webkit-transform 150ms ease-in-out;
  -webkit-transition: -webkit-transform 150ms ease-in;
  transition: -webkit-transform 150ms ease-in;
  transition: transform 150ms ease-in;
  transition: transform 150ms ease-in, -webkit-transform 150ms ease-in;
  transition: transform 150ms ease-in, -webkit-transform 150ms ease-in-out;
}

.avatar:hover img,
.avatar:active img {
  -webkit-transform: translateY(-4px) scale(1.1) rotateZ(-6deg);
  transform: translateY(-4px) scale(1.1) rotateZ(-6deg);
}

.manifesto {
  font-size: 2.75rem;
  line-height: 1.325;
  letter-spacing: 0.025em;
  text-align: center;
  text-shadow: rgba(0, 0, 0, 0.25) 1px 0px 3px;
  white-space: nowrap;
  margin: 0 auto;
  padding: 1em;
  opacity: 0;
  -webkit-transition: opacity 125ms ease-in-out;
  transition: opacity 125ms ease-in-out;
  -webkit-transform: translateY(2em);
  transform: translateY(2em);
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 2500ms;
  animation-duration: 2500ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  animation-direction: normal;
  -webkit-animation-delay: 1250ms;
  animation-delay: 1250ms;
}

@media (max-width: 960px) {
  .manifesto {
    font-size: 2.25rem;
  }
}

@media (max-width: 740px) {
  .manifesto {
    font-size: 1.75rem;
  }
}

@media (max-width: 580px) {
  .manifesto {
    font-size: 1.25rem;
  }
}

.manifesto p {
  margin-bottom: 2.5em;
}

.about {
  position: relative;
  height: 70vh;
  min-height: 420px;
  width: 100vw;
  padding: 1em;
  margin: 10em auto 25em;
  text-align: center;
}

.about svg {
  display: block;
  max-width: 100%;
  width: 480px;
  margin: 2em auto;
}

#email-address {
  font-family: 'GT Haptik Rotalic';
  font-weight: 800;
  display: inline-block;
  margin: .25em auto 2em;
  padding: 4px 12px;
  background-color: #fff;
  color: #111;
  border-radius: 6px;
}

#email-address:before {
  content: "\1F44B\1F3FD";
  margin-right: 4px;
}

small,
.small {
  font-size: .5em;
  font-style: italic;
  line-height: 1.65;
}

::-moz-selection {
  color: #111;
  background: #F6C452;
}

::selection {
  color: #111;
  background: #F6C452;
}

::-moz-selection {
  color: #111;
  background: #F6C452;
}

/*
  Inputs
*/

input {
  background: #fff;
  color: #222;
  font-family: 'GT Haptik', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 100;
  line-height: 1.65;
  letter-spacing: 0.065rem;
  padding: .5rem 1rem;
  border: 2px solid #222;
  border-radius: 0;
  background: #222;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
}

input:focus,
input:hover,
input:active {
  border-color: aliceblue;
}

::-webkit-input-placeholder {
  font-family: 'GT Haptik', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: rgba(255, 255, 255, 0.5);
}

::-moz-placeholder {
  /* Firefox 19+ */
  font-family: 'GT Haptik', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: rgba(255, 255, 255, 0.5);
}

:-ms-input-placeholder {
  font-family: 'GT Haptik', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: rgba(255, 255, 255, 0.5);
}

:-moz-placeholder {
  /* Firefox 18- */
  font-family: 'GT Haptik', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: rgba(255, 255, 255, 0.5);
}