:root {
  --font: 'Courier New', Courier, monospace;
  /* --mobile-width: 600px; */
}
[data-theme="light"] {
  --color-bg: hsl(0, 0%, 95%);
  --color-font: hsl(0, 0%, 27%);
  /* --color-anchor: hsl(210, 100%, 40%); */
  --color-anchor: hsl(34, 70%, 50%);
  --table-header-border-thickness: 2px;
  --global-ui-filter: invert(51%) sepia(61%) saturate(728%) hue-rotate(354deg) brightness(95%) contrast(87%);
}
[data-theme="dark"] {
  --color-bg: hsl(0, 0%, 11%);
  --color-font: hsl(0, 0%, 95%);
  /* --color-anchor: hsl(212, 100%, 60%); */
  --color-anchor: hsl(34, 62%, 45%);
  --table-header-border-thickness: 2px;
  --global-ui-filter: invert(53%) sepia(45%) saturate(1000%) hue-rotate(354deg) brightness(91%) contrast(85%);
}
body.switched {transition: color 0.6s, background-color 0.6s}
body {
  background-color: var(--color-bg);
  color: var(--color-font);
  font-family: var(--font);
  margin: 40px auto;
  /* max-width: 650px; */
  max-width: 800px;
  line-height: 1.6;
  font-size: 18px; /* try 1.15rem rather than 18px */
  padding: 0 10px;
}
h1, h2, h3, h4 {
  line-height: 1.2;
  color: var(--color-anchor);
  margin-bottom: -1rem;
}
dt, legend {font-weight:bold}
dt {text-decoration: underline}
figcaption {
  text-align: center;
  font-style: italic;
  font-size: 0.9rem;
}
caption {
  font-weight: bold;
  margin-bottom: 10px;
}
fieldset {padding: 10px}
a {
  color: var(--color-anchor);
  text-underline-offset: 4px;
}
button {
  font-family: var(--font);
  color: var(--color-bg);
  background-color: var(--color-font);
  border-radius: 2px;
}
mark {
  color: var(--color-font);
  background-color: var(--color-anchor);
}
::selection {
  color: var(--color-font);
  background-color: var(--color-anchor);
}

/* Footers */
footer {
  text-align: center;
  p {margin-bottom: -1rem;}
  div {margin-bottom: -1rem;}
}

/* Icons and logos */
.icon {
  fill: var(--color-anchor);
  position:relative;
  display: inline;
  text-align: center;
  /* width: 100%; */
  height: 100%;
  width: 1em;
  /* NB in html, viewBox="0 0 HeightInSVGFile WidthInSVGFile" */
  /* for "global ui" icons, this is viewBox="0 0 800 800"*/
}
.global-ui {
  filter: var(--global-ui-filter)
}

/* Copyright date automation: yeah it makes it superfluous, but people think an old copyright year means an outdated website */
.copyright:after {
  content: "© 2025 Walmo. All rights reserved."; /* probably should automate this TODO */
}

/* move the next line up by reducing the padding (margin) */
.close-under {margin-bottom: -1rem}

/* Tables */
table {
  border-collapse: collapse;
  margin-left: auto;
  margin-right: auto;
}
th, td {border: 1px dashed var(--color-font);}
th {border-bottom: var(--color-font) var(--table-header-border-thickness) solid}
.row-table th {
  border-bottom: 1px dashed var(--color-font);
  border-right: var(--color-font) var(--table-header-border-thickness) solid;
}
/* Easy Headerless Tables */
.grid {
  display: grid;
  grid-template-columns: auto auto auto;
  text-align: center;
}
/* uncomment this when I want to style the simple headerless table */
.grid div {
  border: 1px dashed var(--color-font);
  margin: -1px 0 0 -1px;
}
.grid-caption{
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Responsive page column assignment */
.two-column {column-count: 2;}
@media (max-width: 600px) {
  .two-column {column-count: 1;}
}

/* Footnotes */
sup a {text-decoration: none} /* in-text footnote anchors */
#footnotes {
  font-size: 0.8em;
  text-align: left;
  ol {list-style-type: decimal;}
  a {text-decoration: none;}
}

/* Auto-number headings, optional */
.auto-number {counter-set: HeadCount1 0 HeadCount2 0 HeadCount3 0} /* Initialize counters, allows you to reset the counter more than once on a page */
.auto-number h2:before {
	content: counter(HeadCount1)") ";
	counter-increment: HeadCount1
}
.auto-number h2 {counter-set: HeadCount2 0 HeadCount3 0}
.auto-number h3:before {
	content: counter(HeadCount1)"." counter(HeadCount2)") ";
	counter-increment: HeadCount2
}
.auto-number h3 {counter-set: HeadCount3 0}
.auto-number h4:before {
	content: counter(HeadCount1)"." counter(HeadCount2)"." counter(HeadCount3)") ";
	counter-increment: HeadCount3
}

/* Blog styles */
.indent-p p {text-indent: 4%}
.drop-cap p:first-child::first-letter {
  /* color: var(--color-anchor); */
  font-weight: bold;
  initial-letter: 2; /* 2 lines drop height */
  padding-right: 1%;
} 
.drop-cap p:first-child{
  text-indent: 0%;
}
.subtitle {
  color: var(--color-anchor);
  font-style: italic;
  font-size: smaller;
  font-weight: bold;
}
.subtitle-date {
  font-style: italic;
  font-size: smaller;
}