/* Article container */
.post {    
  width: 684px;
  margin: 128px auto;
  padding: 8px 36px;
  background-color: var(--reading-background);
}
body {
  background-color: var(--aux-background-color);
}
/*Name title cap*/
.post_title {
  text-align: center;
  margin-bottom: 32px;
}
.reaction-icon { 
  min-width: 42px;
  aspect-ratio: 1/1;
  min-height: 42px;
  max-height: 100%;
  max-width: 100%;
  margin-right: 4px;
}
.text-content {
  display: inline-block;
}
.text-view, .image-view {
  padding: 8px;
}
.chapter_paragraph {
  padding: 0 8px;
  min-height: 48px;
  user-select: none;
  position: relative;
  transition: transform 0.2s ease;
  will-change: transform;
}

.chapter_paragraph .text-content {
  display: inline-block;
  vertical-align: middle;
  transition: opacity 0.3s;
  max-width: 100%;
  white-space: normal;
}
.chapter_paragraph, 
.chapter_paragraph * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.love-reaction {
  background: rgba(199, 40, 175, 0.2);
}
.laugh-reaction {
  background: rgba(197, 165, 23, 0.2);
}
.cry-reaction {
  background: rgba(36, 110, 206, 0.2);
}
.shock-reaction {
  background: rgba(95, 163, 76, 0.2);
}
.angry-reaction {
  background: rgba(180, 13, 13, 0.2);
}

/*Separating line*/
.post_header_article {
  border-bottom: 0.2rem solid var(--card-border-color);
}
/*Between each p*/
.post_content p {
  font-family: var(--font-family-post);
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .header {
    display: none;
  }
  .post {
    width: 100%;
    padding: 84px 16px 26px 16px;
    box-sizing: border-box;
    margin: 0px;
    background-color: var(--reading-background);
  }
  #next-chapter {
    width: 80%;
  }
}