/* latin */
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  src: url(/fonts/inconsolata-latin-300-normal.woff2) format('woff2'), url(/fonts/inconsolata-latin-300-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  src: url(/fonts/inconsolata-latin-ext-300-normal.woff2) format('woff2'), url(/fonts/inconsolata-latin-ext-300-normal.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* vietnamese */
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  src: url(/fonts/inconsolata-vietnamese-300-normal.woff2) format('woff2'), url(/fonts/inconsolata-vietnamese-300-normal.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* latin */
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  src: url(/fonts/inconsolata-latin-600-normal.woff2) format('woff2'), url(/fonts/inconsolata-latin-600-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  src: url(/fonts/inconsolata-latin-ext-600-normal.woff2) format('woff2'), url(/fonts/inconsolata-latin-ext-600-normal.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* vietnamese */
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  src: url(/fonts/inconsolata-vietnamese-600-normal.woff2) format('woff2'), url(/fonts/inconsolata-vietnamese-600-normal.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* latin */
@font-face {
  font-family: 'Radio Canada';
  font-style: italic;
  font-weight: 300;
  font-stretch: 100%;
  src: url(/fonts/radio-canada-latin-300-italic.woff2) format('woff2'), url(/fonts/radio-canada-latin-300-italic.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Radio Canada';
  font-style: italic;
  font-weight: 300;
  font-stretch: 100%;
  src: url(/fonts/radio-canada-latin-ext-300-italic.woff2) format('woff2'), url(/fonts/radio-canada-latin-ext-300-italic.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* vietnamese */
@font-face {
  font-family: 'Radio Canada';
  font-style: italic;
  font-weight: 300;
  font-stretch: 100%;
  src: url(/fonts/radio-canada-vietnamese-300-italic.woff2) format('woff2'), url(/fonts/radio-canada-vietnamese-300-italic.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* latin */
@font-face {
  font-family: 'Radio Canada';
  font-style: italic;
  font-weight: 600;
  font-stretch: 100%;
  src: url(/fonts/radio-canada-latin-600-italic.woff2) format('woff2'), url(/fonts/radio-canada-latin-600-italic.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Radio Canada';
  font-style: italic;
  font-weight: 600;
  font-stretch: 100%;
  src: url(/fonts/radio-canada-latin-ext-600-italic.woff2) format('woff2'), url(/fonts/radio-canada-latin-ext-600-italic.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Radio Canada';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  src: url(/fonts/radio-canada-latin-300-normal.woff2) format('woff2'), url(/fonts/radio-canada-latin-300-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Radio Canada';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  src: url(/fonts/radio-canada-latin-ext-300-normal.woff2) format('woff2'), url(/fonts/radio-canada-latin-ext-300-normal.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Radio Canada';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  src: url(/fonts/radio-canada-latin-600-normal.woff2) format('woff2'), url(/fonts/radio-canada-latin-600-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Radio Canada';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  src: url(/fonts/radio-canada-latin-ext-600-normal.woff2) format('woff2'), url(/fonts/radio-canada-latin-ext-600-normal.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Briem Hand';
  font-style: normal;
  font-weight: 200;
  font-stretch: 100%;
  src: url(/fonts/briem-hand-latin-200-normal.woff2) format('woff2'), url(/fonts/briem-hand-latin-200-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* greek-ext */
@font-face {
  font-family: 'Briem Hand';
  font-style: normal;
  font-weight: 200;
  font-stretch: 100%;
  src: url(/fonts/briem-hand-greek-ext-200-normal.woff2) format('woff2'), url(/fonts/briem-hand-greek-ext-200-normal.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* latin-ext */
@font-face {
  font-family: 'Briem Hand';
  font-style: normal;
  font-weight: 200;
  font-stretch: 100%;
  src: url(/fonts/briem-hand-latin-ext-200-normal.woff2) format('woff2'), url(/fonts/briem-hand-latin-ext-200-normal.woff) format('woff');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Briem Hand';
  font-style: normal;
  font-weight: 200;
  font-stretch: 100%;
  src: url(/fonts/briem-hand-cyrillic-ext-200-normal.woff2) format('woff2'), url(/fonts/briem-hand-cyrillic-ext-200-normal.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* latin */
@font-face {
  font-family: 'Briem Hand';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  src: url(/fonts/briem-hand-latin-700-normal.woff2) format('woff2'), url(/fonts/briem-hand-latin-700-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* greek-ext */
@font-face {
  font-family: 'Briem Hand';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  src: url(/fonts/briem-hand-greek-ext-700-normal.woff2) format('woff2'), url(/fonts/briem-hand-greek-ext-700-normal.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* latin-ext */
@font-face {
  font-family: 'Briem Hand';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  src: url(/fonts/briem-hand-latin-ext-700-normal.woff2) format('woff2'), url(/fonts/briem-hand-latin-ext-700-normal.woff) format('woff');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Briem Hand';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  src: url(/fonts/briem-hand-cyrillic-ext-700-normal.woff2) format('woff2'), url(/fonts/briem-hand-cyrillic-ext-700-normal.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* latin */
@font-face {
  font-family: 'Shantell Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  src: url(/fonts/shantell-sans-latin-300-normal.woff2) format('woff2'), url(/fonts/shantell-sans-latin-300-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* cyrillic */
@font-face {
  font-family: 'Shantell Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  src: url(/fonts/shantell-sans-cyrillic-300-normal.woff2) format('woff2'), url(/fonts/shantell-sans-cyrillic-300-normal.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* latin-ext */
@font-face {
  font-family: 'Shantell Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  src: url(/fonts/shantell-sans-latin-ext-300-normal.woff2) format('woff2'), url(/fonts/shantell-sans-latin-ext-300-normal.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Shantell Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  src: url(/fonts/shantell-sans-cyrillic-ext-300-normal.woff2) format('woff2'), url(/fonts/shantell-sans-cyrillic-ext-300-normal.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/symbols.woff2) format('woff2');
}

@font-face {
  font-display: swap;
  font-family: "04b-praze";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/04b.woff");
}

@font-face {
  font-family: "Sparks-Dotline-Medium";
  src: url("/fonts/Sparks-Dotline-Medium.eot");
  src: url("/fonts/Sparks-Dotline-Medium.eot?#iefix") format("embedded-opentype"),
  url("/fonts/Sparks-Dotline-Medium.woff2") format("woff2"),
  url("/fonts/Sparks-Dotline-Medium.woff") format("woff"),
  url("/fonts/Sparks-Dotline-Medium.ttf") format("truetype"),
  url("/fonts/Sparks-Dotline-Medium.svg#Sparks-Dotline-Medium") format("svg");
  font-weight: normal;
  font-style: normal;
}

@keyframes bounce {
  0%,to {
    transform:translateY(-25%);
    animation-timing-function:cubic-bezier(.8,0,1,1)
  } 50% {
    transform:none;
    animation-timing-function:cubic-bezier(0,0,.2,1)
  }
}

@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}

@keyframes ld-slide-ltr-in /* from loading.io */
{
  0% {
    animation-timing-function: cubic-bezier(0.1006,0.3357,-0.2396,0.6703);
    transform: translate(-199%,0%);
    opacity: 0;
  }
  2% {
    animation-timing-function: cubic-bezier(0.2668,0.6542,0.5372,0.8035);
    transform: translate(-124.8%,0%);
    opacity: 1;
  }
  100% {
    transform: translate(0%,0%);
    opacity: 1;
  }
}

:root {
  --highlight-colour: #808080;
  --background-colour: #f2f2f2;
  --dot-colour: #d8d8d8;
  --text-colour: #0d0d0d;
  --tumblr-black: 0,0,0;
  --tumblr-white: 255,255,255;
  --sticky-green-main: 186,255,201;
  --sticky-green-fade: 140,197,152;
  --sticky-blue-main: 186,255,255;
  --sticky-blue-fade: 140,197,197;
  --sticky-orange-main: 255,223,186;
  --sticky-orange-fade: 197,170,140;
  --card-bg: #fff;
  --card-lines: #eee;
  --gradient-start: 238,174,202;
  --gradient-end: 148,187,233;
}

@media (prefers-color-scheme: dark) {
  :root {
    --highlight-colour: #f2f2f2;
    --background-colour: #0d0d0d;
    --dot-colour: #303030;
    --text-colour: #bfbfbf;
    --tumblr-black: 255,255,255;
    --tumblr-white: 34,34,34;
    --sticky-green-main: 0,102,22;
    --sticky-green-fade: 34,68,41;
    --sticky-blue-main: 0,102,102;
    --sticky-blue-fade: 34,68,68;
    --sticky-orange-main: 102,54,0;
    --sticky-orange-fade: 68,52,34;
    --card-bg: #303030;
    --card-lines: #595959;
  }
}

::-moz-selection { /* Code for Firefox */
  background: #ffffba;
}

::selection {
  background: #ffffba;
}

body {
  display: grid;
  gap: 5px;
  margin: 0;
  grid-template: 1fr 1fr / 200px minmax(700px,1fr);
  height: 98vh;
  background-color: var(--background-colour);
  background-image: radial-gradient(var(--dot-colour) 1.4px, var(--background-colour) 1.4px);
  background-size: 28px 28px;
  /* font-family: "Source Sans Pro", sans-serif; */
  font-family: "Radio Canada", sans-serif;
  color: var(--text-colour);
  line-height: 1.4;
}

h1, h2, h3 {
  font-weight: bold;
  font-family: "Briem Hand", sans-serif;
  text-transform: lowercase;
  color: var(--highlight-colour);
}

h1 i, h2 i, h3 i {
  font-style: normal;
}

section h1 {
  font-size: 2em;
}

h1, h2, h3 {
  display: inline;
  background: linear-gradient(144deg, rgba(var(--gradient-start),0.6) 0%, rgba(var(--gradient-end),0.6) 100%);
  background-repeat: no-repeat;
  background-size: 100% 30%;
  background-position: 0 95%;
}

h1:after, h2:after, h3:after {
  content: "\A";
  white-space: pre;
}

h2 code {
  font-family: inherit;
}

nav a, nav a:visited, div a, div a:visited {
  color: var(--highlight-colour);
  text-decoration: none;
  border-bottom: 2px dotted var(--highlight-colour);
}

#wolwebring a, #coloring a, .buttons a {
  border-bottom: none;
}

#coloring {
  font-family: "04b-praze" !important;
  margin: 0 !important;
}

#ficring img {
  max-width: 30vw;
}

a:hover {
  background: -webkit-linear-gradient(144deg, rgba(var(--gradient-end),1) 0%, rgba(var(--gradient-start),1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

p.date {
  display: inline-block;
}

code, time {
  font-family: "Inconsolata", monospace;
  background: rgb(var(--gradient-start));
  background: linear-gradient(144deg, rgba(var(--gradient-start),0.2) 0%, rgba(var(--gradient-end),0.2) 100%);
}

details code, blockquote code {
  background: linear-gradient(144deg, rgba(var(--gradient-start),1) 0%, rgba(var(--gradient-end),1) 100%);
  color: var(--background-colour);
}

a:has(span.rss) {
  border: none;
  text-decoration: none;
}

span.rss {
  color: white;
  font-family: "Inconsolata", monospace;
  font-weight: bold;
  padding: 0 4px;
  font-size: 0.8em;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  border-left: 1px solid var(--background-colour);
  border-top: 1px solid var(--background-colour);
  text-transform: uppercase;
  background-color: #e68a00;
}

span.rss:after {
  content: "RSS";
}

body.xsl nav span.rss {
  margin-left: 3px;
}

nav {
  z-index: 1;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 3;
  overflow: auto;
  margin: 20px 0 0 5px;
  height: fit-content;
  border-radius: 20px;
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  background-color: var(--card-bg);
  background-image:
    linear-gradient(var(--card-lines) .1em, transparent .1em);
  background-size: 100% 1.2em;
  font-family: "Shantell Sans", sans-serif;
}

div:has(main) {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
  overflow: auto;
}

main > section, main > .e-content > section, footer {
  max-width: 800px;
  margin: auto;
}

section.collection, section#records {
  max-width: unset;
  margin: auto 5px;
}

nav ul, footer ul {
  list-style-type: none;
  text-align: center;
  padding-left: 0;
  text-transform: lowercase;
}

nav > ul {
  margin-top: 0;
  max-width: 80vw;
}

nav > ul > li {
  font-weight: bold;
}

nav > ul > li > ul > li {
  font-weight: normal;
}

nav > ul > li {
  margin: 10px;
}

nav input {
  display: none;
}

nav label {
  display: block;
  background-color: var(--background-colour);
  font-weight: bold;
  font-family: "Briem Hand", sans-serif;
  text-transform: lowercase;
  color: var(--background-colour);
  font-size: 1.5em;
  margin: 0;
  background: rgb(var(--gradient-start));
  background: linear-gradient(144deg, rgba(var(--gradient-start),1) 0%, rgba(var(--gradient-end),1) 100%);
  text-align: center;
  margin-bottom: 0;
  padding: 1px 5px;
}

nav ul#catalogue li {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

ul#catalogue {
  margin-top: 5px;
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

ul#catalogue li {
  display: inline;
  border: 2px solid var(--highlight-colour);
  border-radius: 5px;
  padding: 1px 1px 1px 2px;
}

ul#catalogue li, ul#catalogue li * {
  vertical-align: middle;
}

ul#catalogue li:has(a:hover), ul#catalogue li a:hover, ul#catalogue li:has(a:hover) *, ul#catalogue li a:hover * {
  background: var(--highlight-colour);
  color: var(--card-bg);
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
}

ul#catalogue a {
  text-decoration: none;
}

a[href^="http"]:not(ul#catalogue a):not(:has(span.rss)):not(section#rings a):not(span#site a):not(span#fic a):not(:has(img)):after {
  content: "";
  width: 11px;
  height: 11px;
  margin-left: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='gray' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
}

section#updates *, blockquote#latest {
  text-transform: lowercase;
}

section#rings > div {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

section#rings * {
  text-transform: lowercase;
}

section#rings h2 {
  margin-bottom: 0;
}

div#fandomring {
  margin: 0;
  padding: 0;
}

div#fandomring td {
  padding: 0 !important;
}

ul#prazebuttons li:not(:last-child), details:not(:last-child), div#comments:not(:last-child), div.comments:not(:last-child) {
  margin-bottom: 5px;
}

ul#prazebuttons li img {
  vertical-align: middle;
  border:1px solid var(--text-colour);
}

p.buttons {
  text-align: center;
}

p.buttons img {
  vertical-align: middle;
  max-width: 300px;
}

a.pending img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

a.pending img:hover {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}

p, li {
  word-wrap: break-word;
}

main li::marker {
  color: var(--highlight-colour);
}

main li:hover::marker {
  font-weight: bold;
}

main ul li::marker {
  content: "❍ ";
}

main ul ul {
  padding-inline-start: 20px;
}

audio {
  border: 1px solid var(--text-colour);
  border-radius: 5px;
  background: var(--background-colour);
}

footer ul li::marker {
  content: "";
}

div#comments, div.comments {
  margin: 5px 0;
}

img.moji {
  vertical-align: middle;
}

details, blockquote, pre {
  padding: 2px 10px;
  margin: 10px auto;
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  max-width: 90%;
}

pre {
  padding: 2px 10px 10px;
}

details:before, blockquote:before, pre:before, .e-content div.figure:not(.twoup):not(.threeup):before {
  /* https://kalechips.net/projects/snippets/tape */
  content: "";
  display: block;
  height: 30px;
  margin: -15px auto auto;
  width: 200px;
  background-color: #dbd8be;
  border-right: 1px dotted #b7b49d;
  border-left: 1px dotted #b7b49d;
  opacity: 0.3;
  box-shadow: 0.5px 0.5px 1px rgba(0,0,0,0.2);
}

.e-content div.figure:before {
  transform: translateY(35px);
}

.e-content .twoup {
  position: relative;
}

.e-content .twoup:before, .e-content .twoup:after {
  content: "";
  background: url("/embed/star.webp");
  width: 50px;
  height: 48px;
  display: block;
  position: absolute;
}

.e-content .twoup:before {
  top: 5%;
  left: 5%;
}

.e-content .twoup:after {
  bottom: 5%;
  right: 5%;
}

details::-webkit-scrollbar, blockquote::-webkit-scrollbar, pre::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

details {
  font-family: "Shantell Sans", sans-serif;
  background: rgb(var(--sticky-green-main));
  background: linear-gradient(180deg, rgba(var(--sticky-green-main),1) 50%, rgba(var(--sticky-green-fade),1) 100%);
  padding-bottom: 10px;
}

details:open {
  padding-bottom: 2px;
}


details::-webkit-scrollbar-track {
  background: rgb(var(--sticky-green-main));
}

details::-webkit-scrollbar-thumb {
  background: rgb(var(--sticky-green-fade));
}


blockquote {
  font-family: "Shantell Sans", sans-serif;
  background: rgb(var(--sticky-blue-main));
  background: linear-gradient(180deg, rgba(var(--sticky-blue-main),1) 50%, rgba(var(--sticky-blue-fade),1) 100%);
}

blockquote::-webkit-scrollbar-track {
  background: rgb(var(--sticky-blue-main));
}

blockquote::-webkit-scrollbar-thumb {
  background: rgb(var(--sticky-blue-fade));
}

body#index main blockquote {
  width: fit-content;
}

details i, blockquote i, details em, blockquote em {
  font-style: normal;
  text-decoration: underline;
}

details b, blockquote b, details strong, blockquote strong {
  font-weight: 400;
  text-decoration: double underline;
}

details a, blockquote a, nav a {
  border: none;
  text-decoration: underline;
}

details small, blockquote small {
  font-family: "Radio Canada", sans-serif;
  font-size: 0.7rem;
}

details summary {
  font-family: "Briem Hand", sans-serif;
  cursor: pointer;
  background: linear-gradient(144deg, rgba(var(--gradient-start),0.8) 0%, rgba(var(--gradient-end),0.8) 100%);
  background-repeat: no-repeat;
  background-size: 100% 30%;
  background-position: 0 95%;
  display: inline;
  font-weight: bold;
}

pre {
  font-family: "Inconsolata", monospace;
  background: rgb(var(--sticky-orange-main));
  background: linear-gradient(180deg, rgba(var(--sticky-orange-main),1) 50%, rgba(var(--sticky-orange-fade),1) 100%);
  overflow-x: auto;
}

pre::-webkit-scrollbar-track {
  background: rgb(var(--sticky-orange-main));
}

pre::-webkit-scrollbar-thumb {
  background: rgb(var(--sticky-orange-fade));
}

div.comments.submission, div.comments.submit {
  padding: 2px;
  border: 1px solid var(--highlight-colour);
}


div.comments.submission h2, div.comments.submit h2 {
  background-color: var(--highlight-colour);
  font-weight: bold;
  font-family: "Briem Hand", sans-serif;
  text-transform: lowercase;
  padding: 2px;
  color: var(--background-colour);
  margin-top: 0;
  display: block;
  background: rgb(var(--gradient-start));
  background: linear-gradient(144deg, rgba(var(--gradient-start),1) 0%, rgba(var(--gradient-end),1) 100%);
}

div.comments {
  max-height: unset;
}

details#legend summary {
  font-size: 0.8em;
}

details#legend > div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 0;
}

details#legend figure {
  border: 1px solid var(--highlight-colour);
  text-align: center;
  font-size: 0.8em;
  padding: 3px;
  margin: 2px;
  background-color: var(--background-colour);
}

div.comments div#postprefs *, div.comments div#replyprefs * {
  display: inline;
  width: unset;
  margin: 0 2px;
  font-size: 0.8em;
}

div.comments div#postprefs label:not(:last-of-type), div.comments div#replyprefs label:not(:last-of-type) {
  margin-right: 7px;
}

div.comments:not(.submission) {
  font-size: 0.8em;
}

div.comments div.reply {
  margin-left: 10px;
  padding-left: 5px;
  border-left: 2px solid var(--highlight-colour);
}

div.comments div.reply span.replystring {
  color: var(--highlight-colour);
}

form#theform input, form#theform textarea {
  display: block;
  width: 100%;
  margin: 2px 0;
  padding: 2px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  color: var(--text-colour);
  background-color: var(--background-colour);
}

form#theform input, form#theform button {
  font-family: "Radio Canada", sans-serif;
}

form#theform textarea {
  font-family: "Inconsolata", monospace;
}

form#theform button {
  cursor: pointer;
  background: rgb(var(--gradient-start));
  background: linear-gradient(144deg, rgba(var(--gradient-start), 1) 0%, rgba(var(--gradient-end), 1) 100%);
  border: none;
  color: var(--background-colour);
  font-weight: bold;
  padding: 5px;
  border-radius: 4px;
}

form#theform button:hover {
  background: rgb(228, 164, 192);
  background: linear-gradient(144deg, rgba(228, 164, 192, 1) 0%, rgba(138, 177, 223, 1) 100%);
}

main img {
  max-width: 100%;
}

/*gifsets, but can’t i replace this with flexbox or something?*/
div.figure {
  text-align: center;
  padding: 0;
}

div.figure img {
  display: inline-block;
  margin: 5px;
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
}

div.figure.oneup img, div.figure img.noteimg {
  width: auto;
  height: auto;
  max-width: 90% !important;
}

div.figure.twoup img {
  width: 40%;
}

div.figure.threeup img {
  width: 30%;
}

/* fake tumblr post */

body.tumblr section:first-of-type {
  background-color: rgb(var(--tumblr-white));
  color: rgb(var(--tumblr-black));
  border: 1px solid rgba(var(--tumblr-black),.13);
  margin-top: 2px;
  border-radius: 8px;
  font-family: "Roboto", sans-serif;
}

body.tumblr section:first-of-type > div, body.tumblr section:first-of-type > #ogpost {
  padding: 0 16px;
}

body.tumblr section:first-of-type a {
  color: inherit;
  text-decoration: inherit;
  border: inherit;
}

body.tumblr section:first-of-type div#reblog, body.tumblr section:first-of-type div#opdeets {
  padding: 16px;
  display: flex;
  flex: 1;
  align-items: center;
  column-gap: 12px;
  flex-direction: row;
  cursor: pointer;
}

body.tumblr section:first-of-type div#reblog:hover, body.tumblr section:first-of-type div#opdeets:hover {
  background-color: rgba(var(--tumblr-black),.05);
}

