body,
html {
  background-color: black;
  color: white;
  font-family: "Apercu Mono", monospace;
  font-weight: normal;
  font-style: normal;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.025em;
  background-image: url("../images/bg.jpg");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat; }
  @media screen and (min-width: 640px) {
    body,
    html {
      font-size: 14px; } }
  @media screen and (max-width: 640px) {
    body,
    html {
      font-size: 12px; } }

::selection {
  background-color: #1434f7;
  color: white; }

p {
  line-height: 1.4; }

.faded {
  overflow: hidden;
  opacity: 0.5; }

.panel-container {
  -webkit-transform: translateX(-100vw);
  -moz-transform: translateX(-100vw);
  -ms-transform: translateX(-100vw);
  -o-transform: translateX(-100vw);
  transform: translateX(-100vw);
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%; }
  @media screen and (min-width: 640px) {
    .panel-container {
      width: 60vw;
      -webkit-transform: translateX(-60vw);
      -moz-transform: translateX(-60vw);
      -ms-transform: translateX(-60vw);
      -o-transform: translateX(-60vw);
      transform: translateX(-60vw); } }
  .panel-container.visible {
    -webkit-transform: translateX(0vw);
    -moz-transform: translateX(0vw);
    -ms-transform: translateX(0vw);
    -o-transform: translateX(0vw);
    transform: translateX(0vw); }

.panel {
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #000000;
  z-index: 1; }

.panel-link {
  white-space: nowrap; }
  .panel-link .arrow {
    opacity: 0; }
  .panel-link:hover {
    background-color: rgba(0, 0, 0, 0.1); }
    .panel-link:hover .arrow {
      opacity: 1; }

.arrow {
  display: inline-block; }

.arrow-rotated {
  transform: rotate(-45deg); }

.link {
  transition: all 600ms cubic-bezier(0.175, 0.885, 0.335, 1);
  padding-bottom: 2px;
  position: relative;
  text-decoration: none;
  display: inline-block; }
  .link::after {
    content: "";
    height: 1px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px; }
  .link.white {
    color: #fff; }
    .link.white::after {
      background-color: #fff; }
  .link.black {
    color: #000; }
    .link.black::after {
      background-color: #000; }
  .link:hover {
    opacity: 0.5; }
    .link:hover .arrow {
      -webkit-transform: translateX(3px);
      -moz-transform: translateX(3px);
      -ms-transform: translateX(3px);
      -o-transform: translateX(3px);
      transform: translateX(3px); }
    .link:hover::after {
      opacity: 0; }
  .link.selected {
    margin-left: 15px; }
    .link.selected .arrow {
      transform: rotate(180deg); }

.button {
  background-color: #000000;
  color: #ffffff;
  font-family: "Space Mono", monospace; }

@font-face {
  font-family: "Klang MT";
  src: url("../webfonts/KlangMT.eot");
  src: url("../webfonts/KlangMT.eot?#iefix") format("embedded-opentype"), url("../webfonts/KlangMT.woff") format("woff"), url("../webfonts/KlangMT.ttf") format("truetype"), url("../webfonts/KlangMT.svg#KlangMT") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: "Apercu Mono";
  src: url("../webfonts/Apercu-Mono.eot");
  src: url("../webfonts/Apercu-Mono.eot?#iefix") format("embedded-opentype"), url("../webfonts/Apercu-Mono.woff") format("woff"), url("../webfonts/Apercu-Mono.ttf") format("truetype"), url("../webfonts/Apercu-Mono.svg#Apercu-Mono") format("svg");
  font-weight: normal;
  font-style: normal; }
.light {
  font-weight: 200; }

.nowrap {
  white-space: nowrap; }

.small-type {
  font-size: 0.7em; }

.big-type {
  font-size: 1.8em; }

.type-justify {
  text-align: justify; }

.no-underline {
  text-decoration: none; }

.klang {
  font-family: "Klang MT"; }

.caps {
  text-transform: uppercase;
  letter-spacing: 0.1em; }

/* flex */
.flex {
  display: flex; }

.flex-1 {
  flex: 1; }

.justify-space-between {
  justify-content: space-between; }

/* Borders */
.border-top {
  border-top: 1px solid; }

.border-bottom {
  border-bottom: 1px solid; }

.border-white {
  border-color: rgba(255, 255, 255, 0.2); }

/* Misc */
.fit {
  max-width: 100%; }

.clip {
  overflow: hidden; }

.margin-auto {
  margin: auto; }

@media screen and (min-width: 640px) {
  .full-height {
    min-height: 100vh; } }

.height-vh40 {
  height: 40vh; }

/* Mobile states */
@media screen and (max-width: 640px) {
  .mobile-no-right-padding {
    padding-right: 0; }

  .mobile-full-height {
    height: 100vh; }

  .mobile-display-block {
    display: block; }

  .mobile-full-width {
    width: 100%; } }
/* transitions */
.transition-all {
  transition: all 600ms cubic-bezier(0.175, 0.885, 0.335, 1); }

/* z-index */
.z1 {
  z-index: 1; }

.z2 {
  z-index: 2; }

/* Backgrounds */
.bg-black-50 {
  background-color: rgba(0, 0, 0, 0.5); }