*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(147 197 253 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(147 197 253 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}

/* Modern reset: https://piccalil.li/blog/a-modern-css-reset/ */

/* Box sizing rules */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */

ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Prevent zooming when orientation changes on some iOS devices */

html {
  -moz-text-size-adjust: none;
       text-size-adjust: none;
  -webkit-text-size-adjust: none;
}

/* Set core root defaults */

html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */

a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* Make images easier to work with */

img,
picture {
  max-inline-size: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */

input,
button,
textarea,
select {
  font: inherit;
}

/* Adding cursor style to interactive elements */

button,
[type='button'],
[type='reset'],
[type='submit'],
[type='image'],
[type='checkbox'],
[type='radio'],
summary {
  cursor: pointer;
}

@font-face {
  font-family: 'FiraMono';
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  src: local(''),
    url(/assets/fonts/firamono/fira-mono-v14-latin-regular.woff2)
      format('woff2'),
    url(/assets/fonts/firamono/fira-mono-v14-latin-regular.woff) format('woff');
}

@font-face {
  font-family: Sanfran;
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: local(''),
    url(/assets/fonts/sanfran/sanfran-bold.woff2) format('woff2'),
    url(/assets/fonts/sanfran/sanfran-bold.woff) format('woff');
}

@font-face {
  font-family: Sanfran;
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: local(''),
    url(/assets/fonts/sanfran/sanfran-reg.woff2) format('woff2'),
    url(/assets/fonts/sanfran/sanfran-reg.woff) format('woff');
}

@font-face {
  font-family: Sanfran;
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: local(''),
    url(/assets/fonts/sanfran/sanfran-thin.woff2) format('woff2'),
    url(/assets/fonts/sanfran/sanfran-thin.woff) format('woff');
}

@font-face {
  font-family: Londrina;
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: local(''),
    url(/assets/fonts/londrina/londrinasolid-regular-webfont.woff2) format('woff2'),
    url(/assets/fonts/londrina/londrinasolid-regular-webfont.woff) format('woff');
}

:root {
  --color-dark: #252525;
  --color-dark-glare: #333;
  --color-light: #f4f4f4;
  --color-light-glare: #9EA3A6;
  --color-primary: #f05123;
  --color-primary-glare: #f08323;
  --space-2xs: clamp(0.5rem, 0.46rem + 0.19vw, 0.625rem);
  --space-xs: clamp(0.75rem, 0.69rem + 0.29vw, 0.9375rem);
  --space-s: clamp(1rem, 0.92rem + 0.39vw, 1.25rem);
  --space-m: clamp(2rem, 1.84rem + 0.78vw, 2.5rem);
  --space-l: clamp(3rem, 2.77rem + 1.17vw, 3.75rem);
  --space-xl: clamp(5rem, 4.61rem + 1.94vw, 6.25rem);
  --space-2xl: clamp(8rem, 7.38rem + 3.11vw, 10rem);
  --space-3xl: clamp(13rem, 11.99rem + 5.05vw, 16.25rem);
  --space-xs-s: clamp(0.75rem, 0.59rem + 0.78vw, 1.25rem);
  --space-s-m: clamp(1rem, 0.73rem + 1.36vw, 1.875rem);
  --space-m-l: clamp(1.5rem, 1.19rem + 1.55vw, 2.5rem);
  --space-l-xl: clamp(2rem, 1.46rem + 2.72vw, 3.75rem);
  --space-l-2xl: clamp(2rem, 1.07rem + 4.66vw, 5rem);
  --space-xl-2xl: clamp(3rem, 2.38rem + 3.11vw, 5rem);
  --space-2xl-3xl: clamp(4rem, 2.91rem + 5.44vw, 7.5rem);
  --size-step-min-1: clamp(0.8125rem, 0.79rem + 0.10vw, 0.875rem);
  --size-step-0: clamp(1rem, 0.92rem + 0.39vw, 1.25rem);
  --size-step-1: clamp(1.1875rem, 1.01rem + 0.87vw, 1.75rem);
  --size-step-2: clamp(1.4375rem, 1.11rem + 1.65vw, 2.5rem);
  --size-step-3: clamp(1.75rem, 1.19rem + 2.82vw, 3.5625rem);
  --size-step-4: clamp(2.0625rem, 1.15rem + 4.56vw, 5rem);
  --size-step-5: clamp(2.5rem, 1.08rem + 7.09vw, 7.0625rem);
  --size-step-6: clamp(3rem, 0.84rem + 10.78vw, 9.9375rem);
  --font-display: Londrina,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  --font-base: Sanfran,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  --font-mono: FiraMono,monospace;
}

/* Global variables */

:root {
  --gutter: var(--space-s-m);
  --border-radius: 0.5rem;
  --transition-duration: 250ms;
  --transition-timing: ease;
  --wrapper-width: clamp(16rem, 93vw, 85rem);
  --tracking: -0.05ch;
  --tracking-s: -0.075ch;
}

/*
  Global styles

  Low-specificity, global styles that apply to the whole
  project: https://cube.fyi/css.html
*/

body {
  color: var(--color-light);
  background-color: var(--color-dark);
  font-size: var(--size-step-1);
  font-family: var(--font-base);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--tracking);
  display: flex;
  flex-direction: column;
}

main {
  flex: auto;
}

/* Base typesetting */

h1{
  line-height: 1;
  letter-spacing: var(--tracking-s);
  font-family: var(--font-display);
}

h2,
h3 {
  line-height: 1;
  letter-spacing: var(--tracking-s);
  font-family: var(--font-base);
  font-weight: 700;
}

h1 {
  font-size: var(--size-step-5);
}

h2 {
  font-size: var(--size-step-4);
}

h3 {
  font-size: var(--size-step-3);
}

/* Set line lengths */

p,
li,
blockquote:not([class]) {
  max-inline-size: 50ch;
}

h1,
h2,
h3 {
  max-inline-size: 20ch;
}

blockquote {
  border-inline-start: 0.8rem solid var(--color-primary);
  padding: var(--space-m-l);
  font-size: var(--size-step-1);
}

blockquote > * + * {
  margin-block-start: var(--space-m-l);
}

blockquote :last-child {
  font-family: var(--font-base);
  font-style: normal;
  font-size: var(--size-step-2);
}

svg {
  block-size: 2ex;
  inline-size: auto;
  flex: none;
}

[role='list'] {
  padding: 0;
}

article [href^='http']:not([href*='flamedfury.com']):not(.no-indicator) {
  padding-inline-end: 0.8em;
}

article [href^='http']:not([href*='flamedfury.com']):not(.no-indicator)::after {
  position: absolute;
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  background-image: url('/assets/images/icn-external.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60% auto;
  /* alternative text rules */
  content: '(external link)';
  overflow: hidden;
  white-space: nowrap;
  text-indent: 1em; /* the width of the icon */
}

a {
  color: currentcolor;
  font-weight: bold;
}

article a {
  color: var(--color-primary);
}

a:hover {
  text-decoration: none;
  color: transparent;
  background: radial-gradient(rgb(220, 38, 38), rgb(234, 88, 12), rgb(202, 138, 4));
  background-size: 50%;
  background-clip: text;
  -webkit-background-clip: text;
}

:focus {
  color: transparent;
  background: radial-gradient(rgb(220, 38, 38), rgb(234, 88, 12), rgb(202, 138, 4));
  background-size: 50%;
  background-clip: text;
  -webkit-background-clip: text;
  outline: 3px dashed var(--color-primary);
  outline-offset: 0.3ch;
}

:target {
  scroll-margin-top: 2ex;
}

main:focus {
  outline: none;
}

/* Base selection styles that invert whatever colours are rendered */

::-moz-selection {
  background: var(--color-light);
  color: var(--color-dark);
}

::selection {
  background: var(--color-light);
  color: var(--color-dark);
}

.preload-transitions * {
  transition: none !important;
}

/* Base heading colours */

h1,
h2,
h3,
h4 {
  color: var(--color-primary);
}

header h1 {
  color: var(--color-light);
}

time,
.meta {
  font-size: var(--size-step-0);
  opacity: 0.8;
}

figcaption {
  font-size: var(--size-step-0);
  opacity: 0.8;
  text-align: center;
}

iframe {
	width: 100%;
	aspect-ratio: 4 / 2;
}

.blog h1 {
  font-size: var(--size-step-4);
}

.blog h2 {
  font-size: var(--size-step-3);
}

.blog h3 {
  font-size: var(--size-step-2);
}

.blog img {
  max-inline-size: var(--max-img-width, 100%);
  block-size: auto;
  border-radius: var(--space-xs, 1rem);
}

.blog aside,
.blog .table-of-contents {
  --border-width: 0.2rem;
  --border: var(--border-width) dashed var(--color-primary);
  background-color: var(--color-dark);
  border: var(--border);
  border-radius: var(--border-radius);
  padding-inline: var(--space-s-m);
  position: relative;
  color: var(--color-light);
}

.blog aside {
  padding-inline-start: var(--space-l-xl);
  padding-block: var(--space-s-m);
}

.bookshelf > img {
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--space-xs, 1rem);
  border: 1px solid var(--color-dark);
  width: 100%;
  height: 100%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle drop shadow */
  transition: box-shadow 0.3s ease; /* Add a smooth transition effect */
}

.bookshelf > img:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Increase shadow on hover */
  transform: scale(1.25); /* Add a slight scale effect on hover */
}

