:root { --canvas-width: 1180px; }  /* whatever the hell this is*/

.scrapbook {
  position: relative;              
  width: var(--canvas-width);      
  margin: 40px auto;               
  min-height: 720px;               
}

/* the scalerrrrr */
@media (max-width: 1180px) {
  .scrapbook {
    transform: scale(calc(100vw / var(--canvas-width)));
    transform-origin: top center;
  }
}


.embed, .notebook, .phone {
  position: absolute;              /* <- fixes scrapbook layering */
  padding: 15px;
  background: #fff;
  border: 2px solid #111;
  box-shadow: 6px 6px 12px rgba(0,0,0,0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.embed {
  position: absolute;   /* keep absolute */
  top: 20px;
  left: 51px;
  width: 560px;
  height: 315px;
  transform: rotate(-5deg);
}

.notebook {
  position: absolute;
  top: 100px;
  left: 600px;
  width: 541px;
  min-height: 300px;
  background: #fafafa;
  border: 2px dashed #333;
  font-family: "Courier New", monospace;
  transform: rotate(4deg);
}

.phone {
 position: absolute;
  top: 362px;
  left: 277px;
  width: 371px;
  height: 180px;
  border-radius: 15px;
  background: linear-gradient(#222, #444);
  color: #fff;
  font-family: monospace;
  font-size: 14px;
  overflow-y: auto;                 /* SCROLLING HOPEFULLY */
  transform: rotate(2deg);
}

/* Tape effect. Replace with stickers or pngs when found. Background should give messy table vibes */
.embed::before,
.notebook::before{
  content: "";
  position: absolute;
  top: -15px;
  left: 20%;
  width: 80px;
  height: 30px;
  background: rgba(255,255,200,0.8);
  transform: rotate(-5deg);
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}