/* Tag classes */

.tag {
  border-radius: 9999px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500
}

.tag-link {
  display: block;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem
}

.red-tag {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity))
}

.blue-tag {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity))
}

.green-tag {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity))
}

.yellow-tag {
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity))
}

.purple-tag {
  --tw-bg-opacity: 1;
  background-color: rgb(168 85 247 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity))
}

/* Post classes */

#PostSectionBlog {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
  --tw-bg-opacity: 0.35;
  padding: 1rem
}

#PostSectionBlog p {
  position: relative;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.625;
  --tw-text-opacity: 1;
  color: rgb(228 228 231 / var(--tw-text-opacity))
}

#PostSectionBlog h2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600
}

#PostSectionBlog h3 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600
}

#PostSectionBlog h4 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600
}

#PostSectionBlog h5 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600
}

#PostSectionBlog p a {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(132 204 22 / var(--tw-text-opacity));
  text-decoration-line: underline;
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}

#PostSectionBlog p a:visited {
  color: rgb(192 132 252 )
}

#PostSectionBlog p a:hover {
  --tw-text-opacity: 1;
  color: rgb(101 163 13 / var(--tw-text-opacity))
}

#PostSectionBlog p a:active {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity))
}

#PostSectionBlog ul {
  display: flex;
  list-style-position: inside;
  list-style-type: disc;
  flex-direction: column;
  gap: 0.375rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem
}

#PostSectionBlog ul li strong {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600
}

#PostSectionBlog pre {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem
}

#PostSectionBlog img {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  max-width: 100%;
  border-radius: 0.5rem
}

@media (min-width: 768px) {
  #PostSectionBlog img {
    max-width: 70%
  }
}