* { box-sizing: border-box; }
 body {
   margin: 0;
   padding: 0px;
   height: 100vh;
   width: 100vw;
   overflow-x: scroll;
   overflow-y: hidden;
   --footer-height: 2rem;
   --main-height: calc(100vh - var(--footer-height) - 10px);
   background-color: lightgrey;
   white-space: nowrap;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr var(--footer-height);
   grid-template-areas:
     "main"
     "footer";
 }
 .main {
   grid-area: main;
   height: var(--main-height);
 }
 footer {
   grid-area: footer;
   justify-self: start;
   align-self: end;
   padding: 5px;
   height: var(--footer-height);
   width: 100%;
 }
 footer * {
   display: inline-block;
 }
 footer .neighborhood {
   float: right;
 }
 .page {
   display: inline-block;
   white-space: normal;
   width: 490px;
   height: var(--main-height);
   overflow-y: scroll;
   margin: 5px;
   background-color: white;
 }
 .paper {
   padding: 30px;
 }
 img.remote,.neighbor img { width: 16px; height: 16px; background-color: #ccc; }


/* One Width. We try to match pages bit for bit on big screen, and shrink to fit on small screen. */

body {
  font-family: "Helvetica Neue", Verdana, helvetica, Arial, Sans;
  background-color: #ebebeb;
}
a {
  text-decoration: none;
}
.page {
  margin: 8px;
  box-shadow: 2px 1px 4px rgba(0, 0, 0, 0.2);  /* normal */
  box-shadow: 2px 1px 24px rgba(0, 0, 0, 0.4);  /* active */
}
.twins {
  min-height: 1em;
}

/* Self Test. We add these check-marks as check pragmas complete. */

.pass::after {
  font-weight: bold;
  color: green;
  content: " \2713";
}

.fail::after {
  font-weight: bold;
  color: red;
  content: " \2715";
}

/* Direct Manipulation. We add scroll-snap to improve the feel of touch scrolling.  */

body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

.main {
  display: grid;
  grid: auto / auto-flow max-content;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.main::-webkit-scrollbar {
  display: none;
}

.page {
  scroll-snap-align: center;
}