/* Colors */
:root {
  --lightgray: #e0e0e0;
  --gray: #c0c0c0;
  --darkgray: #333;
  --navy: #17050f;
  --blue: #082840;
  --lightblue: #68bbe3;
  --white: #fff;
  --mono: Iosevka SS09, Iosevka, 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;
  --sans: -apple-system, system-ui, sans-serif;
  --serif: Palatino, Palatino Linotype, Palatino LT STD, Book Antiqua, Georgia,
    serif;
  --width: 700px;
}

@media (max-width: 700px) {
  :root {
    --width: 100%;
  }
  header nav,
  main {
    width: 90% !important;
  }
  header {
    background-size: cover !important;
  }
  header nav {
    height: auto !important;
    background-size: 50px 50px !important;
    background-position: top left !important;
    padding-bottom: 15px !important;
  }
  header nav a {
    padding: 0 0 0 5px !important;
  }
  header nav .home a {
    padding-left: 55px !important;
  }
}

/* Global stylesheet */
html,
body,
div,
p,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
blockquote,
table {
  font-size: 20px;
  box-sizing: border-box;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

p {
  margin: 1em 0;
}

small {
  font-size: 80% !important;
  opacity: 0.8;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--sans);
  position: relative;
}

h1,
h2,
h3 {
  font-size: 200%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 1em 0;
  font-weight: normal;
}

hr {
  display: block;
  padding: 0;
  height: 4px;
  border: none;
  background: var(--lightgray);
  width: 90%;
  margin: 1em auto;
}

html,
body {
  padding: 0;
  margin: 0;
  font-family: var(--serif);
  color: var(--darkgray);
}
header {
  font-family: var(--sans);
  background: var(--white) url(/rainbow-rock.jpg) top center;
  background-size: 100% 150px;
  background-repeat: no-repeat;
}
header nav,
main {
  width: var(--width);
  margin: 0 auto;
}
p:last-child {
  margin-bottom: 0;
}
p,
.tmpl-post li,
img {
  max-width: var(--width);
}
p,
.tmpl-post li {
  line-height: 1.45;
}
a[href] {
  color: var(--blue);
}
a[href]:visited {
  color: var(--navy);
}
main {
  padding: 1px 0 100px;
  margin: -1px auto;
  width: var(--width);
}

table {
  margin: 1em 0;
}
table td,
table th {
  padding-right: 1em;
}

pre,
code {
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.5;
}
h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
  font-size: inherit;
}
pre {
  font-size: 14px;
  line-height: 1.375;
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  -moz-tab-size: 2;
  -o-tab-size: 2;
  tab-size: 2;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  padding: 1em;
  margin: 0.5em 0;
  background-color: #f6f6f6;
}
p > code,
li > code {
  padding: 1px 2px;
  background: #efefef;
  border-radius: 4px;
  color: #500;
}
.highlight-line {
  display: block;
  padding: 0.125em 1em;
  text-decoration: none; /* override del, ins, mark defaults */
  color: inherit; /* override del, ins, mark defaults */
}

/* allow highlighting empty lines */
.highlight-line:empty:before {
  content: " ";
}
/* avoid double line breaks when using display: block; */
.highlight-line + br {
  display: none;
}

.highlight-line-isdir {
  color: #b0b0b0;
  background-color: #222;
}
.highlight-line-active {
  background-color: #444;
  background-color: hsla(0, 0%, 27%, 0.8);
}
.highlight-line-add {
  background-color: #45844b;
}
.highlight-line-remove {
  background-color: #902f2f;
}

/* Header */
header nav ul,
header nav li,
header nav a {
  font-size: 16px;
  text-decoration: none;
  display: inline-block;
  line-height: 46px;
  height: 46px;
  margin: 0;
  padding: 0;
}
header nav li {
  padding: 0 0.5em;
}
header .home {
  font-weight: bold;
  padding: 0;
  display: inline-block;
  font-size: 1em;
  margin: 0;
  padding: 0;
}
header nav a {
  padding: 0 0.5em;
}
header nav .home a {
  padding: 0 0 0 55px;
}
header nav a:active,
header nav a:hover,
header nav a:focus {
  text-decoration: underline;
}

