/* --- base.css --- */

/* --- Courier New font switch --- */
html[data-font="courier"] p,
html[data-font="courier"] li,
html[data-font="courier"] aside p {
  font-family: var(--my-font-courier);
}

:root {
  --my-font-default: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

html {
  background-color: var(--my-bg);
  color: var(--my-text1);
  overflow-x: hidden;
  scroll-behavior: smooth;
  width: 100%;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.125rem;
  transition-duration: 0.25s;
}

body {
  background-color: var(--my-bg);
  font-family: var(--my-font-default);
  font-size: 1.1em;
  margin: 0;
}

aside {
  line-height: 1.5;
  margin: 2rem;
  text-align: justify;
}

img {
  display: block;
  height: auto;
  margin-top: 2rem;
  max-width: 100%;
  overflow: hidden;
}
ul {
  color: var(--my-text1);
}

ul.custom li::marker {
  color: var(--my-accent1);
  margin-right: 1rem;
}

ul.custom {
  list-style-type: square;
}

ul li:not(:last-child) {
  margin-bottom: 1rem;
}

/* --- Headings --- */

h1,
h2,
h3,
h4,
h5,
h6 {
  scroll-margin-top: 1rem; /* adjust to match your fixed header height */
}

h1 {
  margin-bottom: 1rem;
  text-align: center;
  width: 100%;
}

/* --- Handle h4 without para */
h4 + h2 {
  margin-top: 1rem;
}
/* --- Defined Elements --- */

.red-letters {
  color: red;
}

.memorial {
  font-size: larger;
  text-align: center;
  width: 100%;
}

/* Set subtitle */
#subtitle-span {
  text-align: center;
  width: 100%;
}

/* Set page slab */
#page {
  background-color: var(--my-bg-page);
  margin: 2rem auto;
  margin-bottom: 0;
  max-width: 70ch;
  padding: 2rem;
}

/* Set no slab on mobile */
@media (max-width: 768px) {
  #page {
    /* background: transparent; */
    box-shadow: none;
    margin: 0;
    max-width: none;
    padding: 1rem;
  }
}