/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
   
/*
black: #010001
grey: #1d1d1d

white: #fdfdfc
cream: #f7f3e6

darkred: #340c0b
brown: #552910

red: #ea472c
orange: #f57644

pink: #f394e6
lightpink: #fdd0f6

yellow1: #f9af54
yellow2: #fec255
brightyellow: #f2e125

olive: #5b5e25
lightolive: #798514
armygreen: #a5a322
green: #00d447
lightgreen: #8be892

blue: #466ab1
lightblue: #73a2ed
paleblue: #99d0f4
ice: #c0ebf6

periwinkle: #b6c8ed
lilac: #bcb6f4
purple: #5d5c7a
darkpurple: #4c4760
palepurple: #ele8f9


  --bg-color: #1d1d1d;
  --text-color: #f7f3e6;
  --link-color: #73a2ed;
  --link-hover-color: #466ab1;
  --a1-color: #fec255;
  --a2-color: #466ab1;
  --lilac: #bcb6f4;
  --paleblue: #99d0f4;
  --lightgreen: #8be892;
  --lightpink: #fdd0f6;
  --yellow2: #fec255;
  --code-bg: #4c4760;
  --body-font: 'lekton', monospace;
  --title-font: 'dm mono', monospace;
  --quote-font: 'ibm plex mono', monospace;
  --code-font: 'lekton', monospace;
  --font-size: 18px;

*/

/* Custom typeface — Bank Printer (body text) */

