.todo-note {
  position: absolute;
  top: 300px;
  right: -60px; /* moved closer to right */
  width: 200px;
  height: 200px;

  padding: 25px;
  padding-left: 40px;
  padding-top: 30px;
  line-height: 1.23;

  font-size: 15px;

  color: rgb(81, 58, 42);

  border-radius: 1rem;
  background-image: url('todo.jpg');
  background-size: cover;
  background-position: center;
  transform: rotate(5deg);
  z-index: 10;

border: 1px solid rgba(92, 64, 51, 0.4);

  overflow-wrap: break-word;

  transition: all 0.3s ease; /* smooth movement */
}

.todo-note:hover {
  transform: rotate(3deg);
}