.button {
  color: var(--button-text, var(--color-light));
  background-color: var(--button-bg, var(--color-primary));
  border: 2px solid var(--button-border, var(--color-primary));
  border-radius: var(--border-radius);
  display: inline-block;
  font: inherit;
  padding: 0.3em 1em;
  font-weight: 700;
  transition-property: background-color, border;
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing);
  text-decoration: none;
}

.button:hover {
  --button-bg: var(--color-dark);
  --button-text: var(--color-light);
  --button-border: var(--color-primary);
}

.card {
  background: var(--color-dark-glare);
  border: 4px solid var(--color-dark-glare);
  color: var(--color-light);
  padding: var(--space-m-l);
  border-radius: var(--border-radius);
  max-width: unset;
}

.card ::-moz-selection {
  color: var(--color-dark);
  background: var(--color-primary-glare);
}

.card ::selection {
  color: var(--color-dark);
  background: var(--color-primary-glare);
}

.card.note span {
  font-size: var(--size-step-0);
  background-color: var(--color-primary);
  border-radius: var(--border-radius);
  padding: 0.1rem 0.4rem;
  color: var(--color-dark);
  margin-right: var(--gutter);
}

.card.note p {
  font-size: var(--size-step-0);
}

.card h2,
.card h3 {
  color: var(--text-light);
}