/* Regular */
@font-face {
  font-family: "BankPrinter";
  src: url("../fonts/F25_Bank_Printer.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Bold */
@font-face {
  font-family: "BankPrinter";
  src: url("../fonts/F25_Bank_Printer_Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Custom typeface — EAS VHS (body text) */

/* Regular */
@font-face {
  font-family: "EAS VHS";
  src: url("../fonts/eas-vhs.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}




:root {
  --bg-color: #030305;
  --shadow-bg: #0a1720; /* slightly lighter than bg, similar to text hue */
  --text-color: #1facf3;
  --text-lighter: #99f9ff;
  --text-darker: #020a79;
  
  --white: #fffcf0; /* high/light for yellow, oranges, and maybe red */
  
  --link-color: #ffee40;
  --link-high: #fffcf0;
  --link-low: #e08a3d;
  --link-other: ##d7cd37;
  --link-hover-color: #ffee40;
  
  --a1-color: #488a00; /* warm green */
  --a1-high: #cdfd76;
  --a1-low: #005a21;
  
  --a2-color: #1dbf2c; /* cool green */
  --a2-high: #57f385;
  --a2-low: #107320;
  
  --a3-color: #725eb7; /* purple */
  --a3-high: #c9c3ff;
  --a3-low: #47144f;
  
  --a4-color: #e95436; /* orange */
  --a4-high: #f8c691;
  --a4-low: #9a0000;
  
  --a5-color: #da374a; /* pinkish red */
  --a5-high: #e46e6e;
  --a5-low: #6d1313;
  
  --code-bg: #161847; /* halfway between text dark and shadow bg */
  --body-font: 'lekton', monospace;
  --title-font: 'dm mono', monospace;
  --quote-font: 'ibm plex mono', monospace;
  --code-font: 'lekton', monospace;
  --serif-font: 'libertinus mono', serif; /* for quotemark on blockquote */
  --font-size: 16px;
}



body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: var(--body-font);
  font-size: var(--font-size);
  max-width: 1100px;
  margin: 20px auto;
  padding: 10px 30px;
  font-weight: 400;
  display: grid;
  grid-template-columns: 250px auto;
  grid-template-rows: auto auto auto;
  grid-gap: 1em 1em;
}

img {
  margin: 0;
  padding: 0;
  display: block;
}

p {
  line-height: 1.25;
}

/* INLINE STYLING */

i, em {

}

b, strong {

}

a {
  color: var(--link-color);
  text-decoration: none;
  transition: 300ms;
}

a:hover {
  text-shadow: 1px 1px 10px var(--link-low), 0px 0px 5px var(--link-color);
}

ul a, ol a, dl a {
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
}

u {

}

del {
  
}

ins {
  
}

sup {
  
}

sub {
  
}

small {
  
}

abbr, abbr[title] {
  text-decoration-thickness: 1.5px;
}

q {
  
}

cite {
  
}

dfn {
  
}

mark {
  padding: 1px 3px 0 3px;
  margin: -1px -3px 0 -3px;
  background: var(--a2-high);
  color: var(--a1-low);
}

var {
  
}

time {
  
}

/* HEADINGS AND TEXT SIZING */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--title-font);
  text-shadow: 0 0 15px var(--text-darker), 0 0 6px var(--text-color);
  transition: 300ms;
  color: var(--text-lighter);
}

h6 {
  font-size: 1em;
  font-weight: 400;
  text-transform: uppercase;
}

h5 {
  font-size: 1.125em;
  text-transform: uppercase;
}

h4 {
  font-size: 1.266em;
}

h3 {
  font-size: 1.424em;
}

h2 {
  font-size: 1.602em;
}

h1 {
  font-size: 1.802em;
  
}

h2::before {
  content: '# ';
  color: var(--text-color);
  font-weight: 400;
}

caption {
  font-size: 0.889em;  
}

/* DEFINITION LISTS */

dt {
  font-weight: bold;
  font-size: 1.125em;
  margin-bottom: 0.5em;
  margin-top: 1em;
}

dd {
	margin:0 0 0.5em 0;
	padding-left: 2em;
}

/* LISTS */

dl, ol, ul {
  line-height: 1.25em;
}

li::marker {
  color: var(--text-lighter);
  text-shadow: 0 0 15px var(--text-darker), 0 0 6px var(--text-color);
}
  

table {
  background: var(--a1-color);
  border-spacing: 1px 0px;
}

/* SUMMARIES */

summary {
  color: var(--a3-high);
  text-shadow: 0 0 8px var(--a3-low), 0 0 3px var(--a3-color);
  transition: 300ms;
  width: max-content;
}

summary:hover {
  text-shadow: 0 0 15px var(--a3-low), 0 0 6px var(--a3-color), 0 0 3px var(--a3-high);
}

details>summary {
  list-style-type: '> ';
}

details[open]>summary {
  list-style-type: 'v ';
}

details p {
  border: 1px solid var(--text-color);
  padding: 1.5em;
}

/* BLOCKQUOTES */

blockquote {
  border: 1px solid var(--text-color);
  padding: 1.5em;
  margin: 1em auto;
  max-width: 900px;
}

blockquote p:first-child {
  margin-top: 0;
}

blockquote.fancy-blockquote {
  border-top: 1px solid var(--text-color);
  border-bottom: 1px solid var(--text-color);
  border-left: none;
  border-right: none;
  color: var(--text-color);
  font-family: var(--quote-font);  
  font-size: 1em;
  font-style: italic;
  font-weight: ;
  line-height: 1.2em;
  margin: 1em 150px;
  padding: 25px;
  position: relative;
  z-index: 0;
}

blockquote.fancy-blockquote:before {
  content: "";
  position: absolute;
  background-color: var(--bg-color);
  left: 50%;
  top: 0;
  height: 5px;
  margin-top: -3px;
  margin-left: -1.25em;
  width: 2.5em;
}

blockquote.fancy-blockquote:after {
  content: '\201C';
  position: absolute;
  color: var(--text-lighter);
  font-style: normal;
  font-size: 3em;
  line-height: 1.5em;
  text-align: center;
  text-indent: -2px;
  font-family: var(--serif-font);
  width: 1em;
  left: 50%;
  top: 0;
  margin-top: -0.5em;
  margin-left: -0.5em;
  text-shadow: 0 0 15px var(--text-darker), 0 0 6px var(--text-color);
}

blockquote.fancy-blockquote cite {
  display: block;
  color: var(--text-lighter);
  font-size: 0.889em;
  margin: 1em 0 0;
}

blockquote.fancy-blockquote cite a {
  color: var(--link-color);
}

/* HORIZONTAL RULES */

hr {
  border-top: 2px dashed var(--text-color);
  border-bottom: none;
  border-left: none;
  border-right: none;
}

hr.hraccent {
  border-top: 2px dashed var(--a2-color);
}

hr.hrnarrow {
  margin: 0 150px;
}

hr.hrxnarrow {
  width: 10em;
  margin: 0 auto;
}

hr.solid {
  border-top-style: solid !important;
}

/* TABLES */

table {
  margin: 1em 0;
  background: var(--bg-color);
  color: var(--text-color);
  border-collapse: collapse;
}

table thead, table tfoot {
  border: 1px solid var(--text-color);
}

table td {
  padding: 4px 4px 0px 4px;
  text-transform: uppercase;
  text-align: center;
}

table th {
  padding: 4px 10px 0px 10px;
  text-align: center;
  text-transform: uppercase;
}

table tbody tr {
  border-left: 1px solid var(--bg-color);
  border-right: 1px solid var(--bg-color);
}

table tr:hover {
  background: var(--text-color);
  color: var(--bg-color);
  border-left: 1px solid var(--text-color);
  border-right: 1px solid var(--text-color);
  margin: 0;
}

table caption {
  margin: 0.5em auto;
  font-family: var(--quote-font);
  font-style: italic;
  color: var(--text-lighter);
}

/* CODE SNIPPETS */

code, kbd, samp {
  font-family: var(--code-font); 
  color: var(--text-lighter);
  background: var(--code-bg);
  padding: 3px 4px 1px;
  border-radius: 3px;
  margin: 0 -4px;
  letter-spacing: 1px;
  font-size: 0.9em;
}

pre {
  font-family: var(--code-font);  
  background: var(--code-bg);
  color: var(--text-lighter);
  padding: 10px 10px 8px;
  letter-spacing: 1px;
  width: max-content;
  border-radius: 3px;
}

/* EMBEDDED CONTENT */

figure {
  display: flex;
  margin: 1em 0;
  padding: 0;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1em;
}

iframe {
  border-style: solid;
}

/* INDEX PAGE STYLING */

#index_header {
  grid-area: 1 / 2 / 2 / -1;
  border: 1px solid var(--text-color);
  box-shadow: 0 0 10px var(--text-darker);
  min-width: 0;
}

.marquee_parent {
  border-bottom: 1px solid var(--text-color);
  background: var(--text-darker);
}

.marquee {
  --gap: 4rem;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
  padding: 0.6em 0;
}

.marquee_span {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  min-width: 100%;
  gap: var(--gap);
  animation: scroll 30s linear infinite;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

.marquee:hover .marquee_span { 
  animation-play-state: paused; 
}

#index_main {
  grid-area: 2 / 2 / -2 / -1;
  border: 1px solid var(--text-color);
  box-shadow: 0 0 10px var(--text-darker);
}

#index_footer {
  grid-area: 3 / 2 / -1 / -1;
  border: 1px solid var(--text-color);
  box-shadow: 0 0 10px var(--text-darker);
}

.heading_space {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1em;
}

#intro {
  padding: 1em;
}

