@charset "UTF-8";
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/Figtree-VariableFont_wght.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/Figtree-Italic-VariableFont_wght.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/GeistMono-VariableFont_wght.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/GeistMono-Italic-VariableFont_wght.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-VariableFont_wght.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/PlayfairDisplay-Italic-VariableFont_wght.woff2") format("woff2");
}
/* SCSS tokens */
/* Breakpoints */
/* Styles cascade from desktop in both directions — smaller breakpoints cascade down (tablet > mobile landscape > mobile portrait) and larger breakpoints cascade up (1280px > 1440px > 1920px) */
:root {
  /* My theme site is largely based on the MediaWiki skin "Citizen", hence why a lot of the variables are from that skin. */
  /* Fonts */
  --font-family-primary: 'Figtree', sans-serif;
  --font-family-serif: 'Playfair Display', serif;
  --font-family-monospace: 'Geist Mono', monospace;
  /* Font weights */
  --font-weight-base: 400;
  --font-weight-light: calc(var(--font-weight-base) - 100);
  --font-weight-regular: var(--font-weight-base);
  --font-weight-medium: calc(var(--font-weight-base) + 100);
  --font-weight-semi-bold: calc(var(--font-weight-base) + 200);
  --font-weight-bold: calc(var(--font-weight-base) + 300);
  --font-weight-extra-bold: calc(var(--font-weight-base) + 400);
  --font-weight-black: calc(var(--font-weight-base) + 500);
  /* Font sizes */
  --font-size-base: 1rem;
  --font-size-x-small: calc(0.75 * var( --font-size-base ));
  --font-size-small: calc(0.875 * var( --font-size-base ));
  --font-size-medium: var( --font-size-base );
  --font-size-large: calc(1.125 * var( --font-size-base ));
  --font-size-x-large: calc(1.25 * var( --font-size-base ));
  --font-size-xx-large: calc(1.5 * var( --font-size-base ));
  --font-size-xxx-large: calc(1.75 * var( --font-size-base ));
  --font-size-4x-large: calc(2 * var( --font-size-base ));
  --font-size-5x-large: calc(2.5 * var( --font-size-base ));
  --font-size-6x-large: calc(3 * var( --font-size-base ));
  /* Line heights */
  --line-height-xx-small: 1.125rem;
  --line-height-x-small: 1.25rem;
  --line-height-small: 1.375rem;
  --line-height-medium: 1.625rem;
  --line-height-large: 1.75rem;
  --line-height-x-large: 1.875rem;
  --line-height-xx-large: 2.125rem;
  --line-height-xxx-large: 2.375rem;
  /* Spacings */
  --space-unit: 1rem;
  --space-xxxs: calc( 0.125 * var( --space-unit ) );
  --space-xxs: calc( 0.25 * var( --space-unit ) );
  --space-xs: calc( 0.5 * var( --space-unit ) );
  --space-sm: calc( 0.75 * var( --space-unit ) );
  --space-md: var( --space-unit );
  --space-lg: calc( 1.25 * var( --space-unit ) );
  --space-xl: calc( 1.5 * var( --space-unit ) );
  --space-xxl: calc( 2 * var( --space-unit ) );
  --space-xxxl: calc( 3 * var( --space-unit ) );
  /* Border / Border radius */
  --border-width-base: 1px;
  --border-width-thick: 2px;
  --border-style-solid: solid;
  --border-style-dashed: dashed;
  --border-style-inset: inset;
  --border-color-progressive: var( --color-progressive );
  --border-color-progressive--hover: var( --color-progressive--hover );
  --border-color-progressive--active: var( --color-progressive--active );
  --border-color-base: rgb( 255 255 255 / 0.1 );
  --border-color-subtle: rgb( 255 255 255 / 0.05 );
  --border-color-muted: rgb( 255 255 255 / 0.03 );
  --border-color-interactive: rgb( 255 255 255 / 0.1 );
  --border-color-interactive--hover: rgb(255 255 255 / 0.2);
  --border-color-interactive--active: rgb(255 255 255 / 0.3);
  --border-color-disabled: rgb( 255 255 255 / 0.025 );
  --border-color-inverted: #fff;
  --border-base: var( --border-width-base ) var( --border-style-solid ) var( --border-color-base );
  --border-subtle: var( --border-width-base ) var( --border-style-solid ) var( --border-color-subtle );
  --border-muted: var( --border-width-base ) var( --border-style-solid ) var( --border-color-muted );
  --border-interactive: var( --border-width-base ) var( --border-style-solid ) var( --border-color-interactive );
  --border-interactive--hover: var( --border-width-base ) var( --border-style-solid ) var( --border-color-interactive--hover );
  --border-interactive--active: var( --border-width-base ) var( --border-style-solid ) var( --border-color-interactive--active );
  --border-disabled: var( --border-width-base ) var( --border-style-solid ) var( --border-color-disabled );
  --border-inverted: var( --border-width-base ) var( --border-style-solid ) var( --border-color-inverted );
  --border-progressive: var( --border-width-base ) var( --border-style-solid ) var( --border-color-progressive );
  --border-progressive--hover: var( --border-width-base ) var( --border-style-solid ) var( --border-color-progressive--hover );
  --border-progressive--active: var( --border-width-base ) var( --border-style-solid ) var( --border-color-progressive--active );
  --border-radius-base: 4px;
  --border-radius-medium: calc( 2 * var( --border-radius-base ) );
  --border-radius-large: calc( 3 * var( --border-radius-base ) );
  --border-radius-x-large: calc( 4 * var( --border-radius-base ) );
  --border-radius-pill: 9999px;
  --border-radius-circle: 50%;
  /* Colors */
  /* Hover and active states are calculated by a modifier of the lightness value (e.g. hover: +2%, active: -2%) */
  --delta-lightness-state-base: 4%;
  --delta-lightness-hover-state: calc( var( --delta-lightness-state-base ) * 1 );
  --delta-lightness-active-state: calc( var( --delta-lightness-state-base ) * -1 );
  --delta-lightness-surface-base: 2%;
  /* Progressive color */
  --color-progressive-oklch__l: 60%;
  --color-progressive-oklch__c: 0.1679;
  --color-progressive-oklch__h: 262.29;
  /* Surface color */
  --color-surface-0-oklch__l: 14%;
  --color-surface-0-oklch__c: 0.01;
  --color-surface-1-oklch__l: calc( var( --color-surface-0-oklch__l ) + var( --delta-lightness-surface-base ) );
  --color-surface-1-oklch__c: 0.015;
  --color-surface-2-oklch__l: calc( var( --color-surface-0-oklch__l ) + ( var( --delta-lightness-surface-base ) * 2 ) );
  --color-surface-2-oklch__c: 0.02;
  --color-surface-3-oklch__l: calc( var( --color-surface-0-oklch__l ) + ( var( --delta-lightness-surface-base ) * 3 ) );
  --color-surface-3-oklch__c: 0.03;
  --color-surface-4-oklch__l: calc( var( --color-surface-0-oklch__l ) + ( var( --delta-lightness-surface-base ) * 4 ) );
  --color-surface-4-oklch__c: 0.04;
  --color-surface-0: oklch( var( --color-surface-0-oklch__l ) var( --color-surface-0-oklch__c ) var( --color-progressive-oklch__h ) );
  --color-surface-1: oklch( var( --color-surface-1-oklch__l ) var( --color-surface-1-oklch__c ) var( --color-progressive-oklch__h ) );
  --color-surface-1--hover: oklch( calc( var( --color-surface-1-oklch__l ) + var( --delta-lightness-hover-state ) ) var( --color-surface-1-oklch__c ) var( --color-progressive-oklch__h ) );
  --color-surface-1--active: oklch( calc( var( --color-surface-1-oklch__l ) + var( --delta-lightness-active-state ) ) var( --color-surface-1-oklch__c ) var( --color-progressive-oklch__h ) );
  --color-surface-2: oklch( var( --color-surface-2-oklch__l ) var( --color-surface-2-oklch__c ) var( --color-progressive-oklch__h ) );
  --color-surface-2--hover: oklch( calc( var( --color-surface-2-oklch__l ) + var( --delta-lightness-hover-state ) ) var( --color-surface-2-oklch__c ) var( --color-progressive-oklch__h ) );
  --color-surface-2--active: oklch( calc( var( --color-surface-2-oklch__l ) + var( --delta-lightness-active-state ) ) var( --color-surface-2-oklch__c ) var( --color-progressive-oklch__h ) );
  --color-surface-3: oklch( var( --color-surface-3-oklch__l ) var( --color-surface-3-oklch__c ) var( --color-progressive-oklch__h ) );
  --color-surface-4: oklch( var( --color-surface-4-oklch__l ) var( --color-surface-4-oklch__c ) var( --color-progressive-oklch__h ) );
  --background-color-progressive: var( --color-progressive );
  --background-color-progressive--hover: var( --color-progressive--hover );
  --background-color-progressive--active: var( --color-progressive--active );
  /* Text color */
  --color-emphasized-oklch__l: 93%;
  --color-emphasized-oklch__c: 0.03;
  --color-base-oklch__l: 80%;
  --color-base-oklch__c: 0.05;
  --color-subtle-oklch__l: 70%;
  --color-subtle-oklch__c: 0.07;
  --color-placeholder-oklch__l: 60%;
  --color-placeholder-oklch__c: 0.03;
  --color-disabled-oklch__l: 50%;
  --color-disabled-oklch__c: 0.01;
  --color-progressive: oklch( var( --color-progressive-oklch__l ) var( --color-progressive-oklch__c ) var( --color-progressive-oklch__h ) );
  --color-progressive--hover: oklch( calc( var( --color-progressive-oklch__l ) + var( --delta-lightness-hover-state ) ) var( --color-progressive-oklch__c ) var( --color-progressive-oklch__h ) );
  --color-progressive--active: oklch( calc( var( --color-progressive-oklch__l ) + var( --delta-lightness-active-state ) ) var( --color-progressive-oklch__c ) var( --color-progressive-oklch__h ) );
  --color-base: oklch( var( --color-base-oklch__l ) var( --color-base-oklch__c ) var( --color-progressive-oklch__h ) );
  --color-base--hover: oklch( calc( var( --color-base-oklch__l ) + var( --delta-lightness-hover-state ) ) var( --color-base-oklch__c ) var( --color-progressive-oklch__h ) );
  --color-emphasized: oklch( var( --color-emphasized-oklch__l ) var( --color-emphasized-oklch__c ) var( --color-progressive-oklch__h ) );
  --color-subtle: oklch( var( --color-subtle-oklch__l ) var( --color-subtle-oklch__c ) var( --color-progressive-oklch__h ) );
  --color-placeholder: oklch( var( --color-placeholder-oklch__l ) var( --color-placeholder-oklch__c ) var( --color-progressive-oklch__h ) );
  --color-disabled: oklch( var( --color-disabled-oklch__l ) var( --color-disabled-oklch__c ) var( --color-progressive-oklch__h ) );
  --color-inverted: #fff;
  --color-link: var( --color-progressive );
  --color-link--hover: var( --color-progressive--hover );
  --color-link--active: var( --color-progressive--active );
  /* Box shadows */
  --shadow-opacity: 0.44;
  --box-shadow-color-alpha-base: oklch( 6% 0.01 var( --color-progressive-oklch__h ) / var( --shadow-opacity ) );
  --box-shadow-border: var( --border-color-base ) 0 0 0 1px;
  --box-shadow-small: 0 0 0 1px var( --border-color-base );
  --box-shadow-medium: 0 0.5px 0.6px var( --box-shadow-color-alpha-base ), 0 1.6px 1.8px -0.8px var( --box-shadow-color-alpha-base ), 0 4px 4.5px -1.7px var( --box-shadow-color-alpha-base ), 0 9.8px 11px -2.5px var( --box-shadow-color-alpha-base );
  --box-shadow-large: 0 0.5px 0.6px var( --box-shadow-color-alpha-base ), 0 2.8px 3.1px -0.4px var( --box-shadow-color-alpha-base ), 0 5.3px 6px -0.7px var( --box-shadow-color-alpha-base ), 0 8.7px 9.8px -1.1px var( --box-shadow-color-alpha-base ), 0 13.9px 15.6px -1.4px var( --box-shadow-color-alpha-base ), 0 21.8px 24.5px -1.8px var( --box-shadow-color-alpha-base );
  /* Backdrop */
  --backdrop-filter-blur: blur( 2px );
  --backdrop-filter-frosted-glass: blur( 8px ) saturate( 140% );
  --backdrop-opacity: 0.65;
  /* Transitions */
  --transition-timing-function-ease: cubic-bezier( 0.2, 0, 0, 1 );
  --transition-timing-function-ease-in: cubic-bezier( 0.3, 0, 0.8, 0.15 );
  --transition-timing-function-ease-out: cubic-bezier( 0.05, 0.7, 0.1, 1 );
  --transition-duration-base: 100ms;
  --transition-duration-medium: 250ms;
  --transition-duration-large: 350ms;
  --transition-hover--slow: var(--transition-duration-large) var(--transition-timing-function-ease);
  --transition-hover--fast: var(--transition-duration-medium) var(--transition-timing-function-ease);
  --transition-menu: var(--transition-duration-medium) var(--transition-timing-function-ease-out);
  /* Random variables */
  --header-height: 240px;
  --social-label-width: 16ch;
  /* Color scheme */
  color-scheme: dark;
}

