:root {
  /* Recommendation from: https://piccalil.li/blog/some-simple-ways-to-make-content-look-good/, with adaptive scaling between minor second to major second for larger screens from https://utopia.fyi/type/calculator/?c=320,16,1.067,1240,18,1.125,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --step--2: clamp(0.8784rem, 0.8747rem + 0.0183vw, 0.8889rem);
  --step--1: clamp(0.9372rem, 0.9154rem + 0.1092vw, 1rem);
  --step-0: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
  --step-1: clamp(1.067rem, 0.9979rem + 0.3454vw, 1.2656rem);
  --step-2: clamp(1.1385rem, 1.0392rem + 0.4962vw, 1.4238rem);
  --step-3: clamp(1.2148rem, 1.0801rem + 0.6731vw, 1.6018rem);
  --step-4: clamp(1.2962rem, 1.1202rem + 0.8798vw, 1.802rem);
  --step-5: clamp(1.383rem, 1.1589rem + 1.1205vw, 2.0273rem);
  --step-6: clamp(1.4757rem, 1.1956rem + 1.4001vw, 2.2807rem);
}



/* Skip to content link, https://www.youtube.com/watch?v=VUR0I5mqq7I */
.skip_link{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  translate: 0 -100%;
}
.skip_link:focus {
  translate: 0;
}

body {
  /* Industrial font set from https://modernfontstacks.com/ */
  font-family: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
  font-size: var(--step-0);
  /* https://www.w3.org/WAI/WCAG22/Understanding/text-spacing.html */
  line-height: 1.7;
  color: var(--text_color);
  background-color: var(--soil);
  background-image: url('texture.png'); /* https://www.transparenttextures.com/ */
  /* background-blend-mode: darken; */
}

.default_footer{
  background-color: var(--white);
  width: max-content;
  border-radius: 15px 50px;
  padding: 1em;
  margin-inline: auto;
}

header{
  h1 {
    line-height: 0.5;
    width: max-content;
    border-radius: 15px 50px;
    padding: 1em;
    text-align: center;
  }
}

/* Drop line height for headers, as recommened here: https://piccalil.li/blog/some-simple-ways-to-make-content-look-good/ */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.3;
}

/* Yeah text wrap balance is universal :D */
h1, h2, h3, h4, h5, h6, caption, figcaption {
    text-wrap:balance;
}


h1 {
  font-size: var(--step-6);
}

h2 {
  font-size: var(--step-5);
}

h3 {
  font-size: var(--step-4);
}

h4 {
  font-size: var(--step-3);
}

h5 {
  font-size: var(--step-2);
}

h6 {
  font-size: var(--step-1);
}

a { 
  /* https://adrianroselli.com/2016/06/on-link-underlines.html */
  text-decoration: underline; 
  /* Should be default behavior. Prevents collision with underlines when text goes below the line, like for p or q. Visually makes the underline appear "behind" the word. */
  text-decoration-skip-ink: auto; 
  /* Overwrites the link text being non-text color */
  color: var(--text_color);
  /* But retain the underline being a different color */
  text-decoration-color: var(--link_color);
  text-decoration-thickness: 0.3ex; /* Use of ex and scale suggested by https://piccalil.li/blog/some-simple-ways-to-make-content-look-good/ */
  text-underline-offset: 0.3ex;
}
a:hover, a:focus {
  text-decoration-thickness: 0.6ex;
  
}
a:focus {
  background-color: var(--bright_highlight);
}

a:visited {
  color: -var(--link_visited_color);
}

article {
  /* Follows recomendation of https://piccalil.li/blog/line-length/ */
  max-width: 65ch;
  /* "Centers" article in it's window */
  margin-inline: auto;
  background-color: var(--white);
  padding: 1em;
  border-radius: 15px 50px;
}

header{
  margin-bottom: 1em;
}
footer{
  margin-top: 1em;
}
/* Defaults two column layouts to stacked... */

.two_columns {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 1em; 
}

/* ...unless screen is sufficiently large. */
@media only screen and (min-width: 600px) {
    .two_columns {
        grid-template-columns: 3fr 1fr; 
    }
}

/* .column {
 } */

.toc {
  /* nesting the labels of an ordered list was suprisingly hard, and many solutions did not work abitrarly deep. Thankfully https://stackoverflow.com/a/58268621 provided this snippet that saved the day, and it seems this psuedo-element has largly been adopted, but webkit (that is, safari) is lagging behind (https://bugs.webkit.org/show_bug.cgi?id=204163). The fallback seems to be to what would be displayed without this, so I'm willing to accept that. */
  ::marker { content: counters(list-item,'.') ' ' } /* https://www.smashingmagazine.com/2019/07/css-lists-markers-counters/ */
  ol{
    background-color: var(--blue_green);
    border-radius: 15px 50px;
    list-style-position: inside;
  }
}