.card h2 {
  font-size: var(--size-step-3);
}

.card h2 a,
.card h3 a {
  color: var(--text-light);
  text-decoration: none;
}

.card:not(.note):hover,
.card:not(.note):focus-within {
  border: 4px dashed var(--color-primary);
}

.card:not(.note) a {
  text-decoration: none;
}

.card:not(.note):focus-within a:focus {
  outline: none;
}

code,
pre {
  padding: 0.125em 0.4em;
  font-family: var(--font-mono);
  background: var(--color-dark-glare);
  border-radius: var(--border-radius);
  color: var(--color-light);
  font-size: var(--size-step-0);
}

pre[class*='language-'] {
  padding: var(--space-s-m);
}

code[class*='language-'] {
  padding: 0;
}

code[class*='language-'],
pre[class*='language-'] {
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  color: var(--color-light);
  background: var(--color-dark-glare);
  line-height: 1.5;
  border-radius: var(--border-radius);

  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;

  -webkit-hyphens: none;
  hyphens: none;
}

code[class*='language-']::-moz-selection,
pre[class*='language-']::-moz-selection,
code[class*='language-'] ::-moz-selection,
pre[class*='language-'] ::-moz-selection {
  background: var(--color-primary);
}

code[class*='language-']::-moz-selection, pre[class*='language-']::-moz-selection, code[class*='language-'] ::-moz-selection, pre[class*='language-'] ::-moz-selection {
  background: var(--color-primary);
}

code[class*='language-']::selection,
pre[class*='language-']::selection,
code[class*='language-'] ::selection,
pre[class*='language-'] ::selection {
  background: var(--color-primary);
}

:not(pre) > code[class*='language-'] {
  white-space: normal;
  border-radius: var(--border-radius);
  padding: 0.1em;
}

pre[class*='language-'] {
  overflow: auto;
  position: relative;
}

.language-css > code,
.language-sass > code,
.language-scss > code {
  color: #fd9170;
}

[class*='language-'] .namespace {
  opacity: 0.7;
}

.token.atrule {
  color: #d2b1e7;
}

.token.attr-name {
  color: #ffcb6b;
}

.token.attr-value {
  color: #80cbc4;
}