/* Mixins */
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html {
  direction: ltr;
  font-weight: var(--font-weight-regular);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-medium);
  line-height: var(--line-height-medium);
  color: var(--color-base);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--color-surface-0);
  overflow-x: hidden;
  position: relative;
  isolation: isolate;
}

img {
  max-width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  border: var(--border-subtle);
  border-radius: var(--border-radius-base);
}

b, strong {
  font-weight: var(--font-weight-semi-bold);
}

blockquote {
  font-style: italic;
  text-wrap: pretty;
  font-size: var(--font-size-medium);
  line-height: var(--line-height-medium);
}

h1, h2, h3, h4, h5, h6 {
  margin-block-end: 0.25em;
  color: var(--color-emphasized);
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  text-decoration: none !important;
  color: var(--color-emphasized) !important;
  display: block;
}

h1, h2 {
  margin-block-start: 2em;
}

h3, h4 {
  margin-block-start: 1.5em;
}

h5, h6 {
  margin-block-start: 1.25em;
  font-size: var(--font-size-medium);
  font-weight: var(--font-weight-semi-bold);
}

h1 {
  font-size: var(--font-size-xxx-large);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-xxx-large);
}

h2 {
  font-size: var(--font-size-xx-large);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-xx-large);
}

h3 {
  font-size: var(--font-size-x-large);
  font-weight: var(--font-weight-semi-bold);
  line-height: var(--line-height-x-large);
}

