body {
  background-image: url("https://daoswrld.neocities.org/Cat%20Wallpapers%20Backrooms%20%231.jpg");
  background-size: cover;        /* fill the screen */
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;  /* stays put while scrolling */
}
.paper {
  position: relative;
  background: #f7f3e8;
  padding: 24px 24px 40px;
  box-shadow: 2px 3px 8px rgba(0,0,0,.35);
  max-width: 500px;
}

.tabs {
  position: absolute;
  bottom: -22px;          /* hang below the paper edge */
  left: 16px;
  display: flex;
  gap: 3px;
}

.tab {
  display: block;
  padding: 5px 12px 9px;
  font: 13px "Trebuchet MS", sans-serif;
  color: #5a3d1e;
  text-decoration: none;
  background: #f1e6c8;
  border-radius: 5px 5px 0 0;
  box-shadow: 0 -1px 3px rgba(0,0,0,.3),
              inset 0 0 8px rgba(120,90,40,.25);
  transform-origin: bottom center;
  transition: transform .15s ease;
}

/* vary rotation + color so they look hand-placed */
.t1 { transform: rotate(-2deg);  background: #efe3c4; }
.t2 { transform: rotate(1.5deg); background: #f6d9a8; }
.t3 { transform: rotate(-1deg);  background: #f3ead2; }
.t4 { transform: rotate(2deg);   background: #e9d3a5; }
.t5 { transform: rotate(-1.5deg);background: #f5c98b; }

.tab:hover {
  transform: translateY(-5px) rotate(0deg);
}