:root {
  color-scheme: light dark;
  scrollbar-color: var(--accent) var(--background);
  
  -webkit-text-size-adjust: 150%;
  text-size-adjust: 150%;
  
  --vertical-max: 100lvh;
  --φ: calc((1 + sqrt(5))/2);
  --φrem: calc(1rem * calc((1 + sqrt(5))/2));
  --border-width: 15px;
  --border-radius: clamp(4px, 1rem, 32px);
  --blur: 8px;
  
  --minimummargin: clamp(0.25rem, 2vw, 1rem);
  
  --padding-profile: 16px;
  --margin-profile: clamp(16px, min(3vw, 3vh), 48px);
  --padding-button: clamp(1px, 0.31lvh, 3px) clamp(2px, 2lvw, 0.75rem);
  --padding-title: clamp(4px, 1lvh, 12px) clamp(4px, 5lvw, 48px);
  --padding-kibby: clamp(4px, 1lvh, 12px) clamp(4px, 5lvw, 16px);

  --contrast: light-dark(#210026, #f0e0f9);
  --background: light-dark(#fbefff, #0a030d);
  --accent: light-dark(#8300a1, #db80ff);
  
  --background-faded: oklch(from var(--_background, var(--background)) l c h / calc(4 / 5));
  --accent-hover: color-mix(in oklch, var(--_accent, var(--accent)) 50%, var(--_contrast, var(--contrast)) 50%);
  --background-placeholder: color-mix(in oklch, var(--_accent, var(--accent)) 50%, var(--_background, var(--background)) 50%);  

  --background-light: url("/media/index-light.webp");
  --background-dark: url("/media/index-dark.webp");
  --background-backup: url("/media/index-light.webp");
}

.basil {
  --contrast: light-dark(#160812, #f0deeb);
  --background: light-dark(#faf2f8, #0a0409);
  --accent: light-dark(#92006e, #fd35cb);
  
  --background-faded: oklch(from light-dark(#faf2f8, #0a0409) l c h / calc(4 / 5));
  --accent-hover: color-mix(in oklch, light-dark(#92006e, #fd35cb) 50%, light-dark(#160812, #f0deeb) 50%);
  --background-placeholder: color-mix(in oklch, light-dark(#92006e, #fd35cb) 50%, light-dark(#faf2f8, #0a0409) 50%);
  
  --background-light: url("/media/headmate-backgrounds/basil-light.webp");
  --background-dark: url("/media/headmate-backgrounds/basil-dark.webp");
  --background-backup: url("/media/headmate-backgrounds/basil-dark.webp");
}

.charlotte {
  --contrast: light-dark(#0a0804, #ffb600);
  --background: light-dark(#ffedc6, #100c05);
  --accent: light-dark(#821725, #eb4242);
  
  --background-faded: oklch(from light-dark(#ffedc6, #100c05) l c h / calc(4 / 5));
  --accent-hover: color-mix(in oklch, light-dark(#821725, #eb4242) 50%, light-dark(#0a0804, #ffb600) 50%);
  --background-placeholder: color-mix(in oklch, light-dark(#821725, #eb4242) 50%, light-dark(#ffedc6, #100c05) 50%);

  --background-light: url("/media/headmate-backgrounds/charlotte-light.jpg");
  --background-dark: url("/media/headmate-backgrounds/charlotte-dark.webp");
  --background-backup: url("/media/headmate-backgrounds/charlotte-dark.webp");
}

.juno {
  --contrast: light-dark(#130319, #fde0df);
  --background: light-dark(#f8effd, #130102);
  --accent: light-dark(#63088a, #ffa5a5);
  
  --background-faded: oklch(from light-dark(#f8effd, #130102) l c h / calc(4 / 5));
  --accent-hover: color-mix(in oklch, light-dark(#63088a, #ffa5a5) 50%, light-dark(#130319, #fde0df) 50%);
  --background-placeholder: color-mix(in oklch, light-dark(#63088a, #ffa5a5) 50%, light-dark(#f8effd, #130102) 50%);

  --background-light: url("/media/headmate-backgrounds/juno-light.webp");
  --background-dark: url("/media/headmate-backgrounds/juno-dark.webp");
  --background-backup: url("/media/headmate-backgrounds/juno-dark.webp");
}

.kris {
  --contrast: light-dark(#141910, #e6efdf);
  --background: light-dark(#f6f8f5, #0c1008);
  --accent: light-dark(#244e00, #baff7d);

  --background-faded: oklch(from light-dark(#f6f8f5, #0c1008) l c h / calc(4 / 5));
  --accent-hover: color-mix(in oklch, light-dark(#244e00, #baff7d) 50%, light-dark(#141910, #e6efdf) 50%);
  --background-placeholder: color-mix(in oklch, light-dark(#244e00, #baff7d) 50%, light-dark(#f6f8f5, #0c1008) 50%);

  --background-light: url("/media/headmate-backgrounds/kris-light.webp");
  --background-dark: url("/media/headmate-backgrounds/kris-dark.webp");
  --background-backup: url("/media/headmate-backgrounds/kris-dark.webp");
}

.liz {
  --contrast: light-dark(#100, #f3ede7);
  --background: light-dark(#ffd6b5, #110c08);
  --accent: light-dark(#6e390a, #fb8);
  
  --background-faded: oklch(from light-dark(#ffd6b5, #110c08) l c h / calc(4 / 5));
  --accent-hover: color-mix(in oklch, light-dark(#6e390a, #fb8) 50%, light-dark(#100, #f3ede7) 50%);
  --background-placeholder: color-mix(in oklch, light-dark(#6e390a, #fb8) 50%, light-dark(#ffd6b5, #110c08) 50%);
  
  --background-light: url("/media/headmate-backgrounds/liz-light.webp");
  --background-dark: url("/media/headmate-backgrounds/liz-dark.webp");
  --background-backup: url("/media/headmate-backgrounds/liz-light.webp");
}

.mercury {
  --contrast: light-dark(#444, #bbb);
  --background: light-dark(#eee, #111);
  --accent: light-dark(#111, #eee);
  
  --background-faded: oklch(from light-dark(#eee, #111) l c h / calc(4 / 5));
  --accent-hover: color-mix(in oklch, light-dark(#444, #eee) 50%, light-dark(#444, #bbb) 50%);
  --background-placeholder: color-mix(in oklch, light-dark(#111, #eee) 50%, light-dark(#eee, #111) 50%);

  --background-light: url("/media/headmate-backgrounds/mercury-light.webp");
  --background-dark: url("/media/headmate-backgrounds/mercury-dark.webp");
  --background-backup: url("/media/headmate-backgrounds/mercury-dark.webp");
}

.nyx {
  --contrast: light-dark(#180304, #edf4f3);
  --background: light-dark(#fef5f6, #040706);
  --accent: light-dark(#a71010, #a57dff);
  
  --background-faded: oklch(from light-dark(#fef5f6, #040706) l c h / calc(4 / 5));
  --accent-hover: color-mix(in oklch, light-dark(#a71010, #a57dff) 50%, light-dark(#180304, #edf4f3) 50%);
  --background-placeholder: color-mix(in oklch, light-dark(#a71010, #a57dff) 50%, light-dark(#fef5f6, #040706) 50%);

  --background-light: url("/media/headmate-backgrounds/nyx-light.webp");
  --background-dark: url("/media/headmate-backgrounds/nyx-dark.webp");
  --background-backup: url("/media/headmate-backgrounds/nyx-dark.webp");
}

.star {
  --contrast: light-dark(#070304, #e5fef8);
  --background: light-dark(#e6f4ff, #00130e);
  --accent: light-dark(#3d1bd1, #4effd2);
  
  --background-faded: oklch(from light-dark(#e6f4ff, #00130e) l c h / calc(4 / 5));
  --accent-hover: color-mix(in oklch, light-dark(#3d1bd1, #4effd2) 50%, light-dark(#070304, #e5fef8) 50%);
  --background-placeholder: color-mix(in oklch, light-dark(#3d1bd1, #4effd2) 50%, light-dark(#e6f4ff, #00130e) 50%);

  --background-light: url("/media/headmate-backgrounds/star-light.webp");
  --background-dark: url("/media/headmate-backgrounds/star-dark.webp");
  --background-backup: url("/media/headmate-backgrounds/star-dark.webp");
}

.toby {
  --contrast: light-dark(#0b0d09, #fff);
  --background: light-dark(#f9faf7, #0c0e0c);
  --accent: light-dark(#005500, #fe8);
  
  --background-faded: oklch(from light-dark(#f9faf7, #0c0e0c) l c h / calc(4 / 5));
  --accent-hover: color-mix(in oklch, light-dark(#005500, #fe8) 50%, light-dark(#0b0d09, #fff) 50%);
  --background-placeholder: color-mix(in oklch, light-dark(#005500, #fe8) 50%, light-dark(#f9faf7, #0c0e0c) 50%);

  --background-light: url("/media/headmate-backgrounds/toby-light.webp");
  --background-dark: url("/media/headmate-backgrounds/toby-dark.webp");
  --background-backup: url("/media/headmate-backgrounds/toby-dark.webp");
}

.venus {
  --contrast: light-dark(#000, #fff);
  --background: light-dark(#fff, #000);
  --accent: light-dark(#00f, #ffeb7f);
  
  --background-faded: oklch(from light-dark(#fff, #000) l c h / calc(4 / 5));
  --accent-hover: color-mix(in oklch, light-dark(#00f, #ffeb7f) 50%, light-dark(#000, #fff) 50%);
  --background-placeholder: color-mix(in oklch, light-dark(#00f, #ffeb7f) 50%, light-dark(#fff, #000) 50%);

  --background-light: url("/media/headmate-backgrounds/venus-light.webp");
  --background-dark: url("/media/headmate-backgrounds/venus-dark.webp");
  --background-backup: url("/media/headmate-backgrounds/venus-dark.webp");
}

.vincent {
  --contrast: light-dark(#0c0303, #f8eced);
  --background: light-dark(#fbf0f1, #120506);
  --accent: light-dark(#801, #ff2033);
  
  --background-faded: oklch(from light-dark(#fbf0f1, #120506) l c h / calc(4 / 5));
  --accent-hover: color-mix(in oklch, light-dark(#801, #ff2033) 50%, light-dark(#0c0303, #f8eced) 50%);
  --background-placeholder: color-mix(in oklch, light-dark(#801, #ff2033) 50%, light-dark(#fbf0f1, #120506) 50%);

  --background-light: url("/media/headmate-backgrounds/vincent-light.webp");
  --background-dark: url("/media/headmate-backgrounds/vincent-dark.webp");
  --background-backup: url("/media/headmate-backgrounds/vincent-light.webp");
}

.willow {
  --contrast: light-dark(#070c0c, #f80060);
  --background: light-dark(#b8fdff, #000);
  --accent: light-dark(#5400c3, #f8f800);
  
  --background-faded: oklch(from light-dark(#b8fdff, #000) l c h / calc(4 / 5));
  --accent-hover: color-mix(in oklch, light-dark(#5400c3, #00f868) 50%, light-dark(#070c0c, #00f868) 50%);
  --background-placeholder: color-mix(in oklch, light-dark(#5400c3, #f8f800) 50%, light-dark(#b8fdff, #000) 50%);

  --background-light: url("/media/headmate-backgrounds/willow-light.webp");
  --background-dark: url("/media/headmate-backgrounds/willow-dark.webp");
  --background-backup: url("/media/headmate-backgrounds/willow-dark.webp");
}

.backgroundimage body {
  background: var(--background-light);
}

@media (prefers-color-scheme: dark) {
  .backgroundimage body {
    background: var(--background-dark);
  }
}


@supports not ( (color: color-mix(in oklch, light-dark(#801, #ff2033) 50%, light-dark(#fbf0f1, #120506) 50%)) or (color: oklch(from light-dark(#b8fdff, #000) l c h / calc(4 / 5))) ) {
  :root {
    --contrast: #f0e0f9;
    --background: #0a030d;
    --accent: #db80ff;
  }
  .backgroundimage body {
    background: var(--background-backup)
  }
  
  .info-img {
    background: #777;
    padding: 16px;
  }
  
  .basil {
    --contrast: #f0deeb;
    --background: #0a0409;
    --accent: #fd35cb;
    
    --background-faded: rgba(10, 4, 9, 0.8);
    --accent-hover: #fc98db;
    --background-placeholder: #7b2663;
  }
  
  .charlotte {
    --contrast: #ffb600;
    --background: #100c05;
    --accent: #eb4242;
    
    --background-faded: rgba(16, 12, 5, 0.8);
    --accent-hover: #f78232;
    --background-placeholder: #762c25;
  }
  
  .juno {
    --contrast: #fde0df;
    --background: #130102;
    --accent: #ffa5a5;
    
    --background-faded: rgba(19, 1, 2, 0.8);
    --accent-hover: #ffc3c2;
    --background-placeholder: #7e5050;
  }
  
  .kris {
    --contrast: #e6efdf;
    --background: #0c1008;
    --accent: #baff7d;
  
    --background-faded: rgba(12, 16, 8, 0.8);
    --accent-hover: #d2f7b0;
    --background-placeholder: #5d7d41;
  }
  
  .liz {
    --contrast: #f3ede7;
    --background: #110c08;
    --accent: #fb8;
    
    --background-faded: rgba(17, 12, 8, 0.8);
    --accent-hover: #fbd4b7;
    --background-placeholder: #110c08;
  }
  
  .mercury {
    --contrast: #bbb;
    --background: #111;
    --accent: #eee;
    
    --background-faded: rgba(17, 17, 17, 0.8);
    --accent-hover: #d3d3d3;
    --background-placeholder: #777;
  }
  
  .nyx {
    --contrast: #edf4f3;
    --background: #040706;
    --accent: #a57dff;
    
    --background-faded: rgba(4, 7, 6, 0.8);
    --accent-hover: #ccb8fa;
    --background-placeholder: #524179;
  }
  
  .star {
    --contrast: #e5fef8;
    --background: #00130e;
    --accent: #4effd2;
    
    --background-faded: rgba(0, 19, 14, 0.8);
    --accent-hover: #a8ffe5;
    --background-placeholder: #2a7e68;
  }
  
  .toby {
    --contrast: #fff;
    --background: #0c0e0c;
    --accent: #fe8;
    
    --background-faded: rgba(12, 14, 12, 0.8);
    --accent-hover: #fff6c4;
    --background-placeholder: #7c7447;
  }
  
  .venus {
    --contrast: #fff;
    --background: #000;
    --accent: #ffeb7f;
    
    --background-faded: rgba(0, 0, 0, 0.8);
    --accent-hover: #777;
    --background-placeholder: #776e40;
  }
  
  .vincent {
    --contrast: #0c0303;
    --background: #fbf0f1;
    --accent: #801;
    
    --background-faded: rgba(251, 240, 241, 0.8);
    --accent-hover: #48100c;
    --background-placeholder: #ca8278;
  }
  
  .willow {
    --contrast: #f80060;
    --background: #000;
    --accent: #f8f800;
    
    --background-faded: rgba(0, 0, 0, 0.8);
    --accent-hover: #00f868;
    --background-placeholder: #226f6f;
  }
  .willow ::selection {
    color: #000;
    background-color: #fff;
  }
}
/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/

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

*:not(dialog) {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

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

#root, #__next {
  isolation: isolate;
}

:focus-visible {
  outline: 4px solid currentColor;
}

body {
  line-height: var(--φ);
  -webkit-font-smoothing: antialiased;
  color: var(--_contrast, var(--contrast));
}

h1 , h2 , h3 , h4 , h5 , h6 {
  text-wrap: balance;
  font-family: 'Arizona Ranger', serif;
  margin-top: var(--φrem);
}

p {
  overflow-wrap: break-word;
  margin-top: 1rem;
  hyphenate-limit-chars: 6 3 3;
}

:where(p , h1 , h2 , h3 , h4 , h5 , h6):first-child {
  margin-top: 0;
}

ol, ul {
  padding-bottom: calc(var(--φrem) - 1rem);
  padding-left: calc(var(--φrem) + 1rem);
}

p {
  text-wrap: pretty;
}

:any-link:any-link ,
:any-link:visited {
  color: var(--_accent, var(--accent));
}

:any-link:hover ,
:any-link:active ,
:any-link:focus-visible {
  color: var(--accent-hover);
}

h1 {
  font-size: calc(1.7rem * pow(calc(81 / 64), 2.0))
}

h2 {
  font-size: calc(1.7rem * pow(calc(81 / 64), 1.0))
}

body ,
h3 {
  font-size: calc(1.7rem * pow(calc(81 / 64), 0.0))
}

.small ,
small ,
h4 {
  font-size: calc(1.7rem * pow(calc(81 / 64), -1.0))
}

h5 {
  font-size: calc(1.7rem * pow(calc(81 / 64), -2.0))
}

h6 {
  font-size: calc(1.7rem * pow(calc(81 / 64), -3.0))
}

@font-face {
  font-family: 'Arizona Ranger';
  size-adjust: 100%;
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url(/fonts/Rokkitt-VariableFont_wght.ttf) format('woff2');
}

@font-face {
  font-family: 'Arizona Ranger';
  size-adjust: 100%;
  font-style: italic;
  font-weight: 400;
  font-display: auto;
  src: url(/fonts/Rokkitt-Italic-VariableFont_wght.ttf) format('woff2');
}

@font-face {
  font-family: 'Texas Red';
  size-adjust: 82.5%;
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url(/fonts/Montserrat-VariableFont_wght.ttf) format('woff2');
}

@font-face {
  font-family: 'Texas Red';
  size-adjust: 82.5%;
  font-style: italic;
  font-weight: 400;
  font-display: auto;
  src: url(/fonts/Montserrat-Italic-VariableFont_wght.ttf) format('woff2');
}

@font-face {
  font-family: 'Linnivade';
  size-adjust: 112%;
  font-style: normal;
  font-weight: 700;
  font-display: auto;
  src: url(/fonts/Linnivade-Bold.woff2) format('woff2');
}

@font-face {
  font-family: 'Linnivade';
  size-adjust: 112%;
  font-style: italic;
  font-weight: 700;
  font-display: auto;
  src: url(/fonts/Linnivade-BoldItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Linnivade Basil';
  size-adjust: 112%;
  font-style: normal;
  font-weight: 700;
  font-display: auto;
  src: url(/fonts/Linnivade-Bold.woff2) format('woff2');
  font-feature-settings: 'cv99' 1;
}

@font-face {
  font-family: 'Linnivade Basil';
  size-adjust: 112%;
  font-style: italic;
  font-weight: 700;
  font-display: auto;
  src: url(/fonts/Linnivade-BoldItalic.woff2) format('woff2');
  font-feature-settings: 'cv99' 1;
}

@font-face {
  font-family: 'Linnivade Willow';
  size-adjust: 112%;
  font-style: normal;
  font-weight: 700;
  font-display: auto;
  src: url(/fonts/Linnivade-Bold.woff2) format('woff2');
  font-feature-settings: 'cv99' 1, 'ss01' 1;
}

@font-face {
  font-family: 'Linnivade Willow';
  size-adjust: 112%;
  font-style: italic;
  font-weight: 700;
  font-display: auto;
  src: url(/fonts/Linnivade-BoldItalic.woff2) format('woff2');
  font-feature-settings: 'cv99' 1, 'ss01' 1;
}


@font-face {
  font-family: 'Monomi';
  size-adjust: 100%;
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url(/fonts/Inconsolata-VariableFont_wdth,wght.ttf) format('woff2');
  font-stretch: 125%;
}

.primary-button {
  color: var(--background);
  background: var(--_accent, var(--accent));
  border-radius: var(--_border-radius, var(--border-radius));
  padding: var(--padding-button);
  align-self: flex-start;
  flex-grow: 1;
}


.backgroundimage body {
  background-color: var(--background-placeholder);
  background-size: cover;
  backdrop-filter: blur(max(5px, 0.4vh));
  background-position: center;
  background-attachment: fixed;
}

.backgroundfill {
  background-color: var(--background-placeholder);
}

.willow .navigation {
  --accent: #9800f8;
  --accent-hover: color-mix(in oklch, light-dark(#5400c3, #00f868) 50%, light-dark(#070c0c, #00f868) 50%);
}

@media (prefers-color-scheme: dark) {
  .willow ::selection {
    color: #000;
    background-color: #fff;
  }
}

.profile-venus body ,
.profile-juno body {
	background-repeat: repeat;
	background-size: contain;
}


.profile-basil body {
   background-position: top;
}

.nofile-center,
.profile-center {
  display: flex;
  min-height: var(--vertical-max);
  justify-content: center;
  place-items: center;
  flex-direction: column;
}

.nofile-container,
.profile-container {
  flex: 1;
  display: flex;
  align-content: center;
  width: 100%;
  align-items: center;
  justify-content: center;
  container: profile-container / inline-size;
}

.attributes {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.attributes ul {
  display: inline-block;
  list-style: none; 
  padding: 0;
  flex: 1;
  min-width: fit-content;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.profile-willow {
  font-family: 'Linnivade Willow', 'Linnivade Basil', 'Linnivade', serif;
}

.profile-basil ,
.profile-liz {
  font-family: 'Linnivade Basil', 'Linnivade Willow', 'Linnivade', serif;
}

.profile-juno {
  font-family: 'Linnivade', serif;
}

.profile-charlotte ,
.profile-venus ,
.profile-venus :where(h1 , h2 , h3, h4 , h5 , h6) {
  font-family: 'Texas Red', serif;
}

.profile-kris ,
.profile-mercury ,
.profile-nyx ,
.profile-star ,
.profile-toby ,
.profile-vincent {
  font-family: 'Arizona Ranger', serif;
}

.mercury-text {
  font-family: 'Monomi', monospace;
  text-transform: uppercase;
  font-size: 80%;
}

.venus-text {
  text-transform: uppercase;
  word-spacing: calc(100% / 3);
}

.profile-venus :where(h1 , h2 , h3, h4 , h5 , h6) {
  font-variant: small-caps;
}


.nofile,
.profile {
  color: var(--_contrast, var(--contrast));
  border-radius: 0;
  background-color: var(--background-faded);
  padding: var(--padding-profile) var(--minimummargin);
  place-self: center;
}

.profile {
  width: clamp(0px, 100%, max(1280px, 80rem));
}

.nofile {
  width: clamp(0px, calc(75% + 20rem), max(2560px, 160rem));
}

.profile a {
  text-align: center;
}

.profile img {
  margin: auto;
  width: min(100%, 500px);
  height: auto;
}

figcaption {
  font-style: italic;
  margin-bottom:48px;
  text-align: center;
}

.profile h1 {
  text-align: center;
}

.button-type {
  display: block;
}

@container profile-container (width > max(800px, 50rem)){
  .nofile,
  .profile {
    margin: var(--margin-profile);
    border-radius: var(--_border-radius, var(--border-radius));
    padding: var(--minimummargin);
  }
  
  .profile figure {
    float: right;
    text-align: left;
  }
  .profile img {
    width:min(350px, calc(50cqw - 16px));
    height: auto;
    margin: unset;
    margin-left: 32px;
    aspect-ratio: 1;
    object-fit: cover;
  }
  .profile h1 {
    text-align: left;
  }
  
  .button-type {
    display: inline;
  }
  figcaption {
    margin-bottom: unset;
    text-align: unset;
    margin-left: 32px;
  }

  .attributes {
    margin-top: 0.5rem;
  }

}

.notfound,
.index {
  font-family: 'Arizona Ranger', serif;
  text-align: center;
}

.crab-bucket {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  max-width:max(1500px, 90rem);
  gap: 16px;
}

.notfound main,
.index main {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: var(--vertical-max);
  flex-direction: column;
  gap: 32px;
}

.boss {
  color: var(--_contrast, var(--contrast));
  border-radius: calc( var(--_border-radius, var(--border-radius)) + 1rem );
  background-color: var(--background-faded);
  padding: 1rem;
  justify-content: space-evenly;
  align-items: flex-start;
  text-align: center;
  display: flex;
  flex-grow: 0.5;
	width: clamp(max(224px, 14rem), 40%, max(300px, 18.75rem));
}

/*
for 13 headdmates

.crab-bucket {
  display: grid;
  max-width:100vw;
  gap: 16px;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        clamp(
          min( max(224px, 14rem), 100% ),
          40%,
          max( 300px, 18.75rem )
        ),
        1fr
      )
    );
  grid-auto-flow: row;
  width: 100%;
}
.boss {
  color: var(--_contrast, var(--contrast));
  border-radius: calc( var(--_border-radius, var(--border-radius)) + 1rem );
  background-color: var(--background-faded);
  padding: 1rem;
  text-align: center;
}
*/

.boss figure {
  flex: 1;
}

.boss-image {
  aspect-ratio: 1;
  width: auto;
  height: max(175px, 10rem);
  object-fit: cover;
  margin: auto;
  margin-bottom: 8px;
}

.yummy {
  color: var(--_background, var(--background));
  background: var(--_accent, var(--accent));
  border-radius: var(--_border-radius, var(--border-radius));
  padding: var(--padding-button);
  margin-bottom:16px;
  text-wrap: balance;
}

.yummy-bunny {
  display: inline-block;
  color: var(--_background, var(--background));
  background: var(--_accent, var(--accent));
  border-radius: var(--_border-radius, var(--border-radius));
  padding: var(--padding-title);
  text-wrap: balance;
}

.yippee-kibby {
  display: inline-block;
  color: var(--_contrast, var(--contrast));
  background: var(--background-faded);
  border-radius: var(--_border-radius, var(--border-radius));
  padding: var(--padding-kibby);
  text-wrap: balance;
}

.brokenlist {
  display: flex;
  flex-wrap: wrap;
  gap: 0px 1ch;
  justify-content: center;
}

.species,
.gender,
.pronoun,
.genericattribute {
  display: inline-block;
}

.boss {
  text-decoration: none;
}

p.yippee-kibby {
  margin-top: 0;
}

.ofl {
  margin-top: 96px;
}

.up-16 {
  margin-top: 16px;
}

.down-16 {
  margin-bottom: 16px;
}

.græyscale ,
.hover-mercury {
  filter: grayscale(1);
}

.img-hoverful {
  display: none;
}
.img-hoverless {
  display: block;
}

.img-charlotte {
  aspect-ratio: unset;
}

.boss:hover ,
.boss:active ,
.boss:focus-visible {
  --accent: var(--accent-hover);
  & .hover-mercury {
    filter: grayscale(0);
  }
  & .img-hoverful {
    display: block;
  }
  & .img-hoverless {
    display: none;
  }
}

.index main > :first-child {
  padding-top:48px;
}

.info {
  padding-block:24px;
}

.index p {
  font-family: 'Texas Red', serif
}

.info p {
  max-width: 80ch;
  margin: auto;
}

.info-img {
  max-width:95%;
  margin: 1rem auto;
}

.info,
.return,
.navigation {
  background: var(--_background, var(--background));
  width:100%;
  box-shadow: 0 50vh 0 50vh var(--_background, var(--background));
}

.navigation,
.return {
  font-family: "Texas Red", serif;
  text-align: center;
  padding: clamp(4px, 1.5vh, 12px) var(--minimummargin);
}

.navigation{ 
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr 1fr 1fr;
}

@media (min-height: 700px){
  .navigation,
  .return{
    position: sticky;
    bottom: 0;
  }
}

@media (max-width: max(640px, 40rem)){
  .navigation-option-long{
    display: none; 
  }
  
.navigation{
    grid-template-columns: unset;
  }
}

@media (max-width: max(320px, 20rem)){
  .navigation-option-medium{
    display: none; 
  }
  
.navigation{
    grid-template-columns: unset;
  }
}


.minimummargin {
  margin: 0 var(--minimummargin);
}

.interests {
  font-family: 'Texas Red', serif;
}

.interests-list {
  list-style: none;
  margin:auto;
  display: grid;
  max-width:100vw;
  gap: 16px;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        clamp(
          min( max(168px, 10.5rem), 100% ),
          40%,
          max( 225px, 14rem )
        ),
        1fr
      )
    );
  grid-auto-flow: row;
  width: 100%;
  text-align: center;
  text-wrap: balance;
  padding: 0;
  place-items: end;
}


.interests-list img {
	width: 100%;
  height: auto;
  aspect-ratio: 600 / 900;
  object-fit: cover;
}

.hidden {
  display: none;
}