@import "https://unpkg.com/@lumeland/ds@0.5.2/ds.css";
/* Lume's design system */
/* Custom components */
.navbar {
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  row-gap: 1rem;
  justify-content: space-between;
  padding: 2rem min(5vw, 5rem);
  align-items: center;
}
.navbar-links {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
  font: var(--font-ui-bold);
  align-items: center;

  & [aria-current="page"] {
    text-decoration: none;
  }
}
.navbar-search {
  padding: 0 1em;
  margin-left: auto;
  display: flex;
  align-items: center;
}
.navbar-home {
  text-decoration: none;
}
.page-header {
  margin-bottom: var(--row-gap-medium);

  & > p:first-child {
    margin-top: 0;
  }
}
.page-title {
  font: var(--font-display);
  letter-spacing: var(--font-display-spacing);
  margin: 0;
  text-wrap: balance;
  color: var(--color-base);
}
.page-navigation {
  margin-bottom: var(--row-gap-medium);

  & ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
  }

  & h2 {
    font: var(--font-body-bold);
    letter-spacing: var(--font-body-spacing);
    margin: 0.5em 0;
  }
}
.page-pagination {
  border-top: solid 1px var(--color-line);
  margin-top: var(--row-gap-medium);
}
.postList {
  list-style: none;
  padding: 0;

  & article.post + article.post {
    margin-top: var(--row-gap-medium);
  }
  & li.post + li.post {
    margin-top: var(--row-gap-small);
  }

  & .post-header {
    margin-bottom: var(--row-gap-xsmall);
  }

  & .post-details {
    font: var(--font-small);
  }

  & .post-title {
    font: var(--font-title);
    letter-spacing: var(--font-title-spacing);
    display: block;

    & a {
      text-decoration: none;
    }
  }
}
.post-header {
  margin-bottom: var(--row-gap-small);
}
.post-title {
  font: var(--font-display);
  letter-spacing: var(--font-display-spacing);
  margin: 0 0 0.2em;
  text-wrap: balance;
  color: var(--color-base);
}
.post-details {
  display: flex;
  flex-flow: row wrap;
  row-gap: 1em;
  -moz-column-gap: 0.5em;
       column-gap: 0.5em;
  align-items: center;
  font: var(--font-small);
  color: var(--color-dim);

  & p {
    margin: 0;
  }

  & p::after {
    content: "•";
    padding-left: 0.5em;
    align-self: stretch;
  }

  & p:last-of-type {
    margin-right: 0.5em;

    &::after {
      display: none;
    }
  }

  & a {
    color: inherit;
  }
}
.post-tags {
  display: flex;
  flex-flow: row wrap;
  gap: 0.5em;
  align-items: center;
}
.post-link {
  display: inline-block;
}
/* Make the links black */
:root {
    --color-link: var(--color-base);
    --color-link-hover: var(--color-dim);
    --theme-background: midnightblue;
}
/* Page layout */
main {
padding: var(--row-gap-medium) 0;
max-width: min(100% - 15vw, 45em);
margin: 0 auto;

& > :first-child {
    margin-top: 0;
}
}
/* Search tweak */
.search {
margin-top: var(--row-gap-xsmall);
}
body, p {
  font-family: "Nunito", sans-serif;
}
.page-title, .post-title {
    font-family: "Nunito", serif;
    font-size: 150%;
    font-weight: bold;
}
a {
    font-family: "Nunito", serif;
    font-size: 100%;
}
p
{
/* wrap long text and urls */
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
word-wrap: break-word; /* IE 5+ */
}
pre {
    white-space: pre-wrap; /* For preformatted text including original texts */
    overflow-x: auto; /* Allow scroll if wrapping isn't enough */
  }
code {
    white-space: pre-wrap; /* For inline code blocks */
  }
code[class*="language-"] {  /* Target specific code blocks if needed */
    white-space: pre-wrap;
    overflow-x: auto;
      display: block;
      /* padding: .5em;
      color: #383a44;
      background: #fafafa; */
  }
