:root {
  color-scheme: light;

  --text: #666;
  --text-heading: #666;
  --text-muted: silver;

  --bg-texture: url("/tidings/common/images/backgrounds/bg.gif");

  --bg-page: #F9F7F4;
  --bg-page-translucent: #F9F9F0C0;
  
  --bg-surface: #FFFFFF;
  --bg-surface-muted: #FAFAFA;
  --bg-highlight: #F2F2F0;
  
  --bg-accent: #FFFFE0;

  --bg-code: var(--bg-accent);

  --border: linen;
  --border-accent: bisque;
  --border-photo: white;
  --border-ruler: white;

  --link-highlight: rgba(255,220,100,.35);
  --focus-ring: #ffcc00;

  --line-color: rgba(0, 0, 0, 0.06);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --text: #E4DED3;
  --text-heading: #F5F2EC;
  --text-muted: #AAA39A;

  --bg-texture: none;

  --bg-page: #171614;
  --bg-page-translucent: rgba(23,22,20,.92);

  --bg-surface: #23211F;
  --bg-surface-muted: #2A2826;
  --bg-highlight: #4A443C;
  --bg-accent: #463B22;

  --bg-code: #2E2A21;

  --border: #625B4F;
  --border-accent: #544430;
  --border-photo: #555;
  --border-ruler: black;

  --link-highlight: rgba(230,190,80,.30);
  --focus-ring: #FFD45C;

  --line-color: rgba(230,190,80,.15);
}

:root {
  --outmost-max: 800px;
  --paragwidth: 60ch;
  --mainwidth: 85%;
  --hover-brightness: 0.9;
  --hover-contrast: 1.1;
  --hover-grayscale: 0%;
  --line-height: 1.75em;
  --cozy-font-size: 1.2rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}




.upnav {
  margin-top: 3rem;
  margin-bottom: 3rem;

  ul {
    list-style: none;
    width: fit-content;
    padding-inline-start: 0;
  }
  
  li {
    width: fit-content;
  }

  li:first-child:only-child:not(.quiet) {
    font-size: larger;
    color: var(--text);
    border-bottom: 3px solid var(--border);
    animation: appear .5s ease-out forwards;
    background: linear-gradient(to bottom, var(--bg-surface), var(--bg-page));
    padding: 0.2rem;
  }

  li:first-child {
    font-weight: bolder;
    margin: 2rem 0 1rem 0;
    color: var(--text-heading);
    line-height: 1.2;
    text-wrap: balance;
  }

  li:nth-child(2) {
    animation: appear .5s ease-out forwards;
    font-size: larger;
    color: var(--text);
    border-bottom: 3px solid var(--border);
    background: linear-gradient(to bottom, var(--bg-surface), var(--bg-page));
    padding: 0.2rem;
  }
}

.theme-toggle-container {
  margin: 2rem 0 0 2rem;
}

#theme-toggle {
  appearance: none;
  -webkit-appearance: none;

  border: 0;
  padding: 0;
  margin: 0;

  background: transparent;
  color: inherit;

  font: inherit;
  cursor: pointer;

  width: 2.5rem;
  height: 2.5rem;

  display: grid;
  place-items: center;

  border-radius: 50%;
}

#theme-toggle:hover {
  background: var(--bg-highlight);
}

#theme-toggle:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}



html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;

  overflow-y: scroll;
  scrollbar-gutter: stable;

  background-color: var(--bg-page);
  background-image: var(--bg-texture);
}

body {
  margin: 0;
  min-height: 100vh;

  color: var(--text);

  font-family:
    "Nunito",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  line-height: 1.5;

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}



h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 2rem 0 1rem 0;

  color: var(--text-heading);

  line-height: 1.2;
  text-wrap: balance;
}


ul,
ol,
dl,
blockquote {
  margin: 0;
}

p,
li {
  overflow-wrap: break-word;
  margin-bottom: 0.5rem;
}

p {
  margin: 0.4rem 0 0.4rem 0.4rem; 
  padding: 0.3rem 0.2rem 0.5rem 0.2;
  background-color: var(--bg-surface-muted);
  border: 4px var(--bg-surface-muted);
  border-radius: 4%;
}