header nav {
  height: 50px;
  margin: 0 auto;
  border-radius: 25px;
  background: #e0e0e0;
  border: 2px solid magenta;

  box-sizing: border-box;
  width: var(--width);

  display: block;
  position: relative;
  background: #e0e0e0 url(/headshot-50.jpg) left center;
  background-size: contain;
  background-repeat: no-repeat;
}

header {
  padding: 50px 0;
  box-sizing: border-box;
}

/* Nav */
header nav ul {
  padding: 0;
  list-style: none;
  display: inline-block;
  margin: 0;
}
header nav ul li {
  display: inline-block;
  margin: 0;
}

/* Posts list */
.postlist {
  border-collapse: collapse;
  width: var(--width);
}
.postlist a {
  text-decoration: none;
}
.postlist a:hover {
  text-decoration: underline;
}

.postlist td:first-child {
  width: 12ex;
  font-family: var(--mono);
  font-size: 16px;
}

.postlist-date {
  white-space: pre;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 16px;
  padding-right: 10px;
}

.postlist tr:hover {
  background: var(--lightgray);
}
.postlist tr {
  border: solid #ccc;
  border-width: 1px 0;
}
.postlist td {
  padding: 0;
}
.postlist td a {
  padding: 5px 0;
  margin: 0;
  display: block;
}

.post-footer * {
  color: var(--gray);
}
.post-footer a {
  text-decoration: none;
  color: var(--gray);
  color: inherit;
}
.post-footer a:visited {
  color: inherit;
}
.post-footer a:hover,
.post-footer a:active,
.post-footer a:focus {
  text-decoration: underline;
}

.post-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 2px solid #ccc;
  font-size: 12px;
  font-family: var(--sans);
  padding: 1px 4px;
  margin: 2px;
  text-decoration: none;
}

.post-date {
  border-color: var(--lightblue);
}

.post-tag:hover,
.post-tag:active,
.post-tag:focus {
  background: #ccc;
  text-decoration: underline;
}

main nav ul {
  display: block;
  list-style-type: disc;
  margin: 0;
  padding-inline-start: 40px;
}

main nav {
  border-top: 4px solid var(--lightgray);
  padding: 1em 0;
  margin: 1em 0;
}

blockquote {
  margin: 1em 0;
  padding: 0;
  padding-left: 1em;
  border-width: 0 0 0 4px;
  border-style: solid;
  border-color: var(--lightgray);
  border-radius: 5px;
}
.tiktok-embed {
  margin: 0;
  padding: 0;
  padding-left: 0;
  border: none;
}

/* Direct Links / Markdown Headers */
.direct-link {
  font-family: var(--sans);
  text-decoration: none;
  font-style: normal;
  margin-left: 0.1em;
}
a[href].direct-link,
a[href].direct-link:visited {
  position: absolute;
  top: 0;
  right: 100%;
  color: transparent;
}
a[href].direct-link:focus,
a[href].direct-link:focus:visited,
:hover > a[href].direct-link,
:hover > a[href].direct-link:visited {
  color: #aaa;
}

pre.poem {
  font-family: serif;
  white-space: pre-wrap;
  font-size: 1em;
  padding-left: 1em;
}

.pullquote {
  font-style: italic;
  font-size: 1.5em !important;
  font-family: var(--serif);
  margin: 1em -1em;
  background: #eee;
  border-radius: 5px;
  padding: 0 1em;
}
.pullquote p {
  padding: 0;
  margin: 0;
  font-size: inherit !important;
}
.pullquote p em {
  font-weight: bold;
}
@media (max-width: 800px) {
  .pullquote {
    margin: 1em 0;
    padding: 0 0.5em;
    width: 100%;
  }
}
@media (min-width: 950px) {
  .pullquote.right,
  .pullquote.left {
    float: right;
    margin: 0 -4em 0 1em;
    padding: 0 1ex;
    width: 50%;
    text-align: right;
  }
  .pullquote.left {
    float: left;
    margin: 0 1em 0 -4em;
    text-align: left;
    border-width: 0 4px 0 0;
  }
}