body.tumblr section:first-of-type div#reblog div, body.tumblr section:first-of-type div#opdeets div {
  display: flex;
  flex-direction: column;
}

body.tumblr section:first-of-type div#reblog div *, body.tumblr section:first-of-type div#opdeets div * {
  margin: 0;
}

body.tumblr section:first-of-type div#reblog {
  border-bottom: 1px solid rgba(var(--tumblr-black),.13);
  border-radius: 8px 8px 0 0;
}

body.tumblr section:first-of-type #reblogged, body.tumblr section:first-of-type time {
  font-family: "Roboto", sans-serif;
  color: rgba(102,117,134,1);
  font-size: 0.8rem;
  background: inherit;
}

body.tumblr h1.p-name {
  display: none;
}

body.tumblr p#me, body.tumblr p#theop {
  font-weight: bold;
}

body.tumblr section:first-of-type ul {
  color: rgba(var(--tumblr-black),.65);
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: 4px;
}

body.tumblr section:first-of-type ul li {
  cursor: pointer;
}

body.tumblr section:first-of-type ul li::marker {
  content: "";
}

body.tumblr section:first-of-type ul li:hover {
  text-decoration: underline;
}

body.tumblr section:first-of-type ul li:before {
  content: "#";
}

.spark {
  font-family: "Sparks-Dotline-Medium";
  font-variant-ligatures: contextual;
  -moz-font-feature-settings: "calt";
  -webkit-font-feature-settings: "calt";
  font-feature-settings: "calt";
}