.token.attribute {
  color: #80cbc4;
}

.token.boolean {
  color: #d2b1e7;
}

.token.builtin {
  color: #ffcb6b;
}

.token.cdata {
  color: #80cbc4;
}

.token.char {
  color: #80cbc4;
}

.token.class {
  color: #ffcb6b;
}

.token.class-name {
  color: #ff8b59;
}

.token.color {
  color: #ff8b59;
}

.token.comment {
  color: #779daf;
}

.token.constant {
  color: #d2b1e7;
}

.token.deleted {
  color: #ee979c;
}

.token.doctype {
  color: #546e7a;
}

.token.entity {
  color: #ee979c;
}

.token.function {
  color: #d2b1e7;
}

.token.hexcode {
  color: #ff8b59;
}

.token.id {
  color: #d2b1e7;
  font-weight: bold;
}

.token.important {
  color: #d2b1e7;
  font-weight: bold;
}

.token.inserted {
  color: #80cbc4;
}

.token.keyword {
  color: #d2b1e7;
  font-style: italic;
}

.token.number {
  color: #fd9170;
}

.token.operator {
  color: #89ddff;
}

.token.prolog {
  color: #546e7a;
}

.token.property {
  color: #80cbc4;
}

.token.pseudo-class {
  color: #80cbc4;
}

.token.pseudo-element {
  color: #80cbc4;
}

.token.punctuation {
  color: #80cbc4;
}

.token.regex {
  color: #ff8b59;
}

.token.selector {
  color: #ee979c;
}

.token.string {
  color: #f48ea2;
}

.token.symbol {
  color: #d2b1e7;
}

.token.tag {
  color: #ee979c;
}

.token.unit {
  color: #ee979c;
}

.token.url {
  color: #fd9170;
}

.token.variable {
  color: #ee979c;
}

.codepen {
  padding: var(--space-xs);
  color: var(--color-text-accent);
  border: 2px dashed var(--color-bg-accent);
}

.cp_embed_wrapper {
  position: relative;
  overflow: auto;
  display: grid;
  place-items: center;
  grid-template-areas: 'container';
  resize: horizontal;
}

.cp_embed_wrapper iframe {
  grid-area: container;
  inline-size: 100%;
}

/*
based on SIDEBAR
More info: https://every-layout.dev/layouts/sidebar/
*/

dl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

dt {
  flex-basis: 10rem;
  flex-grow: 1;
}

dd {
  flex-basis: 0;
  flex-grow: 999;
  min-width: 70%;
  display: block;
}

.features {
    --grid-placement: auto-fit;
    --grid-min-item-size: clamp(16rem, 33%, 20rem);
    --gutter: var(--space-l-xl);
    --flow-space: var(--space-s);
    text-align: center;
}

form {
  display: grid;
	padding: 2em 0;
}

input[type='text'], input[type='email'], textarea {
  background-color: var(--color-dark-glare);
  border: 2px solid var(--color-primary);
  color: var(--color-text);
}

input[type='text']::-moz-placeholder, input[type='email']::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 0.5;
  font-size: var(--size-step-0);
}

input[type='text']::placeholder, input[type='email']::placeholder, textarea::placeholder {
  opacity: 0.5;
  font-size: var(--size-step-0);
}

input,
textarea,
button {
  margin-bottom: 1em;
}

dialog {
  background-color: var(--color-dark);
  border: none;
  border-radius: var(--border-radius);
}

dialog + button {
  all: unset;
  cursor: pointer;
}

dialog::backdrop {
  background-color: var(--color-dark);
  opacity: 0.75;
}

.home{
  --sidebar-content-align-items: flex-start;
  --sidebar-target-width: 25rem;
}

.updates {
  --skew-angle: -5deg;
  --background: linear-gradient(
    45deg, 
    #dc2626, 
    #ea580c, 
    #ca8a04
  );
  --region-space-top: var(--space-l-2xl);
  position: relative;
  isolation: isolate;
}

.updates::after {
  content: '';
  background: var(--background);
  position: absolute;
  z-index: -1;
  inset: 0;
  transform: skewY(var(--skew-angle));
}

.updates h3 {
  color: var(--color-light);
  margin-inline: var(--space-s);
}

.updates li {
  font-size: var(--size-step-0);
}

.updates-date {
  font-weight: 700;
}

.updates p {
  text-align: center;
}