#intro p:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
}

#intro h1 {
  font-size: 2.8em;
  color: var(--a3-high);
  text-shadow: none;
  text-shadow: 0 0 15px var(--a3-low), 0 0 6px var(--a3-color);
  /*padding-top: 0;
  margin-top: 0;*/
}

#intro h1:before {
  content: "> ";
  color: var(--a3-color);
}

/* SIDEBAR */

aside {
  grid-area: 1 / 1 / -1 / 2;
}

aside section {
  margin-bottom: 1em;
}

#aside_title {
  border: 1px solid var(--text-color);
  box-shadow: 0 0 10px var(--text-darker);
  padding: 1em;
}

#aside_title a {
  color: var(--text-lighter);
  font-size: 1.2em;
  font-weight: 700;
}

#aside_title a:hover {
  text-shadow: 1px 1px 10px var(--text-darker), 0px 0px 5px var(--text-color);
}

#status_area table {
  font-size: 0.9em;
  color: var(--a2-color);
  border-collapse: collapse;
  border: 1px dotted var(--a2-color);
  text-shadow: 0px 0px 5px var(--a2-low);
  box-shadow: 0 0 3px var(--a2-low);
  margin: 1em 0;
}

#status_area table b {
  color: var(--a2-high);
}

#status_area table td, #status_area table tr {
  border: 1px dotted var(--a2-color);
  text-transform: none;
}

#status_area table td {
  padding: 0.5em;
  vertical-align: top;
}

#status_area table tr:hover {
  background: none;
  color: inherit;
}

.heading_with_divider {
  display: flex;  
  align-items: center;
  gap: 0.5em;
}

.divider {
  height: 0px;
  border-top: 2px dashed var(--a3-color);
  flex-grow: 100;
  box-shadow: 0 0 10px var(--a3-low);
}

aside h2 {
  text-shadow: none;
  /*color: var(--text-color);*/
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: 2px;
}

aside h2:before {
  content: none;
}

aside nav a {
  display: block;
  margin: 5px 0;
  padding: 8px 10px 5px;
  color: var(--link-color);
  text-shadow: none;
  text-transform: uppercase;
}

aside nav a:before {
  content: "> ";
  color: var(--bg-color);
  text-shadow: none;
  transition: 300ms;
}

aside nav a:hover {
  background: var(--text-darker);
  color: var(--text-lighter);
  text-shadow: none;
}

aside nav a:hover:before {
  color: var(--white);
  text-shadow: none;
}