:root  {  
    color-scheme: light dark;
    --accent-color: rgb(200 206 208);
    /* Light Mode */
    --primary-rgb: 33 53 70;
    --primary-color: rgb(var(--primary-rgb));

    --secondary-rgb: 143 152 159;
    --secondary-color: rgb(var(--secondary-rgb));

    --background-rgb: 255 253 250;
    --background-color: rgb(var(--background-rgb));

    /* Dark Mode */
    /* --primary-rgb-dark: 255 253 250;
    --primary-color-dark: rgb(var(--primary-rgb));

    --secondary-rgb-dark: 143 152 159;
    --secondary-color-dark: rgb(var(--secondary-rgb));

    --background-rgb-dark: 33 53 70;
    --background-color-dark: rgb(var(--background-rgb)); */

    /* Fonts */
    --primary-font: 'Basier Square', sans-serif;
    --secondary-font: 'JetBrains Mono', monospace;
    --monospace-font: 'JetBrains Mono', monospace;

    --writings-title-font: 'Instrument Serif', serif;
    --writings-font: 'Crimson Pro', serif;

    --main-font-size: 18px;

    /* Global Vars */
    /* --global-padding: 24px; */

    --global-content-frame-size: 600px;
    --global-horizontal-padding: 0 18px 0 18px;
    --global-vertical-padding: 18px 0 18px 0;
    --global-padding: 18px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-rgb: 222 220 217;
    --secondary-rgb: 143 152 159;
    --background-rgb: 22 31 39;
    --accent-color: rgb(var(--secondary-rgb) / 0.35);
  }
}

@font-face {
    font-family: "Basier Square";
    src: url("/fonts/Basier/basiersquare-regular-webfont.ttf")
}

@font-face {
  font-family: "Akira Outline";
  src: url("/fonts/Akira-Expanded/akira-outline.ttf");
}

@font-face {
  font-family: "Akira Solid";
  src: url("/fonts/Akira-Expanded/akira-solid.ttf");
}

@font-face {
  font-family: "Adobe Wood Type Ornaments";
  src: url("/fonts/adobe-wood-type-ornaments.ttf");
}

@font-face {
  font-family: "Alagard";
  src: url("/fonts/alagard.ttf");
  /* Courtesy of Hewett Tsoi, Dafont.com. https://www.dafont.com/hewett-tsoi.d4888 */
}


::selection {
  background-color: var(--accent-color);
}

html {
  background-color: var(--background-color);
  color: var(--primary-color);
  scrollbar-gutter: stable;
  scrollbar-color: var(--accent-color) transparent;
  scrollbar-width: thin;
  height: 100vh;
}

body {
  margin: 0 18px 0 18px;
  padding: 0;
  max-width: 100vw;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  font-family: var(--writings-title-font), serif;
  font-weight: 500;
  padding-bottom: var(--global-padding);
  margin: 0;
}

h2 {
  font-family: var(--writings-font);
  font-weight: 600;
  font-size: 1.2em;
  padding: 0 0 8px 0;
  margin: 0;
}

h3 {
  font-family: var(--secondary-font);
  text-transform: uppercase;
  font-weight: 300;
  color: var(--secondary-color);
  font-size: 0.8rem;
  margin: 0;
}

p, ul{
  font-family: var(--writings-font);
  font-size: 1.2rem;
}

ul {
  margin: 0;
}

.italic {
  font-style: italic;
}

li {
  margin: 0;
  padding: 0 0 1.2rem 0;
}

.action-break {
  /* content: "* * *"; */
  font-family: 'Adobe Wood Type Ornaments';
  /* position: relative; */
  top: 0.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  margin: 0;
  padding: 0;
}

line-separator {
  width: 100%;
  border-top: 1px solid var(--secondary-color);
  padding: var(--global-vertical-padding);
}

double-line-separator {
  width: 100%;
  border-top: 1px solid var(--secondary-color);
  padding: 2px 0;
  box-shadow: 0 1px 0 var(--secondary-color);
}

/* p.break {
  font-family: serif;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  margin: 0;
  padding: 0;
} */

