/* What makes the page read as a draft on top of the Sketchy Bootstrap theme:
   the banner, the squared paper and the dashed frames. Everything else is
   Bootstrap's own classes, which is the point of the demonstration. */
body {
  background-color: #fdfdf8;
  background-image: linear-gradient(#e9eef5 1px, transparent 1px), linear-gradient(90deg, #e9eef5 1px, transparent 1px);
  background-size: 24px 24px;
}
.prototype-banner {
  background: repeating-linear-gradient(-45deg, #ffe066, #ffe066 14px, #333 14px, #333 28px);
  color: #111;
  text-align: center;
  font-weight: bold;
  letter-spacing: .04em;
  padding: .35rem;
  text-shadow: 0 0 4px #ffe066, 0 0 4px #ffe066, 0 0 6px #ffe066, 0 0 8px #ffe066;
}
.app-frame { min-height: calc(100vh - 2.2rem); }
.sidebar { width: 15rem; flex-shrink: 0; background: #fff; border-right: 2px dashed #333; }
.topbar { background: #fff; border-bottom: 2px dashed #333; }
.card { background: #fff; }
.navbar-brand { font-family: "Cabin Sketch", cursive; font-size: 1.8rem; color: #333; text-decoration: none; }
@media (max-width: 767px) {
  .app-frame { flex-direction: column; }
  .sidebar { width: auto; border-right: 0; border-bottom: 2px dashed #333; }
}