@import url(https://fonts.googleapis.com/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);
  }
}
body.theme-red-alert
{
  --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);
}
body.theme-aurora
{
  --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);

  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;
}
body.theme-paper
{
  --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: var(--background);

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

  box-shadow: 0 0 5px var(--accent);
}
body.theme-paper.theme-night
{
  --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);
}
::selection
{
	background-color: var(--accent);
}
body.theme-paper *::selection
{
  background-color: var(--secondary);
}

*
{
  padding: 0;
  margin: 0;
  font-family: "Noto Sans", "open sans", "Segoe UI", Optima, arial, sans-serif;
}
body.theme-paper *
{
  font-family: monospace;
}
html
{
  font-size: 100%;
}
html.theme-paper
{
  background-color: rgba(230,230,230,1);
}
html.theme-paper.theme-night
{
  background-color: rgba(30,30,30,1);
}
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;
}
body.theme-red-alert a
{
  background-color: rgba(0,0,0,0);
  box-shadow: 0 0 0 var(--primary);
}
body.theme-red-alert a:hover
{
  text-decoration: none;
  color: var(--text);
  background-color: var(--primary);
  box-shadow: 0 0 10px var(--primary);
}
body.theme-aurora 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.theme-paper a:hover
{
  background: none;
  box-shadow: none;
  text-decoration: underline;
  color: var(--primary);
}
body.theme-red-alert h1,
body.theme-red-alert h2,
body.theme-red-alert h3,
body.theme-red-alert h4,
body.theme-red-alert h5,
body.theme-red-alert h6,
body.theme-red-alert p#execTime
{
  font-family: "Source Code Pro", Lobster, calibri, arial, sans-serif;
}
body.theme-paper h1,
body.theme-paper h2,
body.theme-paper h3,
body.theme-paper h4,
body.theme-paper h5,
body.theme-paper h6,
body.theme-paper p#execTime
{
  font-family: monospace;
  font-weight: 100;
}
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;
}
body.theme-paper hr
{
  border-color: var(--tertiary);
}

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

header
{
}
body.theme-red-alert > 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;
}
body.theme-aurora > 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.theme-paper > header
{
  background: none;
  outline: 1px solid var(--text);
  margin-bottom: 1rem;
}
header h1
{
  font-size: 5rem;
  font-weight: 300;
  display: block;
  text-align: center;
  padding: 0.42em 0;
}
header h1 a
{
  color: var(--text);
}
body.theme-red-alert 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; 
}
body.theme-red-alert 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);

}
body.theme-aurora 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;
  
}
body.theme-paper > header h1
{
  display: inline flow-root;
  width: 50%;
  height: 100%;
  padding: 0;
  vertical-align: middle;
  align-content: center;
}
body.theme-paper > header h1 a
{
  font-family: monospace;
  text-shadow: none;
  transition-duration: 0s;
  font-size: 1.1em;
}
@media screen and (max-width: 480px)
{
  body.theme-paper > header h1 a
  {
    font-size: 0.6em;
  }
}
body.theme-paper > header h1 a:hover
{
  background: none;
  text-shadow: none;
  box-shadow: none;
  transition-duration: 0s;
}
nav
{
  text-align: center;
}
body.theme-red-alert nav
{
  background-color: rgba(0,0,0,0.6);
  backdrop-filter: saturate(150%) blur(4px);
  background-blend-mode: lighten;
}
body.theme-aurora nav
{
  background: linear-gradient(to right, var(--primary) 0%, #3febeb65 25%, #86db4075 50%, #d8a3546b 75%, var(--primary) 100%);
  background-blend-mode: darken;
}
body.theme-paper nav
{
  background: none;
  background-blend-mode: unset;
  backdrop-filter: none;
  width: 40%;
  float: right;
  text-align: right;
  padding: 5px 5px 10px 5px;
}
nav ul
{
  list-style-type: none;
}
nav ul li
{
  display: inline-block;
  margin: 0.2rem;
}
body.theme-paper nav ul li
{
  display: block;
}
nav ul li a
{
  padding: 0.2rem;
  font-size: 1.4rem;
  color: var(--text);
}
nav ul li a:hover
{
  color: var(--primary);
}
body.theme-paper nav ul li a
{
  font-size: 1.1rem;
  font-weight: bold;
}
body.theme-aurora nav ul li a:hover
{
  box-shadow: 0 0 0 #000;
}
main
{
  margin-inline: auto;
  max-width: 111ch;
  padding: 1ch;
  hyphens: auto;
}
body.theme-paper main
{
  hyphens: none;
  max-width: 125ch;
}

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;
}

body.theme-red-alert article h2::before,
body.theme-red-alert article h3::before,
body.theme-red-alert article h4::before,
body.theme-red-alert article h5::before,
body.theme-red-alert article h6::before
{
  content:"./";
  color: var(--primary);
}

body.theme-aurora article h2::before,
body.theme-aurora article h3::before,
body.theme-aurora article h4::before,
body.theme-aurora article h5::before,
body.theme-aurora article h6::before
{
  content:"✨";
}
body.theme-paper article h2::before,
body.theme-paper article h3::before,
body.theme-paper article h4::before,
body.theme-paper article h5::before,
body.theme-paper article h6::before
{
  content: "";
}
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;
}
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;
}
@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: .1cap;
  line-height: 1.5rem;
  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;
}
body.theme-paper article li,
body.theme-paper article table,
body.theme-paper article p
{
  text-align: left;
  letter-spacing: 0;
  hyphens: none;
}
@media screen and (max-width: 640px) {
  article li 
  {
    text-align: left;
  }
}
article li::marker
{
  color: var(--accent);
}
body.theme-aurora article li::marker
{
  color: var(--primary);
}
article table
{
  text-align: justify;
  font-size: 1.1rem;
}
article p
{
  text-align: justify;
  font-size: 1.1rem;
  letter-spacing: .1cap;
}
article q
{
  font-style: italic;
}
body.theme-red-alert article a,
body.theme-autora article a
{
  padding: 1px 4px;
}
body.theme-paper article a
{
  font-weight: bold;
}
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;
}
body.theme-paper article code,
body.theme-paper article pre.codeblock
{
  background-color: var(--background);
}
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)
}
body.theme-aurora 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
}
body.theme-aurora article picture:hover a
{
  box-shadow: 0 0 69px var(--primary);
}
body.theme-paper article picture a
{
  background-color: var(--background);
}
body.theme-paper article picture a:hover
{
  outline: 1px solid var(--text);
}
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;
}
body.theme-paper article footer
{
  box-shadow: none;
}
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;
}
body.theme-red-alert
{
  border-top: 1px solid var(--primary);
  box-shadow: 0 0 10px var(--primary);
}
body.theme-aurora > 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.theme-paper > footer
{
  box-shadow: none;
  outline: 1px solid var(--text);
  border-top: none;
  margin-top: 1rem;
}
footer p#execTime
{
  color: var(--secondary);
  text-align: right;
  font-size: 0.8rem;
}
body.theme-paper p#execTime
{
  color: var(--text);
}
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,
body.theme-paper footer p 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');
  }
}
body.theme-paper.theme-night footer p.links a.mastodon-link,
body.theme-aurora footer p.links a.mastodon-link
{
  background-image: url('/images/mastodon-logo-white.svg');
}
footer p.links a.rss-link,
body.theme-paper footer p 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.theme-paper.theme-night footer p.links a.rss-link,
body.theme-aurora 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;
}
/* 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,
body.scrap.theme-aurora header picture:hover,
body.scraps.theme-aurora header picture:hover
{
  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();
}