.updates-link {
  color: var(--color-light);
  font-size: var(--size-step-0);
}

nav.navbar {
  --nav-button-display: none;
  --nav-position: static;
}

nav.navbar ul {
  --nav-list-background: transparent;
  --nav-list-layout: row;
  --nav-list-position: static;
  --nav-list-padding: 0;
  --nav-list-height: auto;
  --nav-list-width: 100%;
  --nav-list-transform: none;
  --nav-list-visibility: visible;
}

/* set on parent div to get the right z-index context */

.ontop {
  z-index: 2;
  position: relative;
}

nav.navbar {
  position: var(--nav-position, absolute);
  inset-block-start: 0.5rem;
  inset-inline-end: 0.1rem;
}

/* Remove default list styling and create layout for list */

nav.navbar ul {
  background: var(--nav-list-background, var(--color-light));
  display: flex;
  flex-direction: var(--nav-list-layout, column);
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
  block-size: var(--nav-list-height, 100vh);
  list-style: none;
  margin: 0;
  padding: var(--nav-list-padding, var(--space-l) var(--space-s));
  position: var(--nav-list-position, fixed);
  inset-block-start: 0; /* Logical property. Equivalent to top: 0; */
  inset-inline-end: 0; /* Logical property. Equivalent to right: 0; */
  inline-size: var(--nav-list-width, min(22rem, 100vw));
  visibility: var(--nav-list-visibility, visible);
}

/* Basic link styling */

nav.navbar a {
  --text-color: var(--color-light);
  color: var(--text-color);
  padding: 0.1rem 0.3rem;
  text-decoration: none;
  display: block;
  text-decoration-line: underline;
  text-decoration-color: var(--border-color, transparent);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.3em;
}

@media (min-inline-size: 50em) {
  nav.navbar ul {
    justify-content: flex-end;
    gap: var(--space-xs);
  }

  nav.navbar {
    margin-right: var(--space-l);
  }

  nav.navbar a {
    background-color: transparent;
    border-radius: 0;
  }
}

/* Change the border-color on :hover and :focus */

nav.navbar a:where(:hover, :focus) {
  --border-color: var(--color-primary);
}

/* Change border-color and color for the active page */

nav.navbar [aria-current='page'] {
  --border-color: var(--color-primary);
  --text-color: var(--color-text);
}

nav.navbar span {
  font-size: var(--size-step-0);
  font-weight: bold;
  text-transform: uppercase;
  padding-inline-end: var(--space-xs);
}

/* seasonal page */

/* books */

.book-meta {
  padding: 0;
  list-style: none;
}

