@font-face {
  font-family: "White Rabbit";
  font-style: normal;
  font-weight: 400;
  src: url(f799899c80942f90fff7.ttf) format("truetype");
}

@font-face {
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 400;
  src: url(46e9d73a686e6dc90ddc.ttf)
    format("truetype");
}

@font-face {
  font-family: "Retro";
  font-style: normal;
  font-weight: 400;
  src: url(d3aa5fc07030eb5f05a3.ttf) format("truetype");
}

/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}

/* Custom */

html {
  background-color: #000;
}

html,
body {
  height: 100%;
  cursor: text;
}

body {
  display: flex;
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #000;
}

pre {
  color: rgb(49, 251, 21);
}

.cursor {
  color: rgb(49, 251, 21);
  text-shadow: rgb(49, 251, 21) 0px 0px 1px, rgba(43, 262, 0, 0.6) 0px 0px 5px,
    rgba(43, 262, 0, 0.4) 0px 5px 4px;
  font-size: 1.5em;
  display: flex;
  margin: 0;
}

.cursor-container {
  flex: 1;
  padding-top: 95px;
}

.calendly-inline-widget {
  height: 100%;
}

.underscore:last-of-type {
  -webkit-animation: blink 1s step-end infinite;
  animation: blink 1s step-end infinite;
  display: flex;
  /* -webkit-animation: 1s blink step-end infinite;
  -moz-animation: 1s blink step-end infinite;
  -ms-animation: 1s blink step-end infinite;
  -o-animation: 1s blink step-end infinite;
  animation: 1s blink step-end infinite; */
}

textarea:focus,
input:focus {
  outline: none;
}

.input {
  background-color: #000;
  border: 0;
  color: rgb(46, 212, 23);
  width: 0ch;
  padding-left: 10px;
  font-family: "courier new", monospace;
  font-weight: 700;
  font-size: 0.8em;
  line-height: 2em;
  caret-color: transparent;
}

.command,
.contact,
.text {
  color: rgb(46, 212, 23);
  font-family: "courier new", monospace;
  font-weight: 700;
  font-size: 1.1em;
  line-height: 2em;
  padding-left: 25px;
}

.contact a {
  color: rgb(46, 212, 23);
}

.help {
  font-family: "courier new", monospace;
  font-size: 1.2em;
  color: rgb(49, 199, 27);
  text-shadow: rgb(49, 199, 27) 0px 0px 1px, rgba(43, 210, 0, 0.6) 0px 0px 5px,
    rgba(43, 210, 0, 0.4) 0px 5px 4px;
  padding: 25px 20px;
  animation: fadeIn 25s;
  cursor: pointer;
  position: relative;
  z-index: 1000;
  text-align: right;
}

.help-layover {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  color: rgb(49, 199, 27);
  text-shadow: rgb(49, 199, 27) 0px 0px 1px, rgba(43, 210, 0, 0.6) 0px 0px 5px,
    rgba(43, 210, 0, 0.4) 0px 5px 4px;
  background-color: rgba(0, 0, 0, 0.9);
  font-family: "courier new", monospace;
  font-weight: 700;
  font-size: 1em;
  line-height: 2em;
}

.close {
  text-align: right;
  padding: 20px 25px;
  cursor: pointer;
}

.instructions {
  text-align: center;
}

.loading:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4, end) 900ms infinite;
  animation: ellipsis steps(4, end) 900ms infinite;
  content: "\2026";
  /* ascii code for the ellipsis character */
  width: 0px;
}

.glowing-text {
  color: rgb(49, 199, 27);
  animation: glowing-text 5s infinite alternate;
}

/* Keyframes */

@-webkit-keyframes glowing-text {
  0% {
    text-shadow: 0 0 5px rgb(49, 199, 27), 0 0 10px rgb(49, 199, 27),
      0 0 20px rgb(49, 199, 27);
    font-size: 1.2em;
  }

  50% {
    text-shadow: 0 0 10px rgb(49, 199, 27), 0 0 20px rgb(49, 199, 27),
      0 0 40px rgb(49, 199, 27);
    font-size: 1.5em;
  }

  100% {
    text-shadow: 0 0 5px rgb(49, 199, 27), 0 0 10px rgb(49, 199, 27),
      0 0 20px rgb(49, 199, 27);
    font-size: 1.2em;
  }
}