/* nav link hides */

body#index nav li#homelink a,
body#about nav li#aboutlink a,
body#interests nav li#interestlink a,
body#follow nav li#followlink a,
body#fic nav li#ficarchivelink a:first-of-type,
body#fic nav li#archivelink a,
body#music nav li#musiclink a,
body#music nav li#archivelink a,
body#archive nav li#archivelink a,
body#notes nav li#noteslink a,
body#sitemap nav li#maplink a,
body#trackers nav li#trackerlink a,
body#changelog nav li#changeloglink a:first-of-type {
  color: unset;
  text-decoration: none;
  pointer-events: none;
}

body#notes nav #catalogue #noteslink,
body#notes nav #catalogue #noteslink a,
body#books nav #catalogue #bookslink,
body#books nav #catalogue #bookslink a,
body#films nav #catalogue #filmslink,
body#films nav #catalogue #filmslink a,
body#manga nav #catalogue #mangalink,
body#manga nav #catalogue #mangalink a,
body#perfs nav #catalogue #perfslink,
body#perfs nav #catalogue #perfslink a,
body#places nav #catalogue #placeslink,
body#places nav #catalogue #placeslink a,
body#records nav #catalogue #recordslink,
body#records nav #catalogue #recordslink a {
  background: var(--highlight-colour);
  color: var(--card-bg);
  pointer-events: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
}