.book-title {
  font-size: var(--size-step-0);
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

.book-authors {
  color: var(--color-light-glare);
  font-size: var(--size-step-min-1);
}

/* seasonal playlists */

.playlist {
  margin-bottom: 2em;
  -moz-columns: 3 14rem;
       columns: 3 14rem;
  -moz-column-gap: var(--space-size-s);
       column-gap: var(--space-size-s);
  -moz-column-fill: balance;
       column-fill: balance;
  list-style: none;
  padding: 0;
}

.playlist-cover {
  display: grid;
  place-content: center;
}

.playlist-meta {
  text-align: center;
}

.playlist-track {
  font-size: var(--size-step-0);
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

.playlist-track-meta {
  color: var(--color-light-glare);
  font-size: var(--size-step-min-1);
}

.playlist-track-artist {
  font-weight: 700;
}

/* now page */

/* now: omg.lol status.lol */

.now-status {
  background: var(--color-dark-glare);
  border: 4px solid var(--color-dark-glare);
  color: var(--color-light);
  font-size: var(--size-step-0);
  padding: var(--space-m);
  border-radius: var(--border-radius);
  max-width: unset;
}

.now-flex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-bottom: var(--space-s);
}

.now-box {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  padding: var(--space-s);
}

/* now: games */

.game-name {
  font-size: var(--size-step-0);
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

/* now: artists */

.artist-name {
  font-size: var(--size-step-0);
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

.artist-plays {
  color: var(--color-light-glare);
  font-size: var(--size-step-min-1);
}

/* now: tracks */

.track-name {
  font-size: var(--size-step-0);
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

.track-artist-name, .track-plays {
  color: var(--color-light-glare);
  font-size: var(--size-step-min-1);
}

/* now: albums */

.album-name {
  font-size: var(--size-step-0);
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

.album-artist-name {
  color: var(--color-light-glare);
  font-size: var(--size-step-min-1);
}

/* now: trakt tv shows */

.show-title {
  font-size: var(--size-step-0);
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

.show-episode-title {
  color: var(--color-light-glare);
  font-size: var(--size-step-min-1);
}

/* now: trakt movies */

.movie-title {
  font-size: var(--size-step-0);
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

.movie-date {
  color: var(--color-light-glare);
  font-size: var(--size-step-0);
}

/* now: images */

.now__img {
  border-radius: var(--space-xs, 1rem);
  border: 1px solid var(--color-dark);
}

.now__artist {
  --min: 15rem;
  --aspect-ratio: 1/1;
  --gap: 0;
  aspect-ratio: var(--aspect-ratio);
  width: auto;
}

.now__artist-img {
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}

.prose {
  --flow-space: var(--space-m-l);
  --wrapper-width: clamp(16rem, 93vw, 55rem);
}

.prose :is(h2, h3, h4) + * {
  --flow-space: var(--space-s-m);
}

.prose .heading-anchor:is(:hover, :focus) {
  text-decoration: none;
}

.prose .heading-anchor {
  text-decoration: none;
}

.prose mark {
  background: var(--color-primary-glare);
}

.prose :not(.grid) li + li {
  margin-top: var(--space-s);
}

.prose :where(ul:not(.grid), ol:not(.grid)) {
  padding-inline-start: var(--space-s-m);
}

.section > .seperator:first-child {
  transform: rotate(180deg) translateY(-1px);
}

.section__inner {
  background: var(--spot-color, var(--color-dark-glare));
  color: var(--color-light);
}

.section blockquote {
  font-weight: 700;
  line-height: 1;
  font-size: var(--size-step-4);
  letter-spacing: var(--tracking-s);
}

.section :is(h1, h2, h3, blockquote) {
  opacity: 95%;
}

.seperator {
  display: block;
  block-size: 3.5em;
  inline-size: 100%;
  fill: var(--spot-color, var(--color-dark-glare));
}

.site-foot {
  padding: var(--space-s-m);
  background: var(--color-dark-glare);
  color: var(--color-light);
}

.site-foot__notes {
  gap: var(--space-xs-s);
  text-align: center;
}

.site-foot__inner {
  display: flex;
  gap: var(--space-s);
  align-items: center;
  justify-content: center;
}

:not(nav#social).site-foot__inner {
  flex-wrap: wrap;
}

.site-foot svg {
  block-size: 0.9em;
  inline-size: 0.9em;
}

.site-foot table td {
  border: 0;
}

.site-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

@media (min-width: 45em) {
  .site-head {
    justify-content: space-between;
  }
}

.logo {
  font-weight: bold;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  letter-spacing: var(--tracking-s);
  padding: var(--space-xs) 0;
  font-size: var(--size-step-1);
}

.logo:hover,
.logo:focus {
  color: transparent;
  background: radial-gradient(rgb(220, 38, 38), rgb(234, 88, 12), rgb(202, 138, 4));
  background-size: 50%;
  background-clip: text;
  -webkit-background-clip: text;
}

.logo svg { 
  --fillColorTop: #fbfbfb;
  --fillColorBot: #f4f4f4;
}

.logo:hover svg,
.logo:focus svg {
  --fillColorTop: #f05123;
  --fillColorBot: #f08323;
}

@media (min-width: 85em) {
  .logo {
    transform: translateX(var(--gutter));
  }
}

.skip-link {
  clip: rect(1px, 1px, 1px, 1px);
  display: block;
  block-size: 1px;
  overflow: hidden;
  position: absolute;
  inline-size: 1px;
  top: 1rem;
  left: 1rem;
  z-index: 999;
}

.visually-hidden {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

.skip-link:focus,
.visually-hidden:focus {
  clip: auto;
  block-size: auto;
  overflow: visible;
  inline-size: auto;
  background-color: var(--color-dark);
  color: var(--color-light);
  padding: var(--space-s-m);
  line-height: 1;
}

.skip-link:not(:focus) {
  border: 0;
  clip: rect(0 0 0 0);
  block-size: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  inline-size: 1px;
  white-space: nowrap;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5rem 0;
}

td,
th {
  border: 1px solid var(--color-dark);
  text-align: left;
  padding: 1rem;
}

tr:nth-child(even) {
  /* Set every other cell slightly darker. Improves readability. */
  background: var(--color-dark-glare);
}

.centered {
  display: flex;
  align-items: center;
  justify-content: center;
}

.title-text {
  color: var(--color-light);
  font-family: var(--font-display);
  font-size: var(--size-step-6);
  text-shadow: var(--color-dark-glare);
  text-transform: uppercase;
  transform: rotate(-7deg);
  word-break: break-word;
}

.gradient-text {
  color: transparent;
  background: radial-gradient(rgb(220, 38, 38), rgb(234, 88, 12), rgb(202, 138, 4));
  padding: 0.6rem 0;
  background-size: 50%;
  background-clip: text;
  -webkit-background-clip: text;
}

.vinyl {
	display: flex;
	gap: var(--space-s-m);
	align-items: center;
	justify-content: space-between;
	border-top: 2px dashed;
	border-bottom: 2px dashed;
	padding: var(--space-s-m) 0;
	position: relative;
}

.vinyl:last-child {
	border-top: none;
}

.vinyl img {
	width: 100%;
	height: 100%;
	-o-object-fit:cover;
	   object-fit:cover;
	outline: 2px solid var(--color-dark-glare);
}

.vinyl picture {
	margin-bottom: var(--space-s-m,1em);
}

.vinyl h3 {
  font-size: var(--size-step-1);
}

.vinyl span {
  font-size: var(--size-step-0);
}

.bg-transparent{
	background-color:transparent
}

/* Webmentions */

.webmentions a:has(img) {
  text-decoration: none;
}

.webmentions h3 {
  font-size: var(--size-step-1);
}

.webmentions img {
  --size: 2.5rem;
  aspect-ratio: 1;
  background: 0 0;
  block-size: var(--size);
  border: none;
  border-radius: 50%;
  display: inline;
  inline-size: var(--size);
  outline-offset: 5px;
  padding: 0;
}

.webmention-replies .webmention__meta {
  display: flex;
  flex-direction: column;
}

.webmention {
  padding: var(--space-xs);
  border: 2px solid var(--color-dark-glare);
}

.webmention .webmention-text {
  word-break: break-all;
}

.webmention .webmention-text > a,
.webmentions h3 span {
  font-size: var(--size-step-0);
  opacity: 0.8;
  margin-inline: 0.2rem;
  font-weight: normal;
}

.webmentions input[type='url'] {
  background-color: var(--color-dark-glare);
  border: 2px solid var(--color-primary);
  color: var(--color-text);
}

.webmentions input[type='url']::-moz-placeholder {
  opacity: 0.5;
  font-size: var(--size-step-0);
}

.webmentions input[type='url']::placeholder {
  opacity: 0.5;
  font-size: var(--size-step-0);
}

.webmentions .button {
  margin-inline-end: 0;
  padding: 0.1rem var(--space-m-l);
  line-height: 1.3;
}

@media screen and (min-width: 30em) {
  .webmention-replies .webmention__meta {
    display: grid;
    grid-template-columns: 50px 1fr 220px;
  }

  .webmention-replies .webmention__meta time {
    display: inline;
    margin-block-start: 0;
    text-align: right;
    font-weight: normal;
  }
}

.youtube-embed {
  aspect-ratio: 16 / 9;
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space, 1rem);
  justify-content: flex-start;
  align-items: center;
}

/* AUTO GRID
Related Every Layout: https://every-layout.dev/layouts/grid/
More info on the flexible nature: https://piccalil.li/tutorial/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/
A flexible layout that will create an auto-fill grid with
configurable grid item sizes

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-s-m)): This defines the space
between each item.

--grid-min-item-size (14rem): How large each item should be
ideally, as a minimum.

--grid-placement (auto-fill): Set either auto-fit or auto-fill
to change how empty grid tracks are handled */

.grid {
  display: grid;
  grid-template-columns: repeat(
    var(--grid-placement, auto-fill),
    minmax(var(--grid-min-item-size, 16rem), 1fr)
  );
  gap: var(--gutter, var(--space-s-l));
}

.grid[data-rows='masonry'] {
  grid-template-rows: masonry;
  align-items: start;
}

.grid[data-layout='50-50'] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 50vw, 28rem);
}

/*
SIDEBAR
More info: https://every-layout.dev/layouts/sidebar/
A layout that allows you to have a flexible main content area
and a "fixed" width sidebar that sits on the left or right.
If there is not enough viewport space to fit both the sidebar
width *and* the main content minimum width, they will stack
on top of each other

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-size-1)): This defines the space
between the sidebar and main content.

--sidebar-target-width (20rem): How large the sidebar should be

--sidebar-content-min-width(50%): The minimum size of the main content area

EXCEPTIONS
.sidebar[data-direction='rtl']: flips the sidebar to be on the right
*/

.sidebar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gutter, var(--space-size-1));
	align-items: var(--sidebar-content-align-items, normal);
}

.sidebar:not([data-direction]) > :first-child {
	flex-basis: var(--sidebar-target-width, 20rem);
	flex-grow: 1;
}

.sidebar:not([data-direction]) > :last-child {
	flex-basis: 0;
	flex-grow: 999;
	min-width: var(--sidebar-content-min-width, 50%);
}

/*
A flipped version where the sidebar is on the right
*/

.sidebar[data-direction='rtl'] > :last-child {
	flex-basis: var(--sidebar-target-width, 20rem);
	flex-grow: 1;
}

.sidebar[data-direction='rtl'] > :first-child {
	flex-basis: 0;
	flex-grow: 999;
	min-width: var(--sidebar-content-min-width, 50%);
}

/*
SWITCHER
More info: https://every-layout.dev/layouts/switcher/
A layout that allows you to lay **2** items next to each other
until there is not enough horizontal space to allow that.

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-size-1)): This defines the space
between each item

--switcher-target-container-width (40rem): How large the container
needs to be to allow items to sit inline with each other

--switcher-vertical-alignment How items should align vertically.
Can be any acceptable flexbox alignment value.
*/

.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-size-1));
  align-items: var(--switcher-vertical-alignment, flex-start);
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-target-container-width, 40rem) - 100%) * 999);
}

