@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Bitter:400,400i,700");
body {
  padding: 0px;
  margin: 0px;
  height: 100vh;
  min-height: 100%;
  font-family: "Bitter", serif; }

pre {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word; }

a, a:visited, a:hover, a:focus {
  text-decoration: none;
  color: #5555ff; }

ul {
  list-style: none;
  padding: 0; }

textarea {
  resize: none; }

h1, h2, h3, h4, h5, h6 {
  margin: 0; }

h1 {
  font-size: 80px;
  font-weight: 100;
  text-transform: uppercase; }

h2 {
  text-transform: uppercase;
  margin-bottom: 10px; }

h3 {
  margin-bottom: 20px; }

h4 {
  font-size: 16px;
  margin-bottom: 10px; }

.flip {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH"; }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
/*-----------------------------------*\

  $TOAST-GRID

  An insane grid.
  You'd be mad to use it.

  Usage
  =====

  Assuming default values:

  <div class="grid">
    <div class="grid__col grid__col--1-of-2">
      A half-width column.
    </div>
    <div class="grid__col grid__col--1-of-4 grid__col--pull-1-of-4">
      A quarter, pulled left by its own width. You get this, right?
    </div>
  </div>


  Customisation
  =============

  $toast-grid-namespace and $toast-grid-column-namespace
  adjusts the class names for the grid. With
  default values, grid wrappers have a class
  of '.grid' and columns '.grid__col'.

  $toast-col-groups(n) adjusts column divisions.
  For example, $toast-col-groups(12) will produce
  a 12-column grid. $col-groups(3,6,8)
  will produce a 3-, 6-, and 8-column grid.

  $toast-gutter-width isΓÇöyou guessed itΓÇöthe gutter
  width. Accepts any unit.

  That's it. Have fun.

\*-----------------------------------*/
.grid {
  list-style: none;
  margin-left: -20px; }

.col--2-of-2, .col--3-of-3, .col--4-of-4 {
  width: 100%; }

.col--1-of-2, .col--2-of-4 {
  width: 50%; }

.col--1-of-3 {
  width: 33.33333%; }

.col--2-of-3 {
  width: 66.66667%; }

.col--1-of-4 {
  width: 25%; }

.col--3-of-4 {
  width: 75%; }

.col--push-2-of-2, .col--push-3-of-3, .col--push-4-of-4 {
  margin-left: 100%; }

.col--push-1-of-2, .col--push-2-of-4 {
  margin-left: 50%; }

.col--push-1-of-3 {
  margin-left: 33.33333%; }

.col--push-2-of-3 {
  margin-left: 66.66667%; }

.col--push-1-of-4 {
  margin-left: 25%; }

.col--push-3-of-4 {
  margin-left: 75%; }

.col--pull-2-of-2, .col--pull-3-of-3, .col--pull-4-of-4 {
  margin-left: -100%; }

.col--pull-1-of-2, .col--pull-2-of-4 {
  margin-left: -50%; }

.col--pull-1-of-3 {
  margin-left: -33.33333%; }

.col--pull-2-of-3 {
  margin-left: -66.66667%; }

.col--pull-1-of-4 {
  margin-left: -25%; }

.col--pull-3-of-4 {
  margin-left: -75%; }

.col {
  box-sizing: border-box;
  display: inline-block;
  margin-right: -.25em;
  min-height: 1px;
  padding-left: 20px;
  vertical-align: top; }
  @media (max-width: 700px) {
    .col {
      display: block;
      margin-left: 0;
      margin-right: 0;
      width: auto; } }
  @media (max-width: 700px) and (min-width: 480px) {
    .col[class*="col--m-"] {
      display: inline-block;
      margin-right: -.24em; }
    .col.col--m-1-of-2, .col.col--m-2-of-4 {
      width: 50%; }
    .col.col--m-1-of-3 {
      width: 33.33333%; }
    .col.col--m-2-of-3 {
      width: 66.66667%; }
    .col.col--m-1-of-4 {
      width: 25%; }
    .col.col--m-3-of-4 {
      width: 75%; } }
  @media (max-width: 480px) {
    .col[class*="col--s-"] {
      display: inline-block;
      margin-right: -.24em; }
    .col.col--s-1-of-2, .col.col--s-2-of-4 {
      width: 50%; }
    .col.col--s-1-of-3 {
      width: 33.33333%; }
    .col.col--s-2-of-3 {
      width: 66.66667%; }
    .col.col--s-1-of-4 {
      width: 25%; }
    .col.col--s-3-of-4 {
      width: 75%; } }

.col--centered {
  display: block;
  margin-left: auto;
  margin-right: auto; }

.col--d-first {
  float: left; }

.col--d-last {
  float: right; }

.grid--no-gutter {
  margin-left: 0;
  width: 100%; }
  .grid--no-gutter .col {
    padding-left: 0; }
  .grid--no-gutter .col--span-all {
    margin-left: 0;
    width: 100%; }

.col--ab {
  vertical-align: bottom; }

.col--am {
  vertical-align: middle; }

.page-title {
  font-size: 84px;
  text-transform: lowercase;
  margin-top: 20px;
  margin-bottom: 5px; }

.page-subTitle {
  margin-bottom: 40px; }

.wrapper {
  width: 720px;
  text-align: center;
  margin-left: calc(50% - 360px); }
  .wrapper .document-section {
    margin-bottom: 50px; }
    .wrapper .document-section .document {
      font-family: monospace;
      font-size: 18px;
      padding: 30px 20px;
      cursor: pointer;
      background: rgba(170, 170, 170, 0.4);
      border-radius: 4px; }

.file-area {
  padding: 20px 100px; }
  .file-area pre {
    text-align: left; }

.contenteditable {
  color: #5555ff; }

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