h4 {
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-semi-bold);
  line-height: var(--line-height-large);
}

hr {
  margin-block: var(--space-md);
  border: 0;
  border-top: var(--border-base);
}

p {
  margin-block: var(--space-md);
  overflow-wrap: break-word;
}

a {
  color: var(--color-link);
  -webkit-text-decoration: underline transparent;
          text-decoration: underline transparent;
  text-underline-offset: var(--space-xxs);
  transition: var(--transition-hover--fast);
}
a:focus-visible {
  outline: 2px solid var(--color-progressive);
  outline-offset: 2px;
  border-radius: var(--border-radius-base);
}
a:focus-visible {
  -webkit-text-decoration: underline 1px transparent;
          text-decoration: underline 1px transparent;
}
a:hover {
  color: var(--color-link--hover);
  text-decoration: underline;
  font-weight: var(--font-weight-semi-bold);
}
a:active {
  color: var(--color-link--active);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-duration-base: 0ms;
    --transition-duration-medium: 0ms;
    --transition-duration-large: 0ms;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  body::before {
    animation: none;
  }
}
button {
  border-radius: var(--border-radius-base) !important;
  display: flex;
  min-width: 0;
  gap: var(--space-xxs);
  align-items: center;
  padding: var(--space-xxs) var(--space-xs);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semi-bold);
  font-size: var(--font-size-medium);
  cursor: pointer;
  transition: var(--transition-hover--slow);
}
button:focus-visible {
  outline: 2px solid var(--color-progressive);
  outline-offset: 2px;
  border-radius: var(--border-radius-base);
}
button.primary {
  background: var(--background-color-progressive);
  color: var(--color-inverted);
  border: var(--border-interactive);
}
button.primary:hover {
  background: var(--background-color-progressive--hover);
  color: var(--color-inverted);
  border: var(--border-interactive--hover);
}
button.primary:active {
  background: var(--background-color-progressive--active);
  border: var(--border-interactive--active);
}
button.secondary-1 {
  border: var(--border-progressive) !important;
  background: transparent;
  color: var(--color-progressive);
  border: var(--border-interactive);
}
button.secondary-1:hover {
  background: transparent;
  color: var(--color-inverted);
  border: var(--border-interactive--hover);
}
button.secondary-1:active {
  background: transparent;
  border: var(--border-interactive--active);
}
button.secondary-1:hover {
  color: var(--color-progressive--hover) !important;
  border: var(--border-progressive--hover) !important;
}
button.secondary-1:active {
  color: var(--color-progressive--active) !important;
  border: var(--border-progressive--active) !important;
}
button.secondary-2 {
  background: var(--color-surface-2);
  color: var(--color-emphasized);
  border: var(--border-interactive);
}
button.secondary-2:hover {
  background: var(--color-surface-2--hover);
  color: var(--color-inverted);
  border: var(--border-interactive--hover);
}
button.secondary-2:active {
  background: var(--color-surface-2--active);
  border: var(--border-interactive--active);
}
button.secondary-2:hover {
  border: var(--border-interactive--hover) !important;
  color: var(--color-inverted) !important;
}
button.secondary-2:active {
  border: var(--border-interactive--active) !important;
}
button img {
  border: none;
  border-radius: 0;
  width: 20px;
  height: auto;
}
button.social {
  overflow: hidden;
  gap: 0;
  padding: var(--space-xxs);
}
button.social span {
  max-width: 0;
  opacity: 0;
  white-space: nowrap;
  transition: max-width var(--transition-hover--slow), opacity var(--transition-hover--slow);
}
button.social:hover {
  gap: var(--space-xxs);
  padding: var(--space-xxs) var(--space-xs);
}
button.social:hover span {
  opacity: 1;
  max-width: var(--social-label-width, 20ch);
}
@media screen and (max-width: 389px) {
  button.social:hover {
    gap: 0;
    padding: var(--space-xxs);
  }
  button.social:hover span {
    opacity: 0;
    display: none;
  }
}
button.x {
  background: oklch(0% 0 0deg);
  color: var(--color-emphasized);
  border: var(--border-interactive);
}
button.x:hover {
  background: oklch(calc(0% + var(--delta-lightness-hover-state)) 0 0);
  color: var(--color-inverted);
  border: var(--border-interactive--hover);
}
button.x:active {
  background: oklch(0% 0 0deg);
  border: var(--border-interactive--active);
}
button.discord {
  background: oklch(57.74% 0.2091 273.85deg);
  color: var(--color-emphasized);
  border: var(--border-interactive);
}
button.discord:hover {
  background: oklch(calc(57.74% + var(--delta-lightness-hover-state)) 0.2091 273.85);
  color: var(--color-inverted);
  border: var(--border-interactive--hover);
}
button.discord:active {
  background: oklch(calc(57.74% + var(--delta-lightness-active-state)) 0.2091 273.85);
  border: var(--border-interactive--active);
}
button.github {
  background: oklch(70.1% 0.2127 145.72deg);
  color: var(--color-emphasized);
  border: var(--border-interactive);
}
button.github:hover {
  background: oklch(calc(70.1% + var(--delta-lightness-hover-state)) 0.2127 145.72);
  color: var(--color-inverted);
  border: var(--border-interactive--hover);
}
button.github:active {
  background: oklch(calc(70.1% + var(--delta-lightness-active-state)) 0.2127 145.72);
  border: var(--border-interactive--active);
}