p.indent {
    padding-left: 2rem;
}

table {
  font-family: var(--monospace-font);
  /* color: var(--secondary-color); */
  border-collapse: collapse;
}

.table-container td {
  border: 1px solid var(--secondary-color);
  padding: 8px;
}

.table-container td > a {
  text-decoration: underline dotted;
  color: var(--secondary-color);
  transition: color 0.35s;
}

.table-container td > a:hover {
  color: var(--primary-color);
}

.table-container {
  border: 1px solid var(--secondary-color);
  border-radius: 4px;
  overflow: hidden;
}

.table-container table {
  width: 100%;
}

.table-container tr:first-child td { border-top: none; }
.table-container tr:last-child td { border-bottom: none; }
.table-container td:first-child { border-left: none; }
.table-container td:last-child { border-right: none; }

.redacted {
  display: inline-block;
  height: 0.9em;              
  vertical-align: -0.1em;     
  width: calc(var(--n) * 0.62em); 
  background: var(--primary-color);  
  user-select: none;
}

.content-frame {
  width: 100%;
  max-width: var(--global-content-frame-size);
  display: flex;
  /* flex: 1; */
  flex-direction: column;
}

.hstack {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.vstack {
  display: flex;
  flex-direction: column;
}

.onethird {
  width: 33%;
}

.twothirds {
  width: 66%;
}

.half {
  width: 50%;
}
.align-right {
  align-items: flex-end;
}

.nav-content {
  margin: var(--global-horizontal-padding);
}

.links {
  margin-bottom: var(--global-padding)
}

header {
  position: sticky;
  top: 0;
  font-family: var(--monospace-font), sans-serif;
  height: 50px;
  width: calc(100% + 36px);
  /* max-width: var(--global-content-frame-size); */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(20px);
  background-color: rgb(var(--background-rgb) / 0.65);
  border-bottom: 1px solid rgb(var(--primary-rgb) / 0.1);
  margin-bottom: 24px;
  user-select: none;
  flex-shrink: 0;
}

footer {
  border-top: 1px solid rgb(var(--primary-rgb) / 0.2);
  margin-top: 36px;
}

footer * {
  max-width: var(--global-content-frame-size);
  font-family: var(--secondary-font);
  font-size: 0.75rem;
  color: var(--secondary-color);
  transition: color 0.35s;
}

footer a:hover {
  color: var(--primary-color);
}

nav a {
  text-decoration: none;
  color: var(--secondary-color);
  transition: color 0.35s;
  padding-left: 14px;
  font-size: 0.8rem;
  text-transform: uppercase;
}

nav a:hover {
  color: var(--primary-color);
}

section {
  --section-color: var(--secondary-color);
  color: var(--section-color);
  text-transform: uppercase;
  font-family: var(--secondary-font), sans-serif;
  font-size: 0.75rem;
  width: 100%;
  max-width: var(--global-content-frame-size);
  justify-content: flex-start;
  box-sizing: border-box;
  margin-bottom: var(--global-padding);
}

code {
  background-color: rgb(var(--secondary-rgb) / 0.2);
  padding: 0.1rem 0.2rem;
  /* margin: 0 0.4rem; */
  border-radius: 4px;
  /* border: 1px solid var(--primary-color); */
}

.post {
  user-select: none;
}

a.post {
  margin: 0;
  text-decoration: none;
  color: var(--primary-color);
  border-radius: 8px;
  padding: 18px;
  margin: 0 -18px;
  box-sizing: border-box;
  transition: background-color 0.35s;
  border-bottom: 1px solid rgb(var(--primary-rgb) / 0.1);
  /* border-left: 1px solid rgb(var(--primary-rgb) / 0.1); */
}

a.post > p {
  font-family: var(--writings-font);
  font-weight: 600;
  padding: 0 0 8px 0;
  margin: 0;
}

a.post > .post-subtitle {
  font-family: var(--secondary-font);
  color: var(--secondary-color);
  font-size: 0.8rem;
}

a.post:hover {
  background-color: rgb(var(--primary-rgb) / 0.1);
}

a.post.disabled {
  pointer-events: none;
  border: 1px dashed rgb(var(--primary-rgb) / 0.2);
  opacity: 0.6;
}

/* a.post.bottom-border {
  border-bottom: 1px solid rgb(var(--primary-rgb) / 0.1);
} */

a.appstore-link {
  border: 1px solid rgb(var(--primary-rgb) / 0.1);
  transition-duration: 0.35s;
}

a.appstore-link:hover {
  border: 1px solid rgb(var(--primary-rgb) / 0.2);
}

.contact p {
  font-family: var(--monospace-font);
  /* margin: 0; */
  font-size: 12px;
}

.contact section {
  margin-bottom: calc(var(--global-padding) / 2);
  margin-top: var(--global-padding);
}

a.contact {
  /* font-family: var(--monospace-font); */
  color: var(--secondary-color);
  text-decoration: none;
  transition: color 0.35s;
  font-size: inherit;
}

a.contact:hover {
  color: var(--primary-color);
}

.titletag {
  font-family: var(--monospace-font);
  font-size: 0.8rem;
  padding: 0.1rem 0.2rem;
  margin: 0 0.4rem;
  vertical-align: 0.1rem;
  border-radius: 4px;
  border: 1px solid var(--primary-color);
  user-select: none;
}

.avatar {
  border-radius: 50%;
  width: 50px;
  height: 50px;
}

.splash {
  font-size: 46px
}

.outline {
  font-family: 'Akira Outline', sans-serif;
}

.solid {
  font-family: 'Akira Solid', sans-serif;
}

.bio {
  margin-top: var(--global-padding);
  color: var(--primary-color);
}

.bio p {
  font-family: var(--monospace-font);
  margin: 0;
  font-size: 12px;
}

.bio h2 {
  font-size: 1em;
}

.bio tr {
  margin-left: var(--global-padding);
}

/* Revised Splash Bio Text a la ChatGPT */
.splash-block {
  width: 100%;
  /* font-size: 46px; */
  font-size: clamp(23px, 5vw, 46px);
  user-select: none;
}

.splash-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  gap: 0;
}

