body {
  margin:0;
  font-family: "Times New Roman", serif;
  color:#ddd;
  background:#000;
  overflow-x: hidden;
}

.bg {
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  background: radial-gradient(circle at center, #222 0%, #000 70%);
  z-index:-1;
}

.title {
  text-align:center;
  margin-top:80px;
  letter-spacing:0.25em;
  font-size:2.4em;
  color:#ddd;
  text-shadow:0 0 20px #444;
}

.shelf {
  width:80%;
  margin:80px auto;
  height:260px;
  border-top:6px solid #333;
  border-bottom:6px solid #333;
  position:relative;
}

.book {
  width:140px;
  height:220px;
  background:linear-gradient(90deg, #111, #1d1d1d, #111);
  border:1px solid #333;
  position:absolute;
  left:50%;
  top:20px;
  transform:translateX(-50%);
  cursor:pointer;
  transition:transform .3s, box-shadow .3s;
}

.book:hover {
  transform:translateX(-50%) scale(1.05);
  box-shadow:0 0 25px #444;
}

.spine {
  transform:rotate(-90deg);
  transform-origin:left top;
  position:absolute;
  top:50%;
  left:-80px;
  letter-spacing:0.1em;
  color:#aaa;
  font-size:1.1em;
}

.note {
  text-align:center;
  margin-top:50px;
  color:#666;
  font-size:1em;
}