@keyframes heroFadeIn {
  from {
    transform: translateY(-100%);
    opacity: 0;
    filter: blur(20px);
  }
  to {
    transform: translateY(0);
    opacity: 1;
    filter: none;
  }
}
html[page="index.html"] body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 240px;
  background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url("../images/backgrounds/summer_day4/summer_day4.gif");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: var(--backdrop-filter-blur);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent);
          mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent);
  z-index: -1;
  pointer-events: none;
}
html[page="index.html"] header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: calc(var(--header-height) - var(--space-lg) * 2 - var(--space-md) * 2);
  margin: var(--space-lg);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  animation: heroFadeIn 2s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  html[page="index.html"] header {
    animation: none;
  }
}
@media screen and (max-width: 992px) {
  html[page="index.html"] header {
    text-wrap: wrap;
  }
}
@media screen and (max-width: 767px) {
  html[page="index.html"] header {
    margin: var(--space-sm);
    padding: var(--space-md) var(--space-xs);
  }
}
html[page="index.html"] header h1 {
  margin: auto;
  margin-block: 0;
  line-height: initial;
  font-size: var(--font-size-6x-large);
  font-weight: var(--font-weight-bold);
}
@media screen and (max-width: 992px) {
  html[page="index.html"] header h1 {
    text-wrap: wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}
@media screen and (max-width: 767px) {
  html[page="index.html"] header h1 {
    font-size: var(--font-size-5x-large);
  }
}
html[page="index.html"] header h1 a {
  cursor: text;
}
html[page="index.html"] header h1 a:hover {
  font-weight: initial !important;
}
html[page="index.html"] header p {
  margin-block: 0;
  line-height: var(--line-height-small);
  font-weight: var(--font-weight-medium);
}
html[page="index.html"] header p.sub {
  color: var(--color-placeholder);
  font-size: var(--font-size-small);
  line-height: var(--line-height-medium);
}
html[page="index.html"] header hr {
  margin-block: var(--space-sm);
  width: 3rem;
}

main {
  margin: var(--space-lg);
  padding: var(--space-xl) var(--space-md);
}
@media screen and (max-width: 767px) {
  main {
    margin: var(--space-sm);
    padding: var(--space-md) var(--space-xs);
  }
}

footer {
  background: var(--color-surface-1);
  border-top: var(--border-base);
  width: 100%;
  height: -moz-max-content;
  height: max-content;
  padding: calc(var(--space-lg) + var(--space-md));
}
@media screen and (max-width: 767px) {
  footer {
    padding: var(--space-xxl) var(--space-lg);
  }
}
footer .footer__wordmark {
  font-size: var(--font-size-xx-large);
  font-weight: var(--font-weight-bold);
  color: var(--color-inverted);
  display: flex;
  min-width: 0;
  gap: var(--space-sm);
  align-items: center;
  margin-bottom: var(--space-xxxs);
}
@media screen and (max-width: 767px) {
  footer .footer__wordmark {
    justify-content: center;
  }
}
@media screen and (max-width: 479px) {
  footer .footer__wordmark .divider, footer .footer__wordmark img {
    display: none; /* Experimental */
  }
}
footer .footer__wordmark .divider {
  color: var(--color-inverted);
  font-size: var(--font-size-small);
  line-height: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
}
footer .footer__wordmark img {
  border: none;
  border-radius: 0;
  width: 20px;
  height: auto;
}
footer .footer__tagline {
  text-align: left;
}
@media screen and (max-width: 767px) {
  footer .footer__tagline {
    text-align: center;
  }
}
footer .footer__tagline a {
  color: var(--color-base);
}
footer .footer__tagline a:hover {
  color: var(--color-link--hover);
}
footer .footer__tagline a:active {
  color: var(--color-link--active);
}
footer .footer__subtitle {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 767px) {
  footer .footer__subtitle {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }
  footer .footer__subtitle .footer__subtitle-text {
    text-align: center;
  }
}
footer .footer__subtitle .footer__subtitle-text {
  color: var(--color-placeholder);
}
footer .footer__subtitle .footer__subtitle-socials {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-xxs);
  max-width: 100%;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  footer .footer__subtitle .footer__subtitle-socials {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 389px) {
  footer .footer__subtitle .footer__subtitle-socials {
    flex-direction: column;
  }
  footer .footer__subtitle .footer__subtitle-socials .divider {
    writing-mode: vertical-rl; /* Top-to-bottom, right-to-left */
    text-orientation: mixed;
  }
}
footer .footer__subtitle .footer__subtitle-socials button {
  height: 30px;
  transition: var(--transition-hover--slow);
  flex: 0 0 auto;
}
footer .footer__subtitle .footer__subtitle-socials .divider {
  color: var(--color-placeholder);
  font-size: var(--font-size-small);
  line-height: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
}

@property --projects__cardImageAlpha {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}
body {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* index.html */
html[page="index.html"] .projects .projects__wikis {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
html[page="index.html"] .projects .projects__wikis .projects__header {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-bottom: var(--border-base);
  padding-block: var(--space-sm);
  line-height: 1;
}
html[page="index.html"] .projects .projects__wikis .projects__header h2 {
  margin-block: 0;
}
html[page="index.html"] .projects .projects__wikis .projects__header p {
  margin-block: 0;
}
html[page="index.html"] .projects .projects__wikis .projects__header--hidden {
  opacity: 0;
  filter: blur(5px);
  transform: translateX(-100%);
  transition: all 750ms;
}
html[page="index.html"] .projects .projects__wikis .projects__header--visible {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}
html[page="index.html"] .projects .projects__wikis .projects__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-sm);
}
@media screen and (max-width: 1280px) {
  html[page="index.html"] .projects .projects__wikis .projects__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media screen and (max-width: 992px) {
  html[page="index.html"] .projects .projects__wikis .projects__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 767px) {
  html[page="index.html"] .projects .projects__wikis .projects__cards {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
html[page="index.html"] .projects .projects__wikis .projects__cards:hover .projects__card:not(:hover) {
  opacity: 0.3;
}
html[page="index.html"] .projects .projects__wikis .projects__cards .projects__card {
  background-color: var(--color-surface-2);
  border: var(--border-base);
  border-radius: var(--border-radius-medium);
  box-shadow: var(--box-shadow-medium);
  padding: var(--space-md);
  line-height: var(--line-height-xx-small);
  opacity: 1;
  transform: none;
  overflow: hidden;
  transition: var(--transition-hover--slow);
  display: flex;
  flex-direction: column;
}
html[page="index.html"] .projects .projects__wikis .projects__cards .projects__card:hover {
  opacity: 1;
}
html[page="index.html"] .projects .projects__wikis .projects__cards .projects__card:hover .projects__cardHead {
  margin-top: 0;
  border-bottom: var(--border-width-base) solid var(--border-color-base);
}
html[page="index.html"] .projects .projects__wikis .projects__cards .projects__card:hover .projects__cardImage img {
  --projects__cardImageAlpha: 15%;
}
html[page="index.html"] .projects .projects__wikis .projects__cards .projects__card .projects__cardImage {
  margin: calc(var(--space-md) * -1);
  margin-bottom: 0;
  border-bottom: var(--border-base);
  line-height: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
html[page="index.html"] .projects .projects__wikis .projects__cards .projects__card .projects__cardImage img {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border: none;
  border-radius: 0px;
  width: 100%;
  height: auto;
  transition: --projects__cardImageAlpha var(--transition-hover--slow);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, rgb(0, 0, 0, var(--projects__cardImageAlpha)) 100%);
          mask-image: linear-gradient(to bottom, black 0%, rgb(0, 0, 0, var(--projects__cardImageAlpha)) 100%);
}
html[page="index.html"] .projects .projects__wikis .projects__cards .projects__card .projects__cardHead {
  padding-block: var(--space-md) var(--space-sm);
  margin-bottom: var(--space-sm);
  border-bottom: var(--border-width-base) solid transparent;
  transition: var(--transition-hover--fast);
  margin-top: calc(var(--card-head-height, 71.5px) * -1);
  z-index: 9999;
}
html[page="index.html"] .projects .projects__wikis .projects__cards .projects__card .projects__cardHead .projects__cardHeader {
  font-weight: var(--font-weight-bold);
  margin-block: 0 var(--space-xxs);
  line-height: 1;
}
html[page="index.html"] .projects .projects__wikis .projects__cards .projects__card .projects__cardHead .projects__cardSubtitle {
  font-size: var(--font-size-small);
  color: var(--color-subtle);
}
html[page="index.html"] .projects .projects__wikis .projects__cards .projects__card .projects__cardBody {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-sm);
  line-height: var(--line-height-small);
}
html[page="index.html"] .projects .projects__wikis .projects__cards .projects__card .projects__cardBody .projects__cardButtons {
  border-top: var(--border-base);
  display: flex;
  flex-direction: row;
  gap: var(--space-xs);
  padding-top: var(--space-md);
}
@media screen and (max-width: 389px) {
  html[page="index.html"] .projects .projects__wikis .projects__cards .projects__card .projects__cardBody .projects__cardButtons {
    flex-direction: column;
  }
}
html[page="index.html"] .projects .projects__wikis .projects__cards .projects__card .projects__cardBody .projects__cardButtons button {
  width: 100%;
  font-weight: var(--font-weight-bold);
  text-align: center;
  justify-content: center;
}
html[page="index.html"] .projects .projects__wikis .projects__cards .projects__card--hidden {
  opacity: 0;
  filter: blur(5px);
  transform: translateX(-100%);
  transition: all 750ms;
}
html[page="index.html"] .projects .projects__wikis .projects__cards .projects__card--visible {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}
html[page="index.html"] .projects .projects__wikis .projects__cards .projects__card {
  transition-delay: calc(var(--i, 1) * 50ms);
}/*# sourceMappingURL=styles.css.map */