.word {
  display: inline-flex;
  white-space: nowrap;
}

.ticker {
  --tick-step: 1em;
  display: inline-block;
  position: relative;
  width: auto;
  height: var(--tick-step);
  overflow: hidden;
  vertical-align: baseline;
  line-height: 1;
  user-select: none;
}

.ticker-strip {
  position: absolute;
  left: 0;
  top: -2px;
  will-change: transform;
}

.ticker-glyph {
  display: block;
  height: var(--tick-step);
  overflow: hidden;
  width: auto;
  padding: 0;
  line-height: var(--tick-step);
  text-align: center;
  box-sizing: border-box;
}

.ticker.space {
  width: 0.5ch;
  pointer-events: none;
}

/* Home button/main header logo */
.home * {
  font-family: 'Alagard', sans-serif;
  text-decoration: none;
  color: var(--primary-color);
  opacity: 0.75;
  transition: opacity 0.35s;
}

.home a:hover {
  /* font-weight: 600; */
  opacity: 1;
}

.projects a {
  margin-bottom: var(--global-padding);
}

.breadcrumb {
  --breadcrumb-color: var(--secondary-color);
  margin-bottom: var(--global-padding);
}

.breadcrumb a {
  font-size: 12px;
  font-family: var(--monospace-font);
  text-decoration: none;
  color: var(--breadcrumb-color);
  transition: color 0.35s;
}

.breadcrumb a::before {
  content: "";
  display: inline-block;
  margin-right: 8px;
  width: 0.6rem;
  height: 0.6rem;
  background-color: var(--breadcrumb-color);
  mask: url("/assets/icons/linkarrow-left.svg") no-repeat center / contain;
  transition: background-color 0.35s;
}

.breadcrumb a:hover {
  --breadcrumb-color: var(--primary-color);
}

.tier::before {
  content: "";
  display: inline-block;
  margin-right: 8px;
  background-color: var(--c);
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 2px;
  vertical-align: -0.15em;
}