/* Max 2 items,
so we target everything *after* those */

.switcher > :nth-last-child(n + 3),
.switcher > :nth-last-child(n + 3) ~ * {
  flex-basis: 100%;
}

.content {
  --wrapper-width: clamp(16rem, 93vw, 75rem);
  display: grid;
  grid-template-columns:
    1fr
    min(48ch, 100%)
    1fr;
}

.content > * {
  grid-column: 2;
}

.content .breakout {
  inline-size: 100%;
  grid-column: 1 / 4;
}

/* 
FLOW UTILITY
Like the Every Layout stack: https://every-layout.dev/layouts/stack/
Info about this implementation: https://piccalil.li/quick-tip/flow-utility/ 
*/

.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}

/**
 * REGION
 * Add consistent vertical padding to create regions of content
 * Can either be configured by setting --region-space or use a default from the space scale
 */

.region {
  padding-block-start: var(--region-space-top, var(--space-m-l));
  padding-block-end: var(--region-space-bottom, var(--space-m-l));
}

/**
 * WRAPPER
 * Sets a max width, adds a consistent gutter and horizontally
 * centers the contents
 * Info: https://piccalil.li/quick-tip/use-css-clamp-to-create-a-more-flexible-wrapper-utility/
 */

.wrapper {
  max-inline-size: var(--wrapper-max-width, 85rem);
  margin-inline: auto;
  position: relative;
  inline-size: var(--wrapper-width, 85rem);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.m-auto {
  margin: auto;
}

.my-s-m {
  margin-top: clamp(1rem, 0.73rem + 1.36vw, 1.875rem);
  margin-bottom: clamp(1rem, 0.73rem + 1.36vw, 1.875rem);
}

.mt-l-xl {
  margin-top: clamp(2rem, 1.46rem + 2.72vw, 3.75rem);
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.h-\[100px\] {
  height: 100px;
}

.resize {
  resize: both;
}

.grid-flow-row {
  grid-auto-flow: row;
}

.grid-flow-col {
  grid-auto-flow: column;
}

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.overflow-hidden {
  overflow: hidden;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-step-0 {
  font-size: clamp(1rem, 0.92rem + 0.39vw, 1.25rem);
}

.font-bold {
  font-weight: 700;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

.no-underline {
  text-decoration-line: none;
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.spot-color-dark {
  --spot-color: #252525;
}

.spot-color-primary {
  --spot-color: #f05123;
}

@media (min-width: 50em) {

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:justify-between {
    justify-content: space-between;
  }
}