#blogsNav {
  height: fit-content;
  width: 100%;
  max-width: 1920px;
}

#blogsNav ul {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;

}

#blogsNav li {
  width: 100%;
  height: fit-content;
}

#blogsNav a {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  height: fit-content;
  background-color: var(--elementBackgroundColor);
  border: var(--elementBorderColor) solid 2px;
  transition: filter 0.2s linear;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: clamp(var(--defaultFontSize), calc(8px + .7vw), 64px);
  font-weight: 700;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.5;
  border-radius: 3px;
}

#blogsNav p {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
}

#blogsNav span {
  width: 100%;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0px;
}

#blogsNav time {
  font-style: italic;
  font-weight: normal;
  font-size: var(--defaultFontSize);
  font-family: Arial, Helvetica, sans-serif;
}

#blogsNav i {
  font-size: clamp(30px, calc(10px + 1vw), 64px);
}

#blogsNav a:focus-visible {
  outline: var(--focusColor) solid var(--focusSize);
  outline-offset: calc(var(--focusSize) * -1);
  filter: brightness(1.2);
}

#blogsNav a:hover {
  filter: brightness(1.2);
}

#blogsNav a:active {
  filter: brightness(1.4);
}

  @media (prefers-reduced-motion: reduce) {
    #blogsNav a {
      transition: none;
    }
  }

  @media (max-width: 950px) {
    #blogsNav a:hover {
      filter: brightness(1);
    }
  }