html,
body {
  background-color: var(--clr-bg);
}

body {
  margin: 0;
  padding-left: 14vw;
  padding-right: 14vw;
  padding-top: calc(var(--padding) * 3) !important;
}

@media (max-width: 768px) {
  body {
    padding-left: var(--padding-site-lr);
    padding-right: var(--padding-site-lr);
  }
}

.title h2 {
  margin-bottom: 0rem;
  margin-top: 0rem;
}
.title {
  height: 5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.tags p {
  text-align: right;
  padding: 0;
  margin: 0;
  color: var(--clr-acc) !important;
}

.time-to-read {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  height: fit-content;
  align-items: start;
}
.time-to-read div {
  display: flex;
  flex-direction:row;
  gap: 0.8rem;
}
.time-to-read * {
  text-align: left;
  color: var(--clr-fg2) !important;
  margin: 0;
  padding: 0;
}
#share-btn:hover,
#share-btn:hover >* {
  color: var(--clr-acc) !important;
  cursor: pointer;

}

.tags .date {
  text-align: right;
  padding: 0;
  margin: 0;
  color: var(--clr-fg2) !important;
}

@media (max-width: 768px) {
  .tags p,
  .tags h4 {
    font-size: 0.8rem;
  }
}

.content li, ul, ol {
    padding-left: 1rem;
}

.content a {
  color: var(--clr-acc);
  text-decoration: underline;
}

.content code {
  background-color: var(--clr-mg2);
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}

pre {
  padding: 1rem;
  background-color: var(--clr-mg2);
}

pre code {
  color: var(--clr-acc);
  display: block;
  background-origin: padding-box;

  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* copy button for code elements */
pre button {
  margin: 0;
  font-family: var(--icon-font);
  font-size: 1.1rem;
  padding: 2px;
  padding-left: 5px;
  padding-right: 12px;
  position: absolute;
  cursor: pointer;
  background-color: var(--clr-bg);
  border: none;
}
/* related posts section --------------------------------------------------- */

.end-div {
  border: var(--border);
  background-color: var(--clr-fg2) !important;
  color: var(--clr-fg2) !important;
}

.related > * {
  color: var(--clr-fg2) !important;
}

.index {
  ul,
  ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  li .date {
    color: var(--clr-fg2);
    text-align: right;
  }

  li {
    background-color: var(--clr-mg2);
    padding: calc(var(--padding) / 3);
    border: var(--border);
    border-top: none;
    border-left: none;
    border-right: none;
    border-left: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: fit-content;
  }

  .tags {
    color: var(--clr-acc);
    padding: 0;
    margin: 0;
  }

  li:hover,
  .tags > *:hover,
  li:hover > * {
    background-color: var(--clr-mg);
    cursor: pointer;
  }
}