/* Blog Formatting. */
.blog {
  background: var(--blog-bg);
  margin: 8px;
  padding: 16px;
  border: var(--main-bg);
}
.dark-theme .blog {
  background: var(--blog-bg-dark);
  border: var(--main-bg-dark);
}

.blog p,
.blog li {
  font-size: 18px;
}
.blog img {
  /* styled via ".img-container img" */
}

.blog.listing {
  padding: 0px;
}

.blog.listing h1 {
  font-size: 19px !important;
  padding: 8px;
  border: none;
  background: #f0f0f0;
}
.dark-theme .blog.listing h1 {
  background: #303030;
  border: none;
}

.blog.listing img {  /* When image is listed. */
  display: block;
  float: right;
  width: 35%;
  height: auto;
  aspect-ratio: 16/9;
  min-height: 140px;
  border-radius: 0px;
  padding: 2px;
  margin-top: 0px;
  margin-bottom: 0px;
  background: #d8d8d8;
  border: 1px solid #a0a0a0;
  object-fit: none;  /* Shows a cropped view! */
}
.blog.listing p {
  padding-top: 0px;
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 0px;
}
.dark-theme .blog.listing img {
  background: #303030;
  border: 1px solid #181818;
}

.blog h1 {
  padding: 12px;
  margin-top: 0px;
  margin-bottom: 0px;
  background: #f0f0f0;
  border-right: 1px solid #00000040;
  border-bottom: 1px solid #00000040;
}
.blog h1 a,
.blog h1 a:visited {
  text-decoration: none;
}
.dark-theme .blog h1 {
  color: #d0d0d0 !important;
  background: #303030;
  border-top: 1px solid #ffffff20;
  border-left: 1px solid #ffffff20;
  border-right: 1px solid #00000040;
  border-bottom: 1px solid #00000040;
}
.dark-theme .blog h1 a,
.dark-theme .blog h1 a:visited {
/* text-decoration: underline solid; */
}
.dark-theme .blog h1 a:hover {
  color: #ea00ff !important;
  text-decoration: underline;
}

.blog .detail {
  text-align: right;
  font-size: 16px;
  font-weight: 200;
  color: #707070;
  margin-bottom: 10px;
  background: #d8d8d8;
  background: linear-gradient(180deg, #d8d8d8, var(--blog-bg));
  padding-top: 6px;
}
.blog .detail b {
  color: #e8e8e8;
  background: #808080;
  padding: 2px;
  padding-left: 4px;
  padding-right: 4px;
}
.dark-theme .blog .detail {
  background: none;
}
.dark-theme .blog .detail b {
  color: #000000;
  background: #a0a0a0;
}

/* Blog Navigation. */
.blog-navigation {
  display: table;
  width: 100%;
  margin: 0px;
  padding: 8px;
  padding-top: 0px;
}

/* Blog Navigation Buttons. */
.blog-navigation a {
  display: table-cell; /* Make elements inside the container behave like table cells */
  background: #e0e0e0 !important;
  color: #202020 !important;
  cursor: pointer;
  padding: 0px 16px;
  height: 50px;
  font-size: 20px;
  font-weight: 800;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  width: 1%;             /* Forces the minimum width. */
  white-space: nowrap;   /* Forces the minimum width. */
  border: none;
  border-right: 1px solid #00000080;
  border-bottom: 1px solid #00000080;
}
.blog-navigation a:hover {
  background: #404040 !important;
  color: #e0e0e0 !important;
}
.blog-navigation a i {
  font-size: 32px;
}

/* Blog Navigation Info. */
.blog-navigation div {
  display: table-cell; /* Make elements inside the container behave like table cells */
}