@keyframes glowing-text {
  0% {
    text-shadow: 0 0 5px rgb(49, 199, 27), 0 0 10px rgb(49, 199, 27),
      0 0 20px rgb(49, 199, 27);
    font-size: 1.2em;
  }

  50% {
    text-shadow: 0 0 10px rgb(49, 199, 27), 0 0 20px rgb(49, 199, 27),
      0 0 40px rgb(49, 199, 27);
    font-size: 1.5em;
  }

  100% {
    text-shadow: 0 0 5px rgb(49, 199, 27), 0 0 10px rgb(49, 199, 27),
      0 0 20px rgb(49, 199, 27);
    font-size: 1.2em;
  }
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes ellipsis {
  to {
    width: 1.25em;
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 1.25em;
  }
}

/***********************/

.hero {
  line-height: 1;
  display: inline-block;
  color: rgba(49, 199, 27, 0.5);
  text-shadow: rgba(49, 199, 27, 0.5) 0px 0px 1px,
    rgba(43, 210, 0, 0.6) 0px 0px 5px, rgba(43, 210, 0, 0.4) 0px 5px 4px;
  z-index: 2;
  letter-spacing: 10px;
  font-family: "courier new", monospace;
  animation: fadeIn 25s;

  /* Bright things in dark environments usually cast that light, giving off a glow */
  filter: drop-shadow(0 1px 3px);
}

.layers {
  position: relative;
  flex: auto;
}

.layers::before,
.layers::after {
  content: attr(data-text);
  position: absolute;
  width: 110%;
  z-index: -1;
}

.layers::before {
  top: 10px;
  left: 15px;
  /* color: #e0287d; */
}

.layers::after {
  top: 5px;
  left: -10px;
  /* color: #1bc7fb; */
}

.single-path {
  clip-path: polygon(
    0% 12%,
    53% 12%,
    53% 26%,
    25% 26%,
    25% 86%,
    31% 86%,
    31% 0%,
    53% 0%,
    53% 84%,
    92% 84%,
    92% 82%,
    70% 82%,
    70% 29%,
    78% 29%,
    78% 65%,
    69% 65%,
    69% 66%,
    77% 66%,
    77% 45%,
    85% 45%,
    85% 26%,
    97% 26%,
    97% 28%,
    84% 28%,
    84% 34%,
    54% 34%,
    54% 89%,
    30% 89%,
    30% 58%,
    83% 58%,
    83% 5%,
    68% 5%,
    68% 36%,
    62% 36%,
    62% 1%,
    12% 1%,
    12% 34%,
    60% 34%,
    60% 57%,
    98% 57%,
    98% 83%,
    1% 83%,
    1% 53%,
    91% 53%,
    91% 84%,
    8% 84%,
    8% 83%,
    4% 83%
  );
}

.paths {
  animation: paths 5s step-end infinite;
}

@keyframes paths {
  0% {
    clip-path: polygon(
      0% 43%,
      83% 43%,
      83% 22%,
      23% 22%,
      23% 24%,
      91% 24%,
      91% 26%,
      18% 26%,
      18% 83%,
      29% 83%,
      29% 17%,
      41% 17%,
      41% 39%,
      18% 39%,
      18% 82%,
      54% 82%,
      54% 88%,
      19% 88%,
      19% 4%,
      39% 4%,
      39% 14%,
      76% 14%,
      76% 52%,
      23% 52%,
      23% 35%,
      19% 35%,
      19% 8%,
      36% 8%,
      36% 31%,
      73% 31%,
      73% 16%,
      1% 16%,
      1% 56%,
      50% 56%,
      50% 8%
    );
  }

  5% {
    clip-path: polygon(
      0% 29%,
      44% 29%,
      44% 83%,
      94% 83%,
      94% 56%,
      11% 56%,
      11% 64%,
      94% 64%,
      94% 70%,
      88% 70%,
      88% 32%,
      18% 32%,
      18% 96%,
      10% 96%,
      10% 62%,
      9% 62%,
      9% 84%,
      68% 84%,
      68% 50%,
      52% 50%,
      52% 55%,
      35% 55%,
      35% 87%,
      25% 87%,
      25% 39%,
      15% 39%,
      15% 88%,
      52% 88%
    );
  }

  30% {
    clip-path: polygon(
      0% 53%,
      93% 53%,
      93% 62%,
      68% 62%,
      68% 37%,
      97% 37%,
      97% 89%,
      13% 89%,
      13% 45%,
      51% 45%,
      51% 88%,
      17% 88%,
      17% 54%,
      81% 54%,
      81% 75%,
      79% 75%,
      79% 76%,
      38% 76%,
      38% 28%,
      61% 28%,
      61% 12%,
      55% 12%,
      55% 62%,
      68% 62%,
      68% 51%,
      0% 51%,
      0% 92%,
      63% 92%,
      63% 4%,
      65% 4%
    );
  }

  45% {
    clip-path: polygon(
      0% 33%,
      2% 33%,
      2% 69%,
      58% 69%,
      58% 94%,
      55% 94%,
      55% 25%,
      33% 25%,
      33% 85%,
      16% 85%,
      16% 19%,
      5% 19%,
      5% 20%,
      79% 20%,
      79% 96%,
      93% 96%,
      93% 50%,
      5% 50%,
      5% 74%,
      55% 74%,
      55% 57%,
      96% 57%,
      96% 59%,
      87% 59%,
      87% 65%,
      82% 65%,
      82% 39%,
      63% 39%,
      63% 92%,
      4% 92%,
      4% 36%,
      24% 36%,
      24% 70%,
      1% 70%,
      1% 43%,
      15% 43%,
      15% 28%,
      23% 28%,
      23% 71%,
      90% 71%,
      90% 86%,
      97% 86%,
      97% 1%,
      60% 1%,
      60% 67%,
      71% 67%,
      71% 91%,
      17% 91%,
      17% 14%,
      39% 14%,
      39% 30%,
      58% 30%,
      58% 11%,
      52% 11%,
      52% 83%,
      68% 83%
    );
  }

  76% {
    clip-path: polygon(
      0% 26%,
      15% 26%,
      15% 73%,
      72% 73%,
      72% 70%,
      77% 70%,
      77% 75%,
      8% 75%,
      8% 42%,
      4% 42%,
      4% 61%,
      17% 61%,
      17% 12%,
      26% 12%,
      26% 63%,
      73% 63%,
      73% 43%,
      90% 43%,
      90% 67%,
      50% 67%,
      50% 41%,
      42% 41%,
      42% 46%,
      50% 46%,
      50% 84%,
      96% 84%,
      96% 78%,
      49% 78%,
      49% 25%,
      63% 25%,
      63% 14%
    );
  }

  90% {
    clip-path: polygon(
      0% 41%,
      13% 41%,
      13% 6%,
      87% 6%,
      87% 93%,
      10% 93%,
      10% 13%,
      89% 13%,
      89% 6%,
      3% 6%,
      3% 8%,
      16% 8%,
      16% 79%,
      0% 79%,
      0% 99%,
      92% 99%,
      92% 90%,
      5% 90%,
      5% 60%,
      0% 60%,
      0% 48%,
      89% 48%,
      89% 13%,
      80% 13%,
      80% 43%,
      95% 43%,
      95% 19%,
      80% 19%,
      80% 85%,
      38% 85%,
      38% 62%
    );
  }

  1%,
  7%,
  33%,
  47%,
  78%,
  93% {
    clip-path: none;
  }
}

.movement {
  /* Normally this position would be absolute & on the layers, set to relative here so we can see it on the div */
  position: relative;
  animation: movement 24s step-end infinite;
}

@keyframes movement {
  0% {
    top: 0px;
    left: -20px;
  }

  15% {
    top: 10px;
    left: 10px;
  }

  60% {
    top: 5px;
    left: -10px;
  }

  75% {
    top: -5px;
    left: 20px;
  }

  100% {
    top: 10px;
    left: 5px;
  }
}

.opacity {
  animation: opacity 15s step-end infinite;
}

@keyframes opacity {
  0% {
    opacity: 0.1;
  }

  5% {
    opacity: 0.7;
  }

  30% {
    opacity: 0.4;
  }

  45% {
    opacity: 0.6;
  }

  76% {
    opacity: 0.4;
  }

  90% {
    opacity: 0.8;
  }

  1%,
  7%,
  33%,
  47%,
  78%,
  93% {
    opacity: 0;
  }
}

.font {
  animation: font 21s step-end infinite;
}

@keyframes font {
  0% {
    font-weight: 100;
    /* color: #e0287d; */
    filter: blur(3px);
  }

  20% {
    font-weight: 500;
    /* color: #fff; */
    filter: blur(0);
  }

  50% {
    font-weight: 300;
    /* color: #1bc7fb; */
    filter: blur(2px);
  }

  60% {
    font-weight: 700;
    /* color: #fff; */
    filter: blur(0);
  }

  90% {
    font-weight: 500;
    /* color: #e0287d; */
    filter: blur(6px);
  }
}

.glitch span {
  animation: paths 15s step-end infinite;
}

.glitch::before {
  animation: paths 15s step-end infinite, opacity 15s step-end infinite,
    font 24s step-end infinite, movement 30s step-end infinite;
}

.glitch::after {
  animation: paths 15s step-end infinite, opacity 15s step-end infinite,
    font 21s step-end infinite, movement 24s step-end infinite;
}

.hero-container {
  position: relative;
  display: flex;
  text-align: center;
}

.environment {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.5;
  filter: blur(5px);
  background-size: cover;
}