:root {
  --primary100: hsl(331, 99%, 86%);
  --primary300: hsl(331, 77%, 79%); /* f3a0c8*/
  --primary500: hsl(331, 57%, 59%); /* d25b94 */
  --primary700: hsl(331, 69%, 50%); /* d7287d */
  --primary900: hsl(331, 57%, 30%);

  --gray100: hsl(135, 94%, 97%);
  --gray300: hsla(331, 6%, 45%, 1);
  --gray500: hsla(331, 0%, 35%, 1);
  --gray700: hsla(331, 1%, 34%, 1);
  --gray900: hsla(331, 1%, 23%, 1);

  --secondary100: hsla(121, 29%, 70%, 1);
  --secondary300: hsla(121, 29%, 57%, 1); /* #72b173 */
  --secondary500: hsla(121, 48%, 57%, 1);
  --secondary900: hsla(121, 48%, 18%, 1);
}
* {
  box-sizing: border-box;
}

p {
  line-height: 1.45;
}

pre,
code {
  font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono",
    "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono",
    "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L",
    "Courier New", Courier, monospace;
  line-height: 1.5;
  display: inline-block;
}

/* Nav */
.nav {
  padding: 0;
  list-style: none;
  float: left;
  margin-left: 1em;
}
.nav-item {
  display: inline-block;
  margin-right: 24px;
}

.nav-item-active a {
  border-bottom: 6px solid var(--secondary300);
}

/* Posts list */

.postlist-post {
  margin-bottom: 16px;
}
.postlist-date {
  font-size: 16px;
  color: var(--gray300);
  margin-left: 24px;
}

.postlist-link {
  display: block;
  padding: 0.25em 0.1875em; /* 4px 3px /16 */
}
.postlist-item-active .postlist-link {
  font-weight: bold;
}

/* Tags */
/* but not the ones from prism/syntax highlighting plugin */
.tag:not(.token) {
  display: inline-block;
  margin-left: 8px;
  color: var(--gray900);
  border-radius: 8px;
  border: 2px solid var(--secondary100);
  text-decoration: none;
  font-size: 16px;
  padding: 2px 6px;
}

@media screen and (max-width: 800px) {
  .tag:not(.token) {
    margin-left: 0;
  }

  .postlist-date {
    margin-left: 0;
    margin-right: 6px;
  }
  
  .postlist-post {
    margin-bottom: 24px;
  }
}

.tag:not(.token):hover, .tag:not(.token):focus {
  background-color: var(--secondary100);
}

.post-tagslist {
  align-items: center;
}

.post-tagslist ul {
  margin-left: 0;
  margin-bottom: 0;
  list-style: none;
}

/* Direct Links / Markdown Headers */
.direct-link {
  font-family: sans-serif;
  text-decoration: none;
  font-style: normal;
  margin-left: 0.1em;
}
a[href].direct-link,
a[href].direct-link:visited {
  color: var(--lightgray);
}
a[href].direct-link:focus,
a[href].direct-link:focus:visited,
:hover > a[href].direct-link,
:hover > a[href].direct-link:visited {
  color: var(--gray);
}

.center-block {
  margin: auto auto;
  display: block;
}


.flex-row {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px 2px;
}

ul#tagsContainer {
  margin-left: 0;
}

#tagsContainer li {
  list-style: none;
}

.margin-bottom {
  margin-bottom: 10px;
}

img { 
  max-inline-size: 100%;
  block-size: auto;
}