@media (max-width: 900px) {

  body {
    display: block;
    margin: 2px;
  }

  nav {
    position: fixed;
    top: 0;
    border: none;
    background-color: var(--background-colour);
    border-radius: 0;
    box-shadow: none;
    margin: 20px 0 0 0;
  }

  nav, nav * {
    text-align: left;
  }

  nav label {
    display: inline-block;
    cursor: pointer;
  }

  nav > ul {
    display: none;
    background-color: var(--card-bg);
    background-image:
      linear-gradient(var(--card-lines) .1em, transparent .1em);
    background-size: 100% 1.2em;
    border-radius: 20px;
    padding: 10px 0 10px 5px;
    box-shadow: 5px 5px 7px rgba(33,33,33,.7);
    margin-top: 5px;
    margin-left: 5px;
  }

  nav input[type="checkbox"]:checked ~ ul {
    display: block;
    position: fixed;
    animation: ld-slide-ltr-in 0.1s 1 linear;
    animation-fill-mode: forwards;
    transform: matrix(1,0,0,1,-199,0);
    opacity: 0;
  }

  main {
    margin-top: 70px;
  }
}

@media print {
  nav, body > a, body > img, footer, section#rings, div.comments.submission {
    display: none;
  }

  a {
    border-bottom: none !important;
    text-decoration: none !important;
  }

  a:after {
    margin: 0;
    background-image: none;
    display: inline !important;
    width: auto;
    content: "[" attr(href) "]" !important;
    font-family: "Inconsolata", monospace;
    font-size: 0.8rem;
    text-decoration: none;
  }

  details, blockquote, pre {
    box-shadow: none;
    border: 1px solid;
  }

  details:before, blockquote:before, pre:before {
    display: none;
  }

  details::details-content {
    display: contents;
  }
}