@media (max-width: 750px) {
  .markdown-container {
    padding: 2em 3em;
  }

  .paper-container .paper { padding: 40px 28px; }

  .fullscreen.half {
    .background { height: 100%; }
  }

  .me {
    padding: 0;

    .title { font-size: 13vmin; margin: 0; text-align: center; }
    .undertitle { font-size: 1.75rem; text-align: center; }
    .image-title { height: 7em; width: 7em; }

    &.unset {
      flex-direction: column;
      margin-left: 0;
      .unset { margin-left: 0; }
    }
  }

  .buttons {
    align-items: center;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;

    .btn {
      align-items: center;
      display: flex;
      font-size: 18px;
      justify-content: center;
      line-height: 20px;
      padding: 20px 10px;
      text-align: center;
      white-space: pre-line;
      width: calc(45% - 30px);

      // Support for FontAwesome icons
      i { margin-right: 10px; }
    }

    &.one-line .btn {
      padding: 14px 8px;
      width: 75%;
    }
  }
}

// For paper bullshit
@media (max-width: 1012px) {
  .paper-container .paper {
    width: 85%;
  }
}

// For devices smaller than 550px
@media (max-width: 550px) {
  .paper-container {
    display: block;

    .paper::before { display: none; }
  }

  .container {
    padding: 0 1em;
    padding-top: .5em;
    width: 100%;
  }

  .flex-grid {
    .col-xs,
    .col-xs-1, .col-xs-2, .col-xs-3,
    .col-xs-4, .col-xs-5, .col-xs-6,
    .col-xs-7, .col-xs-8, .col-xs-9,
    .col-xs-10, .col-xs-11, .col-xs-12 {
      flex-basis: 100%;
      max-width: 100%;
      padding: 0;
      width: 100%;
    }
  }
}
