body {
  margin: 0;
  background: #ddd;
  font-family: Arial, sans-serif;
}

/* title */
.latest {
  font-family: Arial Black, sans-serif;
  font-size: 32px;
  color: orange;
  margin: 20px;
}

/* board */
.board-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.board {
  width: 700px;
  height: 450px;
  background: #c79a5b;
  border: 12px solid #8b5a2b;
  position: relative;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
}

/* notes */
.note {
  position: absolute;
  width: 140px;
  height: 120px;
  background: #fff8dc;
  padding: 10px;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  color: black;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
  transform: rotate(-2deg);
}

/* different positions */
.n1 { top: 30px; left: 40px; }
.n2 { top: 80px; left: 220px; transform: rotate(3deg); }
.n3 { top: 200px; left: 100px; transform: rotate(-4deg); }
.n4 { top: 180px; left: 300px; transform: rotate(2deg); }
.n5 { top: 60px; left: 450px; transform: rotate(-3deg); }

/* hover effect */
.note:hover {
  background: #fff2aa;
  transform: scale(1.05);
  z-index: 10;
}