@import "../markdown.css";

@media (prefers-color-scheme: light) {
  :root {
    --tag-bg-color: #d2e0f0;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --tag-bg-color: #242e38;
  }
}

:root {
  --max-width: 750px;
}

body {
  max-width: var(--max-width);
  margin: auto;
}

/* Post title */
header h1 {
  font-size: calc(var(--font-size) * 2);
}

/* Post date */
header span {
  font-style: italic;
}

/* Post tags */
header > ul:last-of-type {
  display: inline;
  margin-left: 1em;
  padding: 0;
}

header > ul:last-of-type li::before {
  content: "#";
}

header > ul:last-of-type li {
  display: inline;
  background: var(--tag-bg-color);
  border-radius: 5px;
  padding: 2px 8px;
  font-size: calc(var(--font-size) * 0.9);
}

/* Post */
main {
  margin: 0;
  padding-block: 0;
  max-width: 100%;
}

/* Images */
img {
  max-width: var(--max-width);
}

/* Code */
kbd,
code {
  font-family: monospace;
}

/* Table of content */
nav#toc {
  position: fixed;
  top: 0;
  left: 25px;
  margin-left: 50px;
}

/* breakpoint */
@media only screen and (max-width: 1500px) {
  /* Visible only on large screens */
  nav#toc {
    visibility: hidden;
  }
}