:root {
  /* Light theme colors */
  --color-text-hover: #b91c3c;
  --color-border: black;
  --color-callout: #1e90ff;
  --color-text: #ece8c8;
  --color-text-muted: #737373;
  --color-text-meta: #999999;
  --color-background: #043441;
  --color-background-code: #f1f1f1;
  --color-background-pre: #ececec;
  --color-background-toc: #ececec;
  --color-background-draft: #f9f2f4;
  --color-header: #ffffed;
  --color-hover: #065063;

  --color-red: #e1536d;
  --color-yellow: #ebba71;
  --color-green: #8ec379;
  --color-teal: #71beb6;
  --color-blue: #5673ac;
  --color-purple: #aa92cb;

  /* Spacing and sizing */
  --content-padding: 1ch;
  --border-radius: 5px;
  --font-size-base: 20px;
  --line-height-base: 1.6;
  --line-height-content: 1.65;

  /* if you want light theme back later, change this */
  --color-text-dark: #043441;
  --color-text-hover-dark: #3dd458;
  --color-border-dark: white;
  --color-text-muted-dark: #dddddd;
  --color-background-dark: #ece8c8;
  --color-background-code-dark: #3a3a3a;
  --color-background-pre-dark: #272822;
  --color-background-toc-dark: #272822;
  --color-background-draft-dark: #0066ff;
}

/* MOST IMPORTANT LAYOUT STUFF */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color: var(--color-text);
  font-family: 'courier', 'Roboto Mono', 'Courier New', monospace;
  font-size: var(--font-size-base, 19px);
  line-height: var(--line-height-base, 1.6);
}

body {
  margin: 13px;
  background-color: var(--color-background);
/*  TODO this causes the awful fade, but also it really does look better this way*/
/*  transition: background-color 0.2s ease, color 0.2s ease;*/
}

.content {
  margin-bottom: 2em;
  margin-top:2em;
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px;
  padding-left: var(--content-padding, 1ch);
  padding-right: var(--content-padding, 1ch);

  /* fill the viewport so the footer always reaches the bottom */
  display: flex;
  flex-direction: column;
  /* 4em = the 2em top + 2em bottom margins above, which collapse outside this box */
  min-height: calc(100vh - 4em);
}

/* header's 1em top margin used to collapse with .content's 2em; flex disables collapsing */
.content > :first-child {
  margin-top: 0;
}

/* pushing the footer down to the bottom */
.content > footer {
  margin-top: auto;
}

/* else the poor kitty image gets stretched */
.content > img {
  align-self: flex-start;
}


/* Typography */
p {
  font-size:90%;
  font-family: 'arvo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: var(--line-height-content);
  margin: 0px;
  margin-bottom: 1rem;
}

/* LINKS */
a {
  color: var(--color-red);
}

a:hover,
a:focus {
  background-color: var(--color-hover);
  /* fake padding: box-shadow takes no layout space, so text never reflows */
  box-shadow: 0 0 0 3px var(--color-hover);
  border-radius:3px;
/*  outline: 2px solid var(--color-hover);*/
/*  outline-offset: 2px;*/
  transition: background 0.1s ease, transform 0.1s ease;
}

a:focus {
  outline-style: solid;
}


ul {
  margin:0px;
  padding-left:22px;
  margin-bottom:1.5rem;
  list-style-type: "▸   ";
}

ol {
  margin:0px;
  padding-left:20px;
  margin-bottom:1.5rem;
}

li {

  font-family:'arvo';
  font-size:90%;
}

/*  if there is a list immediately after a paragraph, get rid of the bottom margin. */
p:has(+ ul),
p:has(+ ol) {
    margin-bottom: 0;
}

figure {
  display:block;
  margin:0px;
  max-width:100%;

}

/* Images */
img {
  border-radius: var(--border-radius, 5px);
  margin-top:10px;
  margin-bottom:20px;
/*   max-width:100%; */
}


/* Code blocks */
code {
  background-color: #e1e1e1;
  padding: 0.1em 0.2em;
  border-radius: 3px;
  font-size: 0.9em;
}