a {
  color: inherit;
  text-decoration: none;

  background:
    linear-gradient(
      transparent 60%,
      var(--link-highlight) 60%
    );
}

a:hover {
  background: var(--bg-highlight);
}

a:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}



button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button.copy-link {
  all: unset;
  cursor: pointer;

  background:
    linear-gradient(
      transparent 60%,
      var(--link-highlight) 60%
    );
}

button.copy-link:hover {
  background: var(--bg-highlight);
}

button.copy-link:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

textarea {
  resize: vertical;
}



table {
  border-collapse: collapse;
  border-spacing: 0;
}


img {
  height: auto;
}






blockquote p {
  border-left: .2rem solid var(--border);
  padding-left: .5rem;
}



.inline-icon {
  display: inline;

  width: 16px;
  height: 16px;

  margin-left: .3em;

  vertical-align: baseline;
}

.bordered-photo { 
  background-color: var(--border-photo);
  border: .6rem solid var(--border-photo);
  max-width: 100%;
}

.gradient-boy {
  border-top: 3px solid var(--border);
  border-radius: 100%;
  background: linear-gradient(to bottom, var(--bg-surface), var(--bg-page));
  padding: 0.2rem;
}

.gradient-boy-dateline {
  background: linear-gradient(to bottom, var(--bg-surface), var(--bg-page));
  padding: 0.2rem;
}

main {
  max-width: var(--mainwidth);
  margin: 0 auto;
}



[hidden] {
  display: none !important;
}



@keyframes appear {

  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


footer {

  display: flex;
  justify-content: space-between;
  max-width: var(--paragwidth);
  margin: 5rem 0 3rem 0;
  color: var(--text-muted);

  .box {
    margin-left: 20%;
    text-align: left;
    border-top: 3px solid var(--border);
  }
}

@media (max-width: 399px) {

	:root {
	  --paragwidth: 60ch;
	  --mainwidth: 80vw;
	  --line-height: 1.75em;
	}

	body {
	  line-height: 1.5;
	}



	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
	  margin: 2rem 0 1rem 0;
	  line-height: 1.2;
	}

	ul,
	ol,
	dl,
	blockquote {
	  margin: 0;
	}

	p {
	  margin-bottom: 0.4rem;
	  background-color: var(--bg-surface-muted);
	}

	ul,
	ol {
	  padding-left: 1.5rem;
	}

	figure {
	  gap: 1.5rem;
	}

	figure picture img {
	  border: .3rem solid var(--border-photo);
	}

	figure figcaption li {
	  margin-bottom: .3rem;
	}

	blockquote p {
	  border-left: .2rem solid var(--border);
	  padding-left: .5rem;
	}


	.inline-icon {
	  display: inline;
	  width: 16px;
	  height: 16px;
	  margin-left: .3em;
	}

	.bordered-photo {
	  border: .5rem solid var(--border-photo);
	}

	.gradient-boy {
	  border-top: 3px solid var(--border);
	  border-radius: 100%;
	  padding: 0.2rem;
	}

	.gradient-boy-dateline {
	  padding: 0.2rem;
	}

	main {
	  max-width: var(--mainwidth);
	  margin: 0 auto;
	}

	footer {
	  .box {
	    margin: auto auto;
	  }
	}
}
figure {
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 0;
}

figure .catalog-photo {
  flex: 1 1 0;
  min-width: 0;
}

figure .catalog-photo img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: .4rem solid var(--border-photo);
  transition: filter .3s ease;
}



figure picture img {
  display: block;
  border: .6rem solid var(--border-photo);
  transition: filter .3s ease;
  max-width: 100%;
  height: auto;
}

figure picture img:hover {
  filter:
    grayscale(var(--hover-grayscale))
    brightness(var(--hover-brightness))
    contrast(var(--hover-contrast));
}

figure figcaption {
  height: fit-content;
  min-width: 10ch;
}

figure figcaption ul {
  margin: 0;
  padding: 0;
  width: fit-content;
  list-style: none;
}

figure figcaption li {
  margin-bottom: .5rem;
  line-height: 1.5rem;
}