.navbar.rainbow-animated {
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet, red, orange, yellow, green, blue, indigo, violet); /* Repeated colors for seamless loop */
    background-size: 200% 100%; /* Double the size to allow seamless transition */
    animation: rainbowWave 10s linear infinite; /* Apply the animation */
}
@keyframes rainbowWave {
    0% {
        background-position: 0% 50%; /* Start from the left */
    }
    100% {
        background-position: 100% 50%; /* End at the right */
    }
}
/* Mobile Portrait Styling */
@media (max-width: 767px) and (orientation: portrait) {
    body, p {
      font-size: 0.85rem; /* Smaller font size for mobile */
      }
  }
footer {
    font-size: 0.8em;
    text-align: center;
    margin-top: 2em;
    padding: 1em;
    border-top: 1px solid var(--color-line);
    color: var(--color-dim);
  }
footer a {
    color: var(--color-primary);
  }
blockquote {
    opacity: 0.15; /* Start mostly transparent - adjust as needed */
    transition: opacity 0.3s ease-in-out; /* Smooth fade effect */
    border-left: 5px solid #ccc; /* Keep border slightly visible as a cue */
    padding-left: 1em;
    margin-left: 0; /* Adjust layout as needed */
    cursor: default; /* Standard cursor */
  }
blockquote:hover {
    opacity: 1; /* Fully visible on hover */
    cursor: help; /* Optional: change cursor to indicate interactivity */
  }
/* Optional: Make contained elements less opaque initially too */
blockquote > * {
     /* You might not need this depending on the effect of blockquote opacity */
     /* opacity: inherit; /* Inherit the blockquote's opacity */
  }
blockquote:hover > * {
    /* Ensure contents are fully opaque when parent is hovered */
    /* opacity: 1; */
  }
/* Dark theme background color */
html[data-theme="dark"] {
      --color-base: white;
      --color-text: #f0f0f0;
      --color-dim: #999;
      --color-primary: #789;
      --color-line: #333;
      --color-highlight: #111;
      background: var(--theme-background); /* Apply to <html> */

  /* Add variable for code text color in dark theme */
  --color-code-text: var(--color-text); /* Use the general dark theme text color */
  /* Or you could define a specific light color if needed, e.g., --color-code-text: #f0f0f0; */      

  }
html[data-theme="dark"] body {
          background: var(--theme-background); /* Apply to <body> as well to ensure it is covered */
      }
html[data-theme="dark"] main {
      background: transparent; /* Ensure main content doesn't double-cover the page */
      }
/* Light theme background color */
html[data-theme="light"] {
  --color-base: black; /* Example light theme values */
  --color-text: #333;
  --color-dim: #666;
  --color-primary: #456;
  --color-line: #ccc;
  --color-highlight: #eee;
  background: var(--theme-background-light); /* Apply to <html> */
/* --- MINIMAL ADDITION FOR LIGHT THEME HERE --- */
--color-code-text: var(--color-text); /* Use standard text color for code in light theme */
 
/* Or you could define a specific dark color if needed, e.g., --color-code-text: #000; */
/* --------------------------------------------- */
.language-text {
color: lime;  
}  
}
html[data-theme="light"] body {
  background: var(--theme-background-light); /* Apply to <body> */
}
html[data-theme="light"] main {
  background: transparent; /* Ensure main content doesn't double-cover */
}
/* Apply the theme-specific code text color */
pre code,
code {
    color: var(--color-code-text);
}
/* Styles the poetry blocks to use a standard font and wrap long lines */
pre {
  font-family: inherit; /* Use the same font as the parent element */
  white-space: pre-wrap;  /* Allows long lines to wrap instead of overflowing */
  word-break: break-word; /* Helps break very long words if needed */
  background: none;       /* Removes any default grey background */
  border: none;           /* Removes any default border */
  padding: 0;             /* Removes any default padding */
  margin-top: 0;          /* Removes space above the verse block */
  margin-bottom: 1em;     /* Adds a standard space below the verse block */
}