.moodboard{
  display:grid;

  grid-template-columns:
  repeat(8,1fr);

  gap:8px;
}body {
  background:black;
  margin:0;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;

  font-family:Helvetica, Arial, sans-serif;
}

.binder {
  width:900px;
  height:650px;

  position:relative;
}

.page {
  position:absolute;

  width:100%;
  height:100%;

  background:white;

  border-radius:4px;

  padding:60px;

  box-sizing:border-box;

  transform-origin:left center;

  transition:.8s ease;

  box-shadow:
  0 10px 40px rgba(0,0,0,.4);
}

/* cover */

.cover {
  background:#c73d2d;
  color:black;

  display:flex;
  justify-content:center;
  align-items:center;
}

.cover h1 {
  font-size:72px;
  letter-spacing:4px;
}

/* binder holes */

.page::before {
  content:"";

  position:absolute;

  left:-22px;
  top:50px;

  width:18px;
  height:18px;

  border-radius:50%;

  background:black;

  box-shadow:
  0 120px black,
  0 240px black,
  0 360px black,
  0 480px black;
}

.contents ul {
  list-style:none;
  padding:0;
}

.contents li {
  padding:16px 0;
  cursor:pointer;
  font-weight:bold;
}