.thumbnail-p {
  container-type: inline-size;

  border-top: 2px solid var(--border-photo);
  border-bottom: 2px solid var(--border-photo);

  padding: .4rem 0;
  margin: 1rem 0;

  isolation: isolate;
}


.thumbnail-img {
  float: left;

  position: relative;

  margin: 0 1rem 0.5rem 0;

  background: var(--border-photo);
  border: .4rem solid var(--border-photo);

  z-index: 0;
}


.thumbnail-img::after {
  content: "";

  position: absolute;

  left: -.4rem;
  right: -.4rem;
  top: 100%;

  height: 1.5em;

  background: var(--border-photo);

  z-index: -1;

  pointer-events: none;
}


.thumbnail-img img {
  display: block;

  max-width: 150px;
  height: auto;
}


.thumbnail-p p {
  margin: 0;

  font-size: var(--cozy-font-size);
  line-height: 1.5;
}


@container (max-width: 24rem) {
  .thumbnail-img {
    float: none;

    width: fit-content;

    margin: 0 0 .75rem 0;
  }

  .thumbnail-img::after {
    display: none;
  }
}


@media (max-width: 400px) {
  figure {
    flex-direction: column;
  }

  figure .catalog-photo,
  figure figcaption {
    width: 100%;
  }

  figure figcaption ul {
    width: 100%;
  }
}

