@import url(https://fonts.upset.dev/css?family=Source+Code+Pro:100,200,300,400|Noto+Sans:900,400,300);

:root
{
  --text:       rgb(0, 24, 5);
  --background: rgb(236, 243, 238);
  --primary:    rgb(33, 121, 40);
  --secondary:  rgb(92, 148, 75);
  --tertiary:   rgb(188, 231, 188);
  --accent:     rgb(30, 170, 135);
}
@media (prefers-color-scheme: dark) {
  :root {
    --text:       rgb(239,244,240);
    --background: rgb(4, 22, 11);
    --primary:    rgb(25, 165, 36);
    --secondary:  rgb(121, 170, 106);
    --tertiary:   rgb(73, 95, 73);
    --accent:     rgb(14, 134, 104);
  }
}
html:has(select#themeSelector option[value="redalert"]:checked)
{
  --text:       rgb(239,244,240);
  --background: rgb(14,20,16);
  --primary:    rgb(238, 56, 56);
  --secondary:  rgb(170, 106, 106);
  --tertiary:   rgb(95, 73, 73);
  --accent:     rgb(187, 75, 22);
  
  & a
  {
    background-color: rgba(0,0,0,0);
    box-shadow: 0 0 0 var(--primary);
  }
  .themeSelector
  {
    backdrop-filter: saturate(150%) blur(1px);
    padding: 0.3rem;
  }
  a:hover
  {
    text-decoration: none;
    color: var(--text);
    background-color: var(--primary);
    box-shadow: 0 0 10px var(--primary);
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p#execTime
  {
    font-family: "Source Code Pro", Lobster, calibri, arial, sans-serif;
  }
  body > header
  {
    margin-bottom: 4rem;
    background-blend-mode: hard-light;
    /*background: url('../images/glitched-keyboard.jpg'), linear-gradient(180deg, green 0%, purple 90%), linear-gradient(90deg, yellow 0%, blue 90%); /* Original */
    background: url('../images/glitched-keyboard.jpg'), linear-gradient(180deg, rgb(80, 81, 55) 0%, rgb(81, 35, 35) 90%), linear-gradient(90deg, rgb(217, 156, 10) 0%, rgb(101, 132, 16) 90%);
    background-size: cover;
    background-position: right;
    background-attachment: scroll;
    background-repeat: no-repeat;
  }
  header h1 a
  {
    color: var(--text);
    font-family: "Source Code Pro", Lobster, calibri, arial, sans-serif;
    text-shadow: 3px 2px 10px var(--background);
    transition-property: color, text-shadow;
    transition-duration: .2s;
    transition-delay: 0s; 
  }
  header h1 a:hover
  {
    background: rgba(0,0,0,0);
    text-shadow: 3px 2px 10px var(--primary);
    transition-property: color, text-shadow;
    transition-duration: .2s;
    transition-delay: 0s;
    box-shadow: 0 0 0 var(--primary);
  }
  nav
  {
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: saturate(150%) blur(4px);
    background-blend-mode: lighten;
  }
  article h2::before,
  article h3::before,
  article h4::before,
  article h5::before,
  article h6::before
  {
    content:"./";
    color: var(--primary);
  }
  article a
  {
    padding: 1px 4px;
  }
}
html:has(select#themeSelector option[value="aurora"]:checked)
{
  --text:       rgb(255, 255, 255);
  --background: rgb(14,20,16);
  --primary:    rgb(240, 114, 240);
  --secondary:  rgb(87, 50, 94);
  --tertiary:   rgb(62, 30, 83);
  --accent:     rgb(126, 22, 187);

  & body
  {
    background: radial-gradient(circle, rgba(17,1,7,1) 0%, rgba(23,8,21,1) 20%, rgba(11,14,37,1) 40%, rgba(12,28,27,1) 60%, rgba(11,24,13,1) 80%, rgba(14,18,10,1) 100%);
    background: linear-gradient(
      rgba(0, 0, 0, 0.6), 
      rgba(0, 0, 0, 0.4)
    ),
    url(/images/aurora-12.jpg);
    background-size:cover;
    background-attachment: fixed;
  }
  a:hover
  {
    text-decoration: none;
    color: var(--text);
    background: radial-gradient(var(--secondary) 0%, var(--accent) 100%);
    box-shadow: 0 0 10px var(--accent);
  }
  body > header
  {
    background-blend-mode: hard-light;
    background: url('../images/aurora-6.jpg');
    background-size:cover;
    background-position:left;
    margin-bottom: 4rem;
    background-attachment:scroll;
  }
  body header h1 a:hover
  {
    background: rgba(0,0,0,0);
    text-shadow: -2px -2px 0 var(--accent), 2px 2px 0 var(--primary), -2px 2px 0 var(--accent), 2px -2px 0 var(--primary);
    color: #fff;
    box-shadow: 0 0 0 #000;
  }
  nav
  {
    background: linear-gradient(to right, var(--primary) 0%, #3febeb65 25%, #86db4075 50%, #d8a3546b 75%, var(--primary) 100%);
    background-blend-mode: darken;
  }
  nav ul li a:hover
  {
    box-shadow: 0 0 0 #000;
  }
  article h2::before,
  article h3::before,
  article h4::before,
  article h5::before,
  article h6::before
  {
    content:"✨";
  }
  article li::marker
  {
    color: var(--primary);
  }
  article picture a
  {
    border: 5px solid transparent;
    border-image: linear-gradient(to bottom right, var(--primary) 0%, #3febeb 25%, #86db40 50%, #d8a354 75%, var(--primary) 100%);
    border-image-slice: 1;
    padding: 0px
  }
  article picture:hover a
  {
    box-shadow: 0 0 69px var(--primary);
  }
  body > footer
  {
    background: rgba(0,0,0,0.42);
    border-top: 5px solid transparent;
    border-image: linear-gradient(to right, var(--primary) 0%, #3febeb 25%, #86db40 50%, #d8a354 75%, var(--primary) 100%);
    border-image-slice: 1;
    box-shadow: 0 0 10px var(--primary);
  }
  body footer p.links a.mastodon-link
  {
    background-image: url('/images/mastodon-logo-white.svg');
  }
  body footer p.links a.rss-link
  {
    background-image: url('/images/rss-logo-white.png');
  }
  body.scrap header picture:hover,
  body.scraps header picture:hover
  {
    background-color: rgba(0,0,0,0);
    box-shadow: 0 0 0;
    background: rgba(0,0,0,0);
  }
  .themeSelector select#themeSelector,
  .themeSelector input
  {
    border: 1px solid transparent;
    border-image: linear-gradient(to right, var(--primary) 0%, #3febeb 25%, #86db40 50%, #d8a354 75%, var(--primary) 100%);
    border-image-slice: 1;
  }
  .themeSelector input:active
  {
    background-color: var(--tertiary);
    color: var(--text);
  }
}
html:has(select#themeSelector option[value="paper"]:checked),
html:has(select#themeSelector option[value="paper-night"]:checked)
{
  --text:       rgb(33, 33, 33);
  --background: rgb(249, 249, 249);
  --primary:    rgb(37, 100, 126);
  --secondary:  rgb(152, 187, 202);
  --tertiary:   rgb(33, 33, 33);
  --accent:     rgb(99, 99, 99);

  background-color: rgba(230,230,230,1);

  margin: 50px auto;
  max-width: 1000px;
  outline: 1px solid var(--tertiary);

  box-shadow: 0 0 5px var(--accent);

  & *::selection
  {
    background-color: var(--secondary);
  }
  *
  {
    font-family: monospace;
  }
  body
  {
    background: var(--background);
  }
  a:hover
  {
    background: none;
    box-shadow: none;
    text-decoration: underline;
    color: var(--primary);
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p#execTime
  {
    font-family: monospace;
    font-weight: 100;
  }
  hr
  {
    border-color: var(--tertiary);
  }
  body > header
  {
    background: none;
    outline: 1px solid var(--text);
    margin-bottom: 1rem;
  }
  body > header h1
  {
    display: inline flow-root;
    width: 50%;
    height: 100%;
    padding: 0;
    vertical-align: middle;
    align-content: center;
  }
  body > header h1 a
  {
    font-family: monospace;
    text-shadow: none;
    transition-duration: 0s;
    font-size: 1.1em;
  }
  @media screen and (max-width: 480px)
  {
    body > header h1 a
    {
      font-size: 0.6em;
    }
  }
  body > header h1 a:hover
  {
    background: none;
    text-shadow: none;
    box-shadow: none;
    transition-duration: 0s;
  }
  body nav
  {
    background: none;
    background-blend-mode: unset;
    backdrop-filter: none;
    width: 40%;
    float: right;
    text-align: right;
    padding: 5px 5px 10px 5px;
  }
  body nav ul li
  {
    display: block;
  }
  body nav ul li a
  {
    font-size: 1.1rem;
    font-weight: bold;
  }
  body main
  {
    hyphens: none;
    max-width: 125ch;
  }
  body article h2::before,
  body article h3::before,
  body article h4::before,
  body article h5::before,
  body article h6::before
  {
    content: "";
  }
  body article li,
  body article table,
  body article p
  {
    text-align: left;
    letter-spacing: 0;
    hyphens: none;
  }
  body article a
  {
    font-weight: bold;
  }
  body article code,
  body article pre.codeblock
  {
    background-color: var(--background);
  }
  body article picture a
  {
    background-color: var(--background);
  }
  body article picture a:hover
  {
    outline: 1px solid var(--text);
  }
  body article footer
  {
    box-shadow: none;
  }
  body > footer
  {
    box-shadow: none;
    outline: 1px solid var(--text);
    border-top: none;
    margin-top: 1rem;
  }
  body p#execTime
  {
    color: var(--text);
  }
  body footer p a.mastodon-link
  {
    background-image: url('/images/mastodon-logo-black.svg');
  }
  body footer p a.rss-link
  {
    background-image: url('/images/rss-logo-black.png');
  }
}
html:has(select#themeSelector option[value="paper-night"]:checked)
{
  --text: rgb(206, 206, 206);
  --background: rgb(40, 40, 40);
  --primary: rgb(70, 168, 208);
  --secondary: rgb(66, 81, 87);
  --tertiary: rgb(255, 255, 255);
  --accent: rgb(176, 176, 176);

  background-color: rgba(30,30,30,1);
  & body footer p.links a.mastodon-link
  {
    background-image: url('/images/mastodon-logo-white.svg');
  }
  body footer p.links a.rss-link
  {
    background-image: url('/images/rss-logo-white.png');
  }
}
html:has(select#themeSelector option[value="naked"]:checked)
{
  --text:       rgb(0, 0, 0);
  --background: rgb(255, 255, 255);
  --primary:    rgb(0, 0, 255);
  --secondary:  rgb(128, 128, 128);
  --tertiary:   rgb(240, 240, 240);
  --accent:     rgb(255, 0, 0);
  & * /* Remove all styling when the naked theme is selected but not yet applied */
  {
    all: unset; 
    font-family: serif;
  }
  /* Show a little note to encourage users to Apply it, and that this is a very rough approximation */
  .themeSelector span.nakedNote
  {
    display: inline;
  outline: 5px dotted orange;
  }
  /* And now we rebuild the styling to something partially resembling what the browser default would be */
  ::selection
  {
    background-color: #339;
    color: #fff;
  }
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6
  {
    display: block;
  }
  a
  {
    color: #0000ee;
    text-decoration: underline;
    cursor: pointer;
  }
  select,
  input
  {
    border: 1px solid #111;
    padding: 2px;
    background: #ddd;
  }
  select 
  {
    background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%;
  }
  input
  {
    cursor: default
  }
  h1
  {
    font-size: 2em;
    font-weight: bold;
  }
  h2
  {
    font-size: 1.5em;
    font-weight: bold;
  }
  h3
  {
    font-size: 1.17em;
    font-weight: bold;
  }
  h4
  {
    font-size: 1em;
    font-weight: bold;
  }
}
::selection
{
	background-color: var(--accent);
}

*
{
  padding: 0;
  margin: 0;
  font-family: "Noto Sans", "open sans", "Segoe UI", Optima, arial, sans-serif;
}
html
{
  font-size: 100%;
}
a
{
  color: var(--primary);
  text-decoration: none;
  transition-property: color, background-color, box-shadow;
  transition-duration: .1s;
  transition-delay: 0s;
}
a:hover
{
  text-decoration: underline;
  transition-property: color, background-color, box-shadow;
  transition-duration: .02s;
  transition-delay: 0s;
}
h2
{
  font-size: 2.2rem;
}
h3
{
  font-size: 1.6rem;
}
h4
{
  font-size: 1.2rem;
}
h5
{
  font-size: 1rem;
}
h6
{
  font-size: 1rem;
}
hr
{
  border-color: var(--primary); 
  width: 90%;
  margin: 2em auto;
}

html
{
  /*height: 100%;*/
}
body
{
  background-color: var(--background);
  color: var(--text);
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100%;
}

header h1
{
  font-size: 5rem;
  font-weight: 300;
  display: block;
  text-align: center;
  padding: 0.42em 0;
}
header h1 a
{
  color: var(--text);
}
nav
{
  text-align: center;
}
nav ul
{
  list-style-type: none;
}
nav ul li
{
  display: inline-block;
  margin: 0.2rem;
}
nav ul li a
{
  padding: 0.2rem;
  font-size: 1.4rem;
  color: var(--text);
}
nav ul li a:hover
{
  color: var(--primary);
}
main
{
  margin-inline: auto;
  max-width: 111ch;
  padding: 1ch;
  hyphens: auto;
}

article header
{
  background: none;
  margin-bottom: 2rem;
}
article header h2
{
  margin-bottom: 0.2rem;
}
article header p
{
  font-size: 1.1rem;
  padding-left: 2rem;
  font-style: italic;
}

article h2,
article h3,
article h4,
article h5,
article h6,
article p,
article pre
{
  margin-bottom: 0.6rem;
  margin-top: 0.8rem;
}
body.blank article p
{
  margin-top: 45vh;
}
article fieldset .no-css
{
  display: none;
}
article fieldset
{
  border: none;
  display: block;
  float: right;
  font-size: 1.1rem
}
article fieldset legend
{
  font-size: 1.3rem;
  text-align: center;
  margin-bottom: 1vh;
  margin-top: 1vh;
}
article fieldset legend span
{
  font-size: 1rem;
  opacity: 0.5;
  cursor: help;
}
article fieldset div
{
  vertical-align: middle;
}
@media screen and (max-width: 640px) {

  article fieldset
  {
    display: inline;
    float:none;
  }
  article fieldset div
  {
    display: inline;
  }
}
input[type="checkbox"]
{
  appearance: none;
  background-color: var(--background);
  font: inherit;
  color: var(--primary);
  width: 1.1rem;
  height: 1.1rem;
  border: 0.1em solid var(--primary);
  border-radius: 0.1em;
}
input[type="checkbox"]:checked
{
  background-color: var(--primary);
}
article p.toggle-summaries
{
  font-size: 0.9em;
  opacity: 0.6;
}
article ul,
article ol
{
  margin-left: 3rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
@media screen and (max-width: 640px) {
  article ul,
  article ol
  {
    margin-left: 0.9rem;
  }
  article li 
  {
    text-align: left;
  }
}
article > ul,
article > ol
{
  font-size: 1.1rem;
}
article ol
{
  list-style: decimal;
}
article ol ol
{
  list-style: lower-alpha;
}
article ol ol ol
{
  list-style: lower-roman;
}
article ol ol ol ol
{
  list-style: upper-alpha;
}
article ol ol ol ol ol
{
  list-style: upper-roman;
}
article li
{
  /*text-align: justify;*/
  letter-spacing: .02cap;
  line-height: 1.3rem;
  color: var(--text);
  margin-bottom: .75rem;
}
article li time
{
  font-size: 0.9em;
  opacity: 0.5;
}
article li:hover time,
article li time:hover,
article li time:active
{
  opacity: 0.8;
}
article li p.post-description
{
  display:none;
}
@media screen and (max-width: 640px) {
  article li 
  {
    text-align: left;
  }
}
article li::marker
{
  color: var(--accent);
}
article table
{
  /*text-align: justify;*/
  font-size: 1.1rem;
  letter-spacing: .02cap;
}
article p
{
  /*text-align: justify;*/
  font-size: 1.1rem;
  letter-spacing: .02cap;
  line-height: 1.3em;
}
article a.jump
{
  text-decoration: none;
}
article a.jump:hover
{
  text-decoration: none;
  box-shadow: none;
  background:none;
}
article q
{
  font-style: italic;
}
body.theme-autora article a
{
  padding: 1px 4px;
}
article code,
article pre.codeblock
{
  font-family: 'Courier New', Courier, monospace;
  outline: 1px solid var(--secondary);
  background-color: var(--tertiary);
  padding: .1em .2em 0;
  overflow: scroll;
}
article pre.codeblock
{
  padding: 0.2em;
  max-width: 95vw;
}
article pre
{
  font-size: 1.1rem;
  padding: 1rem;
}
article strong
{
  font-weight: 900;
}
article picture
{
  display: inline-block;
  margin: 1rem;
  text-align: center;
  width: 100%;
}
article picture a:hover
{
  background-color: var(--primary);
}
article picture a
{
  display: inline-block;
  padding: 5px;
  line-height: 0;
  background-color: var(--tertiary)
}
article picture img
{
  object-fit: fill;
  max-width: 100%;
  max-height: 100%;
}
article blockquote
{
  width: 90%;
  margin: 0 auto;
  outline: 1px dashed ;
  padding: 1ch;
  font-style: italic;
  text-align: left;
  hyphens: none;
}
article blockquote h3::before
{
  content:"";
}
article footer
{
  outline: 1px solid var(--accent);
  box-shadow: 0 0 10px var(--accent);
  border-top: none;
  text-align: left;
}
article footer h3,
article footer h4,
article footer h5,
article footer h6
{
  text-align: left;
}

#vulns article ul li span
{
  color: var(--secondary);
}

footer
{
  margin-top: 6rem;
  padding: 3rem;
  text-align: center;
  grid-row-start: 3;
  grid-row-end: 4;
}
footer h4
{
  margin-top: 1rem;
}
footer p#execTime
{
  color: var(--secondary);
  text-align: right;
  font-size: 0.8rem;
}
footer p.links
{
  margin: .5rem 0;
}
footer p.links a
{
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  font-size: 0; /* This hides the anchor text when CSS is applied, because there's a logo! But when there's no CSS we want the link to say words instead. This does this. */
}
footer p.links a.mastodon-link
{
  background-image: url('/images/mastodon-logo-black.svg');
}
@media (prefers-color-scheme: dark) {
  footer p.links a.mastodon-link
  {
    background-image: url('/images/mastodon-logo-white.svg');
  }
}
footer p.links a.rss-link
{
  background-image: url('/images/rss-logo-black.png');
}
@media (prefers-color-scheme: dark) {
  footer p.links a.rss-link
  {
    background-image: url('/images/rss-logo-white.png');
  }
}
body footer p.links a:hover
{
  background-size: contain;
  background-repeat: no-repeat;
  box-shadow: none;
}

/* CSS Post filter
 * This utilises the :has selector to determine whether or not post links 
 * for a particular category should be shown via a checkbox
*/
#post-filter
{
  margin: 1rem;
  padding: 1rem;
  outline: 1px solid var(--accent);
}
.home article:not(:has(input#indieweb[type="checkbox"]:checked))
{
  .section-indieweb
  {
    display: none;
  }
}
.home article:not(:has(input#website[type="checkbox"]:checked))
{
  .section-website
  {
    display: none;
  }
}
.home article:not(:has(input#infosec[type="checkbox"]:checked))
{
  .section-infosec
  {
    display: none;
  }
}
.home article:not(:has(input#life[type="checkbox"]:checked))
{
  .section-life
  {
    display: none;
  }
}
.home article:not(:has(input#scraps[type="checkbox"]:checked))
{
  .section-scrap
  {
    display: none;
  }
}
.home article:not(:has(input#tech[type="checkbox"]:checked))
{
  .section-tech
  {
    display: none;
  }
}
.home article:has(input#detailed[type="checkbox"]:checked)
{
  .post-description
  {
    display: block;
    padding-left: 1rem;
    font-size: 0.9em;
  }
}

/* The Void */
li.scream
{
  font-style: italic;
  font-family: 'Courier New', Courier, monospace;
  color: var(--accent);
}
li.scream time
{
  font-style: normal;
  padding-left: 1vw;
  color: var(--text);
  opacity: 0.2;
}
input.scream
{
  border: 1px solid var(--accent);
  background-color: var(--background);
  color: var(--text);
  padding: 1vh;
}
input.scream:hover
{
  border: 1px solid var(--primary);
}
input.scream:focus-visible
{
  outline: 0;
}
li.scream:nth-child(1){ opacity: 1;} /* There must be a better way to do this, right? */
li.scream:nth-child(2){ opacity: .98;}
li.scream:nth-child(3){ opacity: .96;}
li.scream:nth-child(4){ opacity: .94;}
li.scream:nth-child(5){ opacity: .92;}
li.scream:nth-child(6){ opacity: .90;}
li.scream:nth-child(7){ opacity: .88;}
li.scream:nth-child(8){ opacity: .86;}
li.scream:nth-child(9){ opacity: .84;}
li.scream:nth-child(10){ opacity: .82;}
li.scream:nth-child(11){ opacity: .80;}
li.scream:nth-child(12){ opacity: .78;}
li.scream:nth-child(13){ opacity: .76;}
li.scream:nth-child(14){ opacity: .74;}
li.scream:nth-child(15){ opacity: .72;}
li.scream:nth-child(16){ opacity: .70;}
li.scream:nth-child(17){ opacity: .68;}
li.scream:nth-child(18){ opacity: .66;}
li.scream:nth-child(19){ opacity: .64;}
li.scream:nth-child(20){ opacity: .62;}
li.scream:nth-child(21){ opacity: .60;}
li.scream:nth-child(22){ opacity: .58;}
li.scream:nth-child(23){ opacity: .56;}
li.scream:nth-child(24){ opacity: .54;}
li.scream:nth-child(25){ opacity: .52;}
li.scream:nth-child(26){ opacity: .50;}
li.scream:nth-child(27){ opacity: .48;}
li.scream:nth-child(28){ opacity: .46;}
li.scream:nth-child(29){ opacity: .44;}
li.scream:nth-child(30){ opacity: .42;}
li.scream:nth-child(31){ opacity: .40;}
li.scream:nth-child(32){ opacity: .38;}
li.scream:nth-child(33){ opacity: .36;}
li.scream:nth-child(34){ opacity: .35;}
li.scream:nth-child(35){ opacity: .34;}
li.scream:nth-child(36){ opacity: .33;}
li.scream:nth-child(37){ opacity: .32;}
li.scream:nth-child(38){ opacity: .31;}
li.scream:nth-child(39){ opacity: .30;}
li.scream:nth-child(40){ opacity: .29;}
li.scream:nth-child(41){ opacity: .28;}
li.scream:nth-child(42){ opacity: .27;}
li.scream:nth-child(43){ opacity: .26;}
li.scream:nth-child(44){ opacity: .25;}
li.scream:nth-child(45){ opacity: .24;}
li.scream:nth-child(46){ opacity: .23;}
li.scream:nth-child(47){ opacity: .22;}
li.scream:nth-child(48){ opacity: .21;}
li.scream:nth-child(49){ opacity: .20;}
li.scream:nth-child(50){ opacity: .19;}
li.scream:nth-child(51){ opacity: .18;}
li.scream:nth-child(52){ opacity: .17;}
li.scream:nth-child(53){ opacity: .16;}
li.scream:nth-child(54){ opacity: .15;}
li.scream:nth-child(55){ opacity: .14;}
li.scream:nth-child(56){ opacity: .13;}
li.scream:nth-child(57){ opacity: .12;}
li.scream:nth-child(58){ opacity: .11;}
li.scream:nth-child(59){ opacity: .10;}
li.scream:nth-child(60){ opacity: .09;}
li.scream:nth-child(61){ opacity: .08;}
li.scream:nth-child(62){ opacity: .07;}
li.scream:nth-child(63){ opacity: .06;}
li.scream:nth-child(64){ opacity: .05;}
li.scream:nth-child(65){ opacity: .04;}
li.scream:nth-child(66){ opacity: .03;}
li.scream:nth-child(67){ opacity: .02;}
li.scream:nth-child(68){ opacity: .01;}
li.scream:nth-child(69){ opacity: 0;}
/* The following section was introduced to basically override the aurora theme stuff on scraps! */
body.scrap header picture a,
body.scraps header picture a
{
  background-color: rgba(0,0,0,0);
  border: 0px;
  background: rgba(0,0,0,0);
}
body.scrap header picture a:hover,
body.scraps header picture a:hover,
body.scrap header picture:hover a,
body.scraps header picture:hover a
{
  background-color: rgba(0,0,0,0);
  box-shadow: 0 0 0;
  background: rgba(0,0,0,0);
}
/* Scrappy aurora override complete */
.home article ul li.section-indieweb a::before
{
  content: url();
}
.home article ul li.section-website a::before
{
  content: url();
}
.home article ul li.section-infosec a::before
{
  content: url();
}
.home article ul li.section-life a::before
{
  content: url();
}
.home article ul li.section-scrap a::before
{
  content: url('/images/scraps-logo-16.png');
  padding-right: 3px;
  display:none;
}
.home article ul li.section-tech a::before
{
  content: url();
}

.themeSelector
{
  position: absolute;
  top: .4rem;
  right: .8rem;
  z-index: 1000;
}
.themeSelector select#themeSelector
{
  font-size: 1rem;
  margin-left: 1rem;
  padding: 0.2rem;
  background-color: var(--background);
  color: var(--text);
  border: 1px solid var(--secondary);
}
.themeSelector span.nakedNote
{
  display: none;
}
.themeSelector input
{
  font-size: 1rem;
  margin-left: 1rem;
  padding: 0.3rem;
  background-color: var(--background);
  color: var(--text);
  border: 1px solid var(--secondary);
  cursor: pointer;
}
.themeSelector input:hover
{
  background-color: var(--secondary);
  color: var(--text);
  border: 1px solid var(--primary);
}
.themeSelector input:active
{
  background-color: var(--tertiary);
  color: var(--background);
  border: 1px solid var(--primary);
}