@font-face {
  font-family: Rodin;
  src: url(../fonts/Rodin_DB.otf); }
body, html {
  font-family: 'Rodin', monospace;
  background: #fafaef;
  color: #524f41;
  width: 100%;
  height: 100%; }
  body .hidden, html .hidden {
    display: none; }
  body .container, html .container {
    width: 100%;
    height: 100%; }
  body .footer, html .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 5px;
    width: 100%;
    text-transform: uppercase;
    font-size: 0.7em; }
    body .footer .credits, html .footer .credits {
      padding-right: 10px; }
      body .footer .credits span, html .footer .credits span {
        cursor: pointer;
        padding-left: 20px;
        letter-spacing: 1px; }
  body .init-text, html .init-text {
    font-family: inherit;
    color: inherit;
    font-size: 1.1em;
    font-weight: bold;
    animation-duration: 2s; }
  body .typed-cursor, html .typed-cursor {
    animation-duration: 2s; }
  body .overlay, html .overlay {
    position: fixed;
    top: 0;
    left: 0;
    background-image: url("../images/pattern.png");
    opacity: 0.00;
    pointer-events: none; }
    body .overlay.animated, html .overlay.animated {
      animation-duration: 3s;
      animation-name: background-glitch;
      animation-fill-mode: forwards; }
  body .info-container, html .info-container {
    padding: 40px;
    font-size: 0.8em; }
  body #particles, html #particles {
    width: 120%;
    height: 120%;
    position: fixed;
    top: -10%;
    left: -10%; }
  body #loading-progress, html #loading-progress {
    height: 2px;
    background: #524f41;
    margin: 10px 0 10px 0;
    width: 0;
    transition: 2s linear; }
  body .dud, html .dud {
    color: rgba(82, 79, 65, 0.69); }
  body .audio-bars, html .audio-bars {
    transform: scaleY(-1);
    height: 30px;
    cursor: pointer; }
    body .audio-bars .audio-bar, html .audio-bars .audio-bar {
      width: 2px;
      height: 1px;
      min-height: 1px;
      background-color: #524f41;
      margin: 0 1px 0 1px;
      transition: 0.1s; }

@keyframes background-glitch {
  0% {
    opacity: 0.77; }
  5% {
    opacity: 0.05; }
  10% {
    opacity: 0.91; }
  15% {
    opacity: 0.2; }
  20% {
    opacity: 0.1; }
  25% {
    opacity: 0.3; }
  30% {
    opacity: 0.16; }
  35% {
    opacity: 0.65; }
  40% {
    opacity: 0.92; }
  45% {
    opacity: 0.39; }
  50% {
    opacity: 0.25; }
  55% {
    opacity: 0.01; }
  60% {
    opacity: 0.34; }
  65% {
    opacity: 0.67; }
  70% {
    opacity: 0.48; }
  75% {
    opacity: 0.58; }
  80% {
    opacity: 0.71; }
  85% {
    opacity: 0.59; }
  90% {
    opacity: 0.62; }
  95% {
    opacity: 0.65; }
  100% {
    opacity: 0.02; } }

/*# sourceMappingURL=main.css.map */