@font-face {
  font-family: "Nunito";
  src: url("/tidings/common/fonts/nunito-v32-latin_latin-ext/nunito-v32-latin_latin-ext-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("/tidings/common/fonts/nunito-v32-latin_latin-ext/nunito-v32-latin_latin-ext-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: "Nunito";
  src: url("/tidings/common/fonts/nunito-v32-latin_latin-ext/nunito-v32-latin_latin-ext-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("/tidings/common/fonts/nunito-v32-latin_latin-ext/nunito-v32-latin_latin-ext-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("/tidings/common/fonts/nunito-v32-latin_latin-ext/nunito-v32-latin_latin-ext-500italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}


@font-face {
  font-family: "Nunito";
  src: url("/tidings/common/fonts/nunito-v32-latin_latin-ext/nunito-v32-latin_latin-ext-700italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}





.outmost {
  background: var(--bg-page);

  border: 1px solid var(--border-accent);
  border-radius: 33px;

  box-sizing: border-box;

  margin: 1rem auto;
  padding: 0 2rem;

  min-height: 100vh;
}


.injected-markdown {
  border-left: 4px solid var(--border-ruler);
  margin: 1rem auto 2rem auto;

	p {
	  margin:0.2rem;
	  color: var(--text);
	  font-size: var(--cozy-font-size);
	  padding-bottom: 1rem;

	  code {
	    font-size: 0.8rem;
	  }

	  line-height: var(--line-height);

	  background:
	    repeating-linear-gradient(
	      to bottom,
	      transparent 0,
	      transparent calc(var(--line-height) - 1px),
	      var(--line-color) calc(var(--line-height) - 1px),
	      var(--line-color) var(--line-height)
	    ),
	    var(--bg-page);
	}

	  .no-bottom {
	    padding-bottom: 0;
	  }

	.injected-markdown figure {
	  display: block;
	  width: 100%;
	  margin: 2rem auto;
	}

	.injected-markdown figure picture {
	  display: block;
	  width: 100%;
	}

	.injected-markdown figure img {
	  display: block;
	  width: 100%;
	  max-width: 100%;
	  height: auto;
	}

	.injected-markdown figure figcaption {
	  text-align: center;
	}

}

#resumen {
  font-size: smaller;
}

.lead-in {
  display: inline-block;
  margin-top: 3rem;
  color: var(--text);
  border-bottom: 3px solid var(--border);
  animation: appear .5s ease-out forwards;
}



.latest-tabular {

  display: inline-flex;
  flex-direction: column;

  gap: 1rem;

  padding: .6rem 0;

  border-radius: 4px;

  h2 {
    margin-top: 2rem;
    text-decoration: underline;
  }

  h3 {
    margin-top: 1rem;
    margin-bottom: .4rem;
  }

}



.series-group {

  margin: 0;

  td {

    padding: 2px .4rem 0 0;

  }

  td:not(:first-child) {

    font-weight: bold;

  }
  
  td .list-subtitle {
    font-weight: normal;
  }

}


.series-header {
}

.section-footer,
.series-footer {
  margin-top: 3rem;

  p {
    margin-top: .7rem;
  }

  .taglist {
    display: flex;
    flex-wrap: wrap;
    gap: .4em;
    margin-bottom: 2rem;
  }

  .taglist span {
    padding: .1em .5em;
    border-radius: .4em;
    background: var(--bg-surface-muted);
    font-variant-caps: small-caps;
  }
}


.list-of-section {
  color: var(--text);
  table {
    margin: .5rem 0 2rem;
    border-collapse: separate;
    border-spacing: 8px;
  }
  td {
    padding: .2rem .5rem;
    border-radius: 4px;
    background: var(--bg-accent);
  }
}


.list-of-series {
  color: var(--text);
  width: 100%;
  margin: 3rem 0;

  ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.5rem;
    margin: .5rem 0 2rem;
    padding: 0;
    list-style: none;
  }

  li {
    display: block;
    margin: 0;
    padding: 0.2rem 0.2rem;
    list-style: none;
    background-color: var(--bg-surface-muted);
  }

  li a {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    gap: .4rem;
    width: 100%;
    min-width: 0;
    padding: .35rem;
    border-radius: 4px;
    background: transparent;
  }

  li a:hover {
    background: var(--bg-highlight);
  }

  .series-arc {
    span {	  
      justify-self: start; 
    }
  }

  picture {
    display: block;
    overflow: hidden;
  }

  img {
    border-radius: 10%;
    display: block;
    width: 128px;
    height: auto;
    object-fit: contain;
  }

  li a span {
    min-width: 0;
    padding: 0 .35rem .35rem;
    text-align: center;
    overflow-wrap: break-word;
  }
}






.sermon {

  max-width: var(--parag-width);

  margin-inline: auto;
  margin-block: 1.5rem;

  box-sizing: border-box;

  summary {
    margin-top: 2rem;
  }

  .donation-button {
    margin-top: 1rem;
  }

}


.catalog-pages {
  
  list-style: none;
  margin: 0.5rem 0;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  gap: 1rem .4rem; /* row-gap column-gap */

  li {
    padding: .2rem .4rem;
    border-radius: 4px;
    background: var(--bg-highlight);
  }
}


.imgtitle {

  display: inline-block;

  margin-left: .4rem;
  margin-bottom: 2rem;

  text-transform: uppercase;

}



.tech-warning {

  margin-top: 2rem;
  margin-left: .3rem;

}


.server-info {

  margin-top: 3rem;
  padding-top: .4rem;

  border-top: 2px dashed var(--border-accent);

}

.section-table-date {
    min-width: 8ch;
}


.client-list ul {

  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;

  li {
    font-weight: 300;
  }

  li:nth-child(even) {
    font-weight: 500;
  }
}



.book-list {
}


.book-year {
  margin-top: 2rem;
}

.book-type {
  h4 {
    margin-top: 1.2rem;
  }
}

.book-entry {

  margin-top: 1rem;
  margin-left: 1.5rem;

}


.book-data {

  display: inline-block;

  margin: 0;
  padding: 0;

  list-style: none;

  li:first-child span {

    background: var(--bg-accent);

  }

  .author {
    font-style: italic;
  }

}


.book-comment {

  margin: 0;
  padding: 0;

}

@media (min-width: 400px) {

  .outmost {
    width: 85vw;
    max-width: var(--outmost-max);
  }

}

@media (max-width: 399px) {

  html {
      background-image: none;
  }
  .outmost {
    padding: 0 0.2rem;
    margin: 0;
    width: 100%;
    border: 0;
    border-radius: 0;
  }

	.list-of-section {
	  table {
	    padding: 0;
	    margin: .6rem 0 2rem 0;
	    border-collapse: separate;
	    border-spacing: 8px;
	  }
	  td {
	    vertical-align: top;
	    margin-bottom: .8rem;
	    padding: 0 .5rem;
	    border-radius: 4px;
	    background: var(--bg-accent);
	  }
	}


  .list-of-series li a {
    grid-template-columns: 1fr;
    gap: .4rem;
    padding: 0;
  }

  .list-of-series li a picture,
  .list-of-series li a img {
    width: 100%;
  }

  .list-of-series li a img {
    display: block;
    height: auto;
  }

  .list-of-series li a span {
    padding: 0 .35rem .35rem;
    text-align: center;
  }


}

header {

  display: flex;
  max-width: var(--paragwidth);
  margin: 0 auto;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;

  picture {
    margin-top: 0.8rem;
    border: 3px solid var(--border);
    img {
      border-radius: 0px;
    }
  }

  .topmenu {

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    a {
      font-size: 1rem;
      font-weight: normal;
      color: var(--text-muted);
    }

    .logobox {
      font-size: var(--cozy-font-size);
      font-weight: bold;
    }

    .landingpage-list {

      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;
      gap: .5rem;
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        margin: 0;
      }

      a {
        color: var(--text);
        font-weight: 500;
        border-radius: .25rem;
      }
    }
  }
}

.langtabs {

  display: inline-block;

  input.lang-selector {
    display: none;
  }

  label {
    font-size: smaller;
    font-weight: lighter;
    display: inline-block;
    cursor: pointer;
    padding: .2rem .3rem;
    border: 1px solid var(--border);
  }

}

.panel {
  display: none;
}


#english:checked ~ .english,
#spanish:checked ~ .spanish,
#french:checked ~ .french,
#german:checked ~ .german {
  display: block;
}

#english:checked ~ label[for="english"],
#spanish:checked ~ label[for="spanish"],
#french:checked ~ label[for="french"],
#german:checked ~ label[for="german"] {
  background: var(--bg-accent);
}


#english-alt:checked ~ .english-alt,
#spanish-alt:checked ~ .spanish-alt,
#french-alt:checked ~ .french-alt,
#german-alt:checked ~ .german-alt {
  display: block;
}
#english-alt:checked ~ label[for="english-alt"],
#spanish-alt:checked ~ label[for="spanish-alt"],
#french-alt:checked ~ label[for="french-alt"],
#german-alt:checked ~ label[for="german-alt"] {
  background: var(--bg-accent);
}







