VvebOIDC/public/themes/blog-default/css/blog.css

.post {
  margin-bottom: 0rem; }
  .post .post-archive-item {
    margin-bottom: 2rem; }
  .post h1, .post h2, .post h3, .post h4, .post h5, .post h6 {
    line-height: 1.4;
    font-weight: bold;
    color: var(--bs-body-color);
    word-break: break-word; }
  .post .post-title, .post .post-title {
    text-decoration: none;
    color: var(--bs-body-color); }
    .post .post-title:hover, .post .post-title:hover {
      text-decoration: underline; }
  .post .post-content {
    font-size: 1.2rem;
    line-height: 1.6;
    font-family: var(--bs-font-sans-serif); }
    .post .post-content > * {
      margin-bottom: 1rem; }
    .post .post-content > p, .post .post-content > h1, .post .post-content > h2, .post .post-content > h3, .post .post-content > h4, .post .post-content > h5, .post .post-content > h6, .post .post-content > blockquote, .post .post-content > span, .post .post-content > ul, .post .post-content pre, .post .post-content > ol {
      max-width: 35rem;
      margin-left: auto;
      margin-right: auto; }
    .post .post-content h1, .post .post-content h2 {
      font-weight: 600; }
    .post .post-content blockquote {
      font-style: italic;
      padding-bottom: 3px;
      padding-right: 20px;
      padding-left: 20px;
      letter-spacing: .01rem;
      border-left: 4px solid var(--bs-border-color);
      margin-top: 2rem;
      margin-bottom: 2rem; }
      .post .post-content blockquote > p:before, .post .post-content blockquote > p:after {
        font-family: 'Line Awesome Free';
        font-weight: 900;
        font-style: normal; }
      .post .post-content blockquote > p:before {
        content: "\f10d "; }
      .post .post-content blockquote > p:after {
        content: " \f10e"; }
      .post .post-content blockquote i {
        font-size: 2rem;
        color: var(--bs-gray); }
    .post .post-content q:before, .post .post-content q:after {
      font-family: 'Line Awesome Free';
      font-weight: 900;
      font-style: normal; }
    .post .post-content q:before {
      content: "\f10d "; }
    .post .post-content q:after {
      content: " \f10e"; }
    .post .post-content img, .post .post-content svg, .post .post-content video {
      vertical-align: middle;
      max-width: 100%;
      margin: 0 auto;
      height: auto; }
    .post .post-content iframe {
      vertical-align: middle;
      max-width: 100%;
      margin: 0 auto;
      display: block; }
    .post .post-content div.iframe {
      display: flex;
      justify-content: center;
      position: relative; }
    .post .post-content .align-left {
      margin-right: 1rem; }
    .post .post-content .align-right {
      margin-left: 1rem; }
    .post .post-content pre {
      padding: 0 1rem 1rem;
      background: var(--bs-secondary-bg); }
      .post .post-content pre code {
        background: transparent; }
  .post .align-left {
    float: left;
    margin-bottom: 25px;
    max-width: 50%;
    margin: .5em 1em .5em 0; }
  .post .align-right {
    float: right;
    margin-bottom: 25px;
    max-width: 50%;
    margin: .5em 0 .5em 1em; }
  .post .align-center {
    margin-left: auto;
    margin-right: auto; }
  .post img.align-center {
    display: block; }
  .post figure.align-center {
    display: table; }
  .post .tags, .post .comments-form, .post .post-comments {
    max-width: 35rem;
    margin-left: auto;
    margin-right: auto; }
  .post .card-header {
    margin-bottom: 0rem; }
  .post .card-footer {
    /* padding: 0.5rem 1rem; */
    padding: 0 0rem 1rem; }
  .post .post-meta {
    list-style: none;
    text-align: center;
    margin-bottom: 2rem; }
    .post .post-meta li {
      margin-right: 1rem;
      display: inline-block;
      margin-top: 0.5rem;
      color: var(--bs-body-color); }
      .post .post-meta li i {
        font-size: 1.4rem;
        line-height: 1;
        vertical-align: top; }
      .post .post-meta li a {
        text-decoration: none;
        color: var(--bs-body-color); }
        .post .post-meta li a:hover {
          text-decoration: underline; }

.single-blog-post-thumb {
  position: relative;
  max-height: 300px;
  overflow: hidden; }
  .single-blog-post-thumb .title-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-content: center;
    align-items: center;
    text-align: center;
    z-index: 1;
    padding: 5rem 0 0rem; }
    .single-blog-post-thumb .title-container::before {
      width: 100%;
      height: 100%;
      content: " ";
      background: rgba(var(--bs-body-bg-rgb), 0.5);
      top: 0px;
      left: 0px;
      position: absolute;
      z-index: -1; }
    .single-blog-post-thumb .title-container h1 {
      width: 100%;
      z-index: 1; }
  .single-blog-post-thumb img {
    width: 100%;
    top: -30vw;
    position: absolute; }

/* comments */
.post-comments {
  position: relative; }
  .post-comments a {
    text-decoration: none; }

.comment-author-avatar {
  position: absolute;
  left: -5rem;
  min-width: 60px;
  background: var(--bs-secondary-bg);
  min-height: 60px; }

.comment {
  position: relative; }
  .comment.level-1 {
    margin-left: 1rem; }
  .comment.level-2 {
    margin-left: 2rem; }
  .comment.level-3 {
    margin-left: 3rem; }

.site-header {
  display: flex;
  flex-direction: column;
  position: relative; }
  .site-header .background {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transform: none; }
    .site-header .background img {
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      object-fit: cover; }
    .site-header .background:before {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      width: 100%;
      height: 100%;
      background-color: #000;
      background-color: var(--bs-body-bg);
      opacity: 0.7;
      z-index: 5; }
  .site-header .title-container {
    position: relative;
    margin-top: auto;
    z-index: 100; }