* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.5);
}

.stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1920px;
  height: 1080px;
  transform: translate(-50%, -50%) scale(1);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.stage.grabbing {
  cursor: grabbing;
}

.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
}

.page img {
  display: block;
  width: 1920px;
  height: 1080px;
  user-select: none;
  -webkit-user-drag: none;
}

/* The part of the page that has been peeled over (built in main.js).
   The shadow falls on the page underneath. Remove the filter line for no shadow. */
.fold-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  display: none;
  pointer-events: none;
  filter: drop-shadow(0 0 22px rgba(0, 0, 0, 0.35));
}

.fold {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  background: #fff;              /* back of the page */
  transform-origin: 0 0;
}

/* soft darkening next to the crease */
.fold .shade {
  position: absolute;
  top: 0;
  left: 0;
  width: 280px;
  height: 6000px;
  transform-origin: 0 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
}