.langtabs-free {

  max-width: 68ch;
  margin: 0 auto;

  p {
    color: var(--text);
    font-size: var(--cozy-font-size);
    padding-bottom: 1rem;
  }

  p:first-child {
    padding-top: 1rem;
  }
}




.favlinks {
  margin: 2rem 0;
  padding: 0;

  ul {
    list-style: none;
    margin-bottom: 0.4rem;
    padding: 0;
  }

  li {
    display: inline;
    padding: .1rem .2rem;
  }

  li:first-child {
    font-size: smaller;
    font-variant: small-caps;
    font-weight: lighter;
  }

  li:nth-child(2) {
    background: var(--bg-surface);
    border-radius: 3px;
  }

  li:nth-child(3) {
    font-size: smaller;
    font-variant: small-caps;
    font-weight: lighter;
  }  

  .separator {
    background: var(--bg-accent);
  }

}



.single-hero, 
.double-hero {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 1rem;
  margin: 3rem 0;
}

.single-hero,
.double-hero > picture,
.double-hero > div {
  flex: 1 1 0;
  min-width: 0;
}

.double-hero > div {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.single-hero,
.double-hero picture {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.single-hero,
.double-hero picture img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 4%;
} 


/* Mobile */
@media (max-width: 599px) {

  .single-hero,
  .double-hero {
    flex-direction: column;
    align-items: center;
  }

  .single-hero,
  .double-hero > picture,
  .double-hero > div {
    width: 100%;
    flex: none;
  }

  .double-hero > div {
    flex-direction: column;
    align-items: center;
  }

  .single-hero,
  .double-hero picture {
    width: 100%;
    justify-content: center;
  }

  .single-hero,
  .double-hero picture img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}





/* ==========================================================
   Code layout
   ========================================================== */

pre.sourceCode,
.sourceCode {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: pre;
  box-sizing: border-box;
}

pre > code.sourceCode {
  white-space: pre;
  position: relative;
  display: block;
}


pre > code.sourceCode > span {
  display: inline-block;
  line-height: 1.25;
}


pre > code.sourceCode > span:empty {
  height: 1.2em;
}


code.sourceCode > span {
  color: inherit;
  text-decoration: inherit;
}


div.sourceCode {
  margin: 1.2rem 0;
  padding: .3rem .5rem;
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: .25rem;
  max-width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
}


/* Do not disable scrolling on pre */
pre.sourceCode {
  margin: 1.2rem 0;
  overflow-x: auto;
  overflow-y: hidden;
}


@media print {
  pre > code.sourceCode {
    white-space: pre-wrap;
  }

  pre > code.sourceCode > span {
    text-indent: -5em;
    padding-left: 5em;
  }
}

/* ==========================================================
   Syntax colours
   ========================================================== */


/* Alert */

code span.al {
  color: #ff0000;
  font-weight: bold;
}


/* Annotation */

code span.an {

  color: #60a0b0;

  font-weight: bold;

  font-style: italic;

}


/* Attribute */

code span.at {

  color: #7d9029;

}


/* BaseN */

code span.bn {

  color: #40a070;

}


/* Built-in */

code span.bu {

  color: #008000;

}


/* Control flow */

code span.cf {

  color: #007020;

  font-weight: bold;

}


/* Character */

code span.ch {

  color: #4070a0;

}


/* Constant */

code span.cn {

  color: #880000;

}


/* Comment */

code span.co {

  color: #60a0b0;

  font-style: italic;

}


/* Comment variable */

code span.cv {

  color: #60a0b0;

  font-weight: bold;

  font-style: italic;

}


/* Documentation */

code span.do {

  color: #ba2121;

  font-style: italic;

}


/* Data type */

code span.dt {

  color: #902000;

}


/* Decimal value */

code span.dv {

  color: #40a070;

}


/* Error */

code span.er {

  color: #ff0000;

  font-weight: bold;

}


/* Float */

code span.fl {

  color: #40a070;

}


/* Function */

code span.fu {

  color: #06287e;

}


/* Import */

code span.im {

  color: #008000;

  font-weight: bold;

}


/* Information */

code span.in {

  color: #60a0b0;

  font-weight: bold;

  font-style: italic;

}


/* Keyword */

code span.kw {

  color: #007020;

  font-weight: bold;

}


/* Operator */

code span.op {

  color: #666666;

}


/* Other */

code span.ot {

  color: #007020;

}


/* Preprocessor */

code span.pp {

  color: #bc7a00;

}


/* Special character */

code span.sc {

  color: #4070a0;

}


/* Special string */

code span.ss {

  color: #bb6688;

}


/* String */

code span.st {

  color: #4070a0;

}


/* Variable */

code span.va {

  color: #19177c;

}


/* Verbatim */

code span.vs {

  color: #4070a0;

}


/* Warning */

code span.wa {

  color: #60a0b0;

  font-weight: bold;

  font-style: italic;

}








@media (prefers-color-scheme: dark) {


code span.cf,
code span.kw,
code span.ot {

  color: #9cdc8a;

}


code span.fu,
code span.va {

  color: #9dbdff;

}


code span.st,
code span.ch,
code span.sc,
code span.vs {

  color: #d8b4ff;

}


code span.co,
code span.an,
code span.cv,
code span.in,
code span.wa {

  color: #a8a8a8;

}


code span.dt {

  color: #ffcc99;

}


code span.er,
code span.al {

  color: #ff8080;

}


code span.bn,
code span.dv,
code span.fl {

  color: #8fd3a8;

}


}



:root {
    /* Paper */

    /* Yellow */
    --sticky-bg-top-y:      #fff9b8;
    --sticky-bg-bottom-y:   #fff08c;

    /* Pale green */
    --sticky-bg-top-g:      #dff4c7;
    --sticky-bg-bottom-g:   #cfeaa9;

    /* Pale blue */
    --sticky-bg-top-b:      #d9efff;
    --sticky-bg-bottom-b:   #bfdfff;


    /* Texture */
    --sticky-highlight:   rgba(255,255,255,.18);
    --sticky-speckle:     rgba(0,0,0,.03);

    /* Text #4a4332 */
    --sticky-text:        var(--text-muted);

    /* Shadow */
    --sticky-shadow:      rgba(0,0,0,.18);

    /* Geometry */
    --sticky-radius:      3px;
    --sticky-rotation:    0deg;
}

/* Dark mode still looks like paper, just lit less brightly */
[data-theme="dark"] {

    /* Yellow */
    --sticky-bg-top-y:      #d4ca78;
    --sticky-bg-bottom-y:   #bcae52;
    --sticky-fold-y:        #9c8f45;

    /* Pale green */
    --sticky-bg-top-g:      #a8c38a;
    --sticky-bg-bottom-g:   #8fad6d;
    --sticky-fold-g:        #78945a;

    /* Pale blue */
    --sticky-bg-top-b:      #9dbed6;
    --sticky-bg-bottom-b:   #82a8c3;
    --sticky-fold-b:        #6d8fa8;

    --sticky-highlight:   rgba(255,255,255,.05);
    --sticky-speckle:     rgba(0,0,0,.08);

    --sticky-text:        #2a2418;

    --sticky-shadow:      rgba(0,0,0,.45);
    --sticky-fold-shadow: rgba(0,0,0,.35);
}


.sticky-note {
    position: relative;

    width: 11rem;
    min-height: 3rem;
    padding: 0.8rem;

    color: var(--sticky-text);

    line-height: 1.4;

    background:
        radial-gradient(circle at 22% 28%,
            var(--sticky-highlight) 1px,
            transparent 1px) 0 0 / 6px 6px,

        linear-gradient(
            180deg,
            var(--sticky-bg-top),
            var(--sticky-bg-bottom)
        );

    border-radius: 2px 5px 3px 4px / 3px 2px 5px 4px;

    transform: rotate(var(--sticky-rotation));

    box-shadow:
        3px 4px 10px var(--sticky-shadow),
        inset 0 1px 0 rgba(255,255,255,.4);
}


.sticky-note:nth-child(3n) {
    --sticky-rotation: 2deg;
}

.sticky-note:nth-child(3n + 1) {
    --sticky-rotation: -0.4deg;
}

.sticky-note:nth-child(3n + 2) {
    --sticky-rotation: -1deg;
}



.sticky-note.yellow {
    --sticky-bg-top:    var(--sticky-bg-top-y);
    --sticky-bg-bottom: var(--sticky-bg-bottom-y);
    --sticky-fold:      var(--sticky-fold-y);
}

.sticky-note.green {
    --sticky-bg-top:    var(--sticky-bg-top-g);
    --sticky-bg-bottom: var(--sticky-bg-bottom-g);
    --sticky-fold:      var(--sticky-fold-g);
}

.sticky-note.blue {
    --sticky-bg-top:    var(--sticky-bg-top-b);
    --sticky-bg-bottom: var(--sticky-bg-bottom-b);
    --sticky-fold:      var(--sticky-fold-b);
}


/* Fix <a> hover */

.sticky-note {
    position: relative;
    isolation: isolate; /* create a clean stacking context */
}

/* Keep note contents above the fold */
.sticky-note > * {
    position: relative;
    z-index: 1;
}

/* Fold stays visual only */
.sticky-note::after {
    pointer-events: none;
    z-index: 0;
}

.sticky-note a {
    color: #5b4a2f;
}

.sticky-note a:hover {
    color: #5b4a2f;
    background: rgba(255,255,255,.25);
}




.homepage-stickers {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.8rem;
  width: 100%;
}

/* push p down articially */
.reveal-paragraph {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 550ms ease-out,
    transform 550ms ease-out;
  will-change: opacity, transform;
}

/* enter viewport */
.reveal-paragraph.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-paragraph {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Put border to mark horizontal overflow parts

* {
  outline: 1px solid rgba(255, 0, 0, 0.05);
}

html {
  overflow-x: hidden;
}

*/