pre {
  background-color: var(--color-background-pre, #ececec);
  line-height: 1.4;
  overflow-x: auto;
  padding: 1em;
  border-radius: var(--border-radius, 5px);
  border: 2px solid var(--color-border, #663399);
}

.highlight pre ::selection {
  background: rgba(255, 255, 255, 0.2);
  color: inherit;
}

pre code {
  background-color: transparent;
  color: inherit;
  font-size: 100%;
  padding: 0;
}


/* Header */
header {
  justify-content: space-between;
  align-items: center;
  /* Modern logical properties */
  margin-block: 1em;
  line-height: 2.5em;
  gap: 1rem;
}


/* Headings */
h1 {
    font-size: 1.55rem;
    line-height: 1.2;
    margin-top:0rem;
    margin-bottom:0.1rem;
}


h2, h3, h4, h5, h6 {
    margin-top: 0em;
    margin-bottom: 0em;
    line-height: 1.2;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-header)
}


h2 {
  font-size:1.35rem;
}

h3, h4, h5, h6 {
  font-size:1.15rem;
}

.removeMargin {
  margin:0px;
}

/*********************/
/*front page stuff I think?*/
/*********************/
.list {
  margin-bottom:1rem;
}

.list-item-link {
  all:unset;
  display: block;
  color: inherit;
  margin-bottom:1.35rem;
  margin-top:1rem;
  cursor: pointer;
  border-left: 3px solid var(--color-red);
  padding-left: 1rem;
}

.image-holder {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.thumbnail {
    border:none;
    border-radius:4px;
    max-width:175px;
    height:110px;
    margin-top:0.1rem;
    margin-bottom:0.1rem;
}

@media (max-width: 430px) {
    .image-holder {
        flex-direction:column;
    }

    .thumbnail {
        max-width:300px;
        max-height:180px;
        width:auto;
        height:auto;
    }
}

.thumbnail-div {
  align-items:center;
}

.list-item-link,
.list-item-link:hover,
.list-item-link:focus,
.list-item-link:visited {
  color: inherit;
}

.description-text {
  margin-top:0.1rem;
  margin-bottom:0px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}


/*********************/
/*post-specific things*/
/*********************/
.meta {
  color: var(--color-text);
  letter-spacing: -0.5px;
  font-size: 0.9em;
  margin-top:0.5rem;
  margin-bottom:0.5rem;
}

.post_title {
  color: var(--color-red);
}

.post-tags{
  color:var(--color-text);
  font-size: 0.9em;
}


.no-decor-li li {
  list-style-type: "";
  list-style: none;
}

.no-decor-li > li::before {
  content: none;
}

.post {
    font-size:100%;
    margin-bottom:0rem;
    font-family: "courier";
    color: var(--color-text);
}

.post::before {
    content: "▸";
}

p.post {
    position: relative;
    padding-left:5px;
}

/*  makes posts have the cool hover effect too */
p.post:hover,
p.post:focus-within {
    background-color: var(--color-hover);
    border-radius: 3px;
    outline: 2px solid var(--color-hover);
    outline-offset: 2px;
    transition: background 0.1s ease, transform 0.1s ease;
}

/* box already shows the highlight, so drop the inner link's duplicate one */
p.post a:hover,
p.post a:focus {
    background-color: transparent;
    box-shadow: none;
    outline: none;
}

/* stretch the link across the whole box to enlarge the clickable area */
p.post a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.posts {
  margin-bottom:1rem;
}

.page-item:empty {
  display:none;
}

.page-link {
  text-decoration:none;
}

.page-link:hover {
  text-decoration:underline;
}

/*********************/
/* art museum gallery */
/*********************/

.image_flex_box {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  row-gap:1%;
  margin-bottom:25px;
}

.art_image {
  max-height:300px;
  border:3.5px solid var(--color-header, #ffffed);
  border-radius:0;
  margin:12px;
}

.center {
  text-align:center;
}

.caption {
  text-align:center;
  margin-left:12px;
  margin-right:12px;
  max-width:300px;
}


/* Media queries for responsive design */
@media (max-width: 37.4em) {
  .content {
    /* Fallback for older browsers */
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    /* Modern logical properties */
    padding-inline: 0.5rem;
  }

  header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/*********************/
/* TOOLTIPS */
/*********************/
.term {
  position: relative;
  display: inline-block;
  border-bottom: 3px dotted var(--color-header);
  cursor: help;
  margin:0px;
}

.tooltip {
  position: absolute;
  display:block;

  bottom: 115%;
  left: 50%;
  transform: translateX(-50%);

  width: max-content;
  max-width: min(320px, 90vw);
  padding: 0.4rem 0.6rem;

  background: var(--color-background);
  border: 2px solid var(--color-header);
  color: var(--color-primary);
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 3px;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
  z-index: 1000;
}

@media (max-width: 600px) {
  .tooltip {
    left: 0;
    right: auto;
    transform: none;
  }
}

.term:hover .tooltip,
.term:focus-within .tooltip {
  opacity: 1;
}


/*********************/
/*SEARCH. But isn't there another stylesheet for search...?*/
/*********************/
kbd {
  border: 1px solid var(--color-border, #663399);
  border-radius: 4px;
  background-color: var(--color-background, #ffffff);
  font-size: 0.9em;
  padding: 0.1rem 0.35rem;
}

.search-status {
  margin-block: 1rem 0;
}

.search-status-empty,
.search-status-error {
  color: var(--color-text-muted, #737373);
}

.search-status-error {
  color: var(--color-text, #dc143c);
}

.search-results {
  list-style: none;
  padding: 0;
  margin-block: 1rem 0;
}

.search-results li {
  text-indent: 0;
  list-style-type: "";
}

.search-results > li::before,
.search-tag-list > li::before {
  content: none;
}

.search-result + .search-result {
  margin-block-start: 1rem;
}

.search-result-card {
  border: 1px solid var(--color-border, #663399);
  border-radius: var(--border-radius, 5px);
  background-color: var(--color-background, #ffffff);
  padding: 1rem;
}

.search-result-title {
  margin-block: 0 0.35rem;
}

.search-result-meta {
  color: var(--color-text-muted, #737373);
  font-size: 0.95em;
  margin-block: 0;
}

.search-result-snippet {
  margin-block: 0.75rem 0;
}

.search-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin-block: 0.75rem 0;
}

.search-tag-list li {
  text-indent: 0;
  list-style-type: "";
  list-style: none;
}

.search-tag {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-text, #dc143c);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  font-size: 0.9em;
}

.search-label {
  display: block;
  font-weight: bold;
  margin-block-end: 0.5rem;
}

.search-input {
  inline-size: 100%;
  border: 1px solid var(--color-header);
  border-radius: 4px;
  background-color: var(--color-background, #ffffff);
  color: var(--color-text, #232333);
  font: inherit;
  padding: 0.75rem 0.9rem;
}

.search-input:focus {
  outline: 2px solid var(--color-text, #dc143c);
  outline-offset: 2px;
}

.search-hint {
  color: var(--color-text-muted, #737373);
  font-size: 0.95em;
  margin-block: 0.75rem 0;
}

/* Search */
.search-page {
  display: grid;
  gap: 1.5rem;
}

.search-intro {
  margin-block-start: -0.5rem;
}

.search-panel {
  border-radius: var(--border-radius, 5px);
  padding: 1rem;
}

/*********************/
/* not sure what this does */
/*********************/
.title-text {
  color:var(--color-header);
  position:relative;
  display: inline-block;
  text-decoration: none;
  margin:0px;
  margin-bottom:10px;
  text-decoration-color: var(--color-red);
  font-size:1.9rem;
  line-height:1.6rem;
}

.headerStyling {
  display:flex;
  justify-content: space-between;
  font-weight: bold;
}

@media (max-width: 450px) {
  .title-text {
    font-size: clamp(1rem, 7.8vw, 1.65rem);
  }
}


/*********************/
/*header and nav*/
/*********************/

nav {
  line-height:2rem;
  margin-top:10px;
  line-height:1.5rem;
}

@media (width <= 688px) {
  nav {
    font-size: 17px;
  }
}

/*for the dark/light icon*/
svg {
  /* Fallback for older browsers */
  max-height: 1rem;
  max-width: 1rem;
  /* Modern logical properties */
  max-block-size: 1rem;
  max-inline-size: 1rem;
}


/*for the dark/light icon*/
.feather {
  /* Fallback for older browsers */
  width: 1.5rem;
  height: 1.5rem;
  /* Modern logical properties */
  inline-size: 1.5rem;
  block-size: 1.5rem;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  display: inline-block;
  vertical-align: middle;
}

.nav-toggle:hover,
.nav-toggle:focus {
  background-color: var(--hmphhh, #fce1e4);
  outline: 2px solid var(--hmphhh, #fce1e4);
  outline-offset: 2px;
  transition: background 0.1s ease, transform 0.1s ease;
}

.nav-toggle:focus {
  outline-style: solid;
}

.nav-toggle {
  /* Reset button styles */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  background: none;
  margin: 0;
  font: inherit;
  cursor: pointer;

  /* Custom styling */
  padding: 0.5rem;
  border-radius: 4px;
  margin-bottom:0.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-toggle {
  /* Ensure icon is always visible */
  color: var(--color-text, #232333);
}

.header-glow {
  display: inline-block;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;

}

.header-glow:hover, .header-glow:focus, .header-glow:active {
  -webkit-transform: scale(1.1) rotate(4deg);
  transform: scale(1.05) rotate(3deg);
  box-shadow: none;
    outline: 2px solid var(--color-hover);
    outline-offset: 2px;

}

/*  changing nav color */
.colorChangingNav > :nth-child(1) {
    color: var(--color-red);
}

.colorChangingNav > :nth-child(3) {
    color: var(--color-yellow);
}

.colorChangingNav > :nth-child(5) {
    color: var(--color-green);
}

.colorChangingNav > :nth-child(7) {
    color: var(--color-teal);
}

.colorChangingNav > :nth-child(9) {
    color: var(--color-purple);
}


/*********************/
/* one off land of hell */
/* please try and get rid of me if I'm not in use */
/*********************/
.marginbegone {
  margin-top:0px;
}

.alt-a {
  text-decoration:none;
}

.uncolored-a {
  color:inherit;
}

.nopadding {
  margin:0px;
  padding:0px;
}

time {
  color: var(--color-text);
  font-size: 0.9em;
}

.border {
  margin-inline: 0.5rem;
  border: 1px solid var(--color-border);
}



/*********************/
/*weird stuff land
/*********************/
blockquote {
  border-left: 3px solid var(--color-purple);
  padding-left: 1em;
  color: #bebba1;
  margin: 0;
  font-style: italic;
}


/* target the details element */
details { }

/* target the summary element */
details > summary { }

/* target the children of the summary element */
details > summary > * { }

/* target the content */
details > :not(summary) { }

/* Site and content elements */
.site-description {
  line-height:1;
  margin:0px;
  font-style:italic;
}

@media (width <= 688px) {
  .site-description {
    font-size: 17px;
  }
}

hr {
  /*  reset previous styles first because bruh i can't get this line to go away */
  all: unset;
  display: block;
  border-top: 0.17rem dashed var(--color-header);;
  padding:0px;
  margin-bottom:2rem;
  margin-top:2rem;
}

/* Tags */
.tags {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  list-style-type: none;
  list-style: none;
}


/*********************/
/* footer */
/*********************/
.footer-info {
  margin-top:2rem;
  display:flex;
  flex-direction:column;
}

.footer-nav{
  font-size: 90%;
  display:flex;
  flex-direction:row;
  gap:10px;
  flex-wrap:wrap;
  margin-right:0px;
      margin:auto;

}

.footer_separator{
  display:block;
}

.footer-image {
  margin:auto;
  text-align:center;
}

.footer-image p {
  font-family:"courier";
}

.footer-image img {
  margin:0px;
}

.star {
  height:22px;
  margin:0px;
}