* {
  box-sizing: border-box;
}
ul {
  list-style: none;
}
/* =============== */
.container {
  max-width: 500px;
  margin: 40px;
}
.thread {
  background-color: rgb(29 149 149);
  padding: 30px;
  border-radius: 8px;
  .comment {
    background-color: rgb(73 186 186);
  }
  .reply {
    background-color: rgb(73 186 186);
    margin-top: 10px;
  }
}
.comment,
.reply {
  padding: 30px;
  border-radius: 8px;
}
.avatar {
  width: 30px;
  height: 30px;
  background-color: #000;
  color: #fff;
  border-radius: 100vh;

  display: grid;
  place-items: center;
}
.comment-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.comment-author,
.comment-time {
  margin: 0;
}
/* connector style start */
.reply {
  anchor-name: --reply;
  anchor-scope: --reply; /* for every li connector */
}
.comment {
  anchor-name: --comment;
}
.reply::after {
  content: '';
  border: 5px solid rgb(232, 232, 232);
  border-right-color: transparent;
  border-top-color: transparent;
  border-radius: 0 0 0 8px;
  /* background-color: yellow; */

  position: absolute;
  top: anchor(bottom --comment);
  left: calc(anchor(left --comment) + 15px);
  bottom: anchor(center --reply);
  right: anchor(left --reply);
}