:root{
  color-scheme: light dark;
  --vertical-max: min(100vh, 100vmin, 100vmax);
  
  --φ: calc((1 + sqrt(5))/2);
  --φrem: calc(1rem * calc((1 + sqrt(5))/2));
  --border-width: 15px;
  --border-radius: 10px;
  --blur: 8px;
  
  --padding: min(15px, 10%) min(25px, 10%);
  --padding-button: min(5px, 5%) min(10px, 2%);
  --padding-title: min(15px, 10%) min(50px, 20%);
  
  --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%);
  
  --contrast: light-dark(#210026, #f0e0f9);
  --background: light-dark(#fbefff, #0a030d);
  --accent: light-dark(#8300a1, #db80ff);
}



.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%);
}

.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%);
}

.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%);
}

.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%);

}

.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%);
}

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

.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%);
}

.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%);
}

.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%);
}

.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%);
}

.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%);
}

.willow{
  --contrast: light-dark(#070c0c, #e0e);
  --background: light-dark(#b8fdff, #000000);
  --accent: light-dark(#5400c3, #0ee);
  
  --background-faded: oklch(from light-dark(#b8fdff, #000000) l c h / calc(4 / 5));
  --accent-hover: color-mix(in oklch, light-dark(#5400c3, #0ee) 50%, light-dark(#070c0c, #e0e) 50%);
  --background-placeholder: color-mix(in oklch, light-dark(#5400c3, #0ee) 50%, light-dark(#b8fdff, #000000) 50%);
}

.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;
}

/*
  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;
}

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;
}

: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;
}

h1 {
  font-size: calc(1rem * pow(calc(4 / 3), 3.0))
}

h2 {
  font-size: calc(1rem * pow(calc(4 / 3), 2.0))
}

body ,
h3 {
  font-size: calc(1rem * pow(calc(4 / 3), 1.0))
}

.small ,
small ,
h4 {
  font-size: calc(1rem * pow(calc(4 / 3), 0.0))
}

h5 {
  font-size: calc(1rem * pow(calc(4 / 3), -1.0))
}

h6 {
  font-size: calc(1rem * pow(calc(4 / 3), -2))
}


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

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


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

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

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

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

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

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

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

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

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

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

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

.index body{
  background: url("/media/index-light.png");
}
.profile-basil body {
  background: url("/media/headmate-backgrounds/basil-light.png");
}
.profile-charlotte body {
  background: url("/media/headmate-backgrounds/charlotte-light.jpg");
}
.profile-juno body {
  background: url("/media/headmate-backgrounds/juno-light.png");
}
.profile-kris body {
  background: url("/media/headmate-backgrounds/kris-light.png");
}
.profile-liz body {
  background: url("/media/headmate-backgrounds/liz-light.png");
}
.profile-mercury body {
  background: url("/media/headmate-backgrounds/mercury-light.png");
}
.profile-venus body {
  background: url("/media/headmate-backgrounds/venus-light.png");
}
.profile-nyx body {
  background: url("/media/headmate-backgrounds/nyx-light.png");
}
.profile-star body {
  background: url("/media/headmate-backgrounds/star-light.jpg");
}
.profile-toby body {
  background: url("/media/headmate-backgrounds/toby-light.png");
}
.profile-vincent body {
  background: url("/media/headmate-backgrounds/vincent-light.png");
}
.profile-willow body {
  background: url("/media/headmate-backgrounds/willow-light.png");
}

@media (prefers-color-scheme: dark) {
  .index body{
    background: url("/media/index-dark.png");
  }
  .profile-basil body {
    background: url("/media/headmate-backgrounds/basil-dark.png");
  }
  .profile-charlotte body {
    background: url("/media/headmate-backgrounds/charlotte-dark.jpg");
  }
  .profile-juno body {
    background: url("/media/headmate-backgrounds/juno-dark.png");
  }
  .profile-kris body {
    background: url("/media/headmate-backgrounds/kris-dark.png");
  }
  .profile-liz body {
    background: url("/media/headmate-backgrounds/liz-dark.png");
  }
  .profile-mercury body {
    background: url("/media/headmate-backgrounds/mercury-dark.png");
  }
  .profile-venus body {
    background: url("/media/headmate-backgrounds/venus-dark.png");
  }
  .profile-nyx body {
    background: url("/media/headmate-backgrounds/nyx-dark.png");
  }
  .profile-star body {
    background: url("/media/headmate-backgrounds/star-dark.jpg");
  }
  .profile-toby body {
    background: url("/media/headmate-backgrounds/toby-dark.png");
  }
  .profile-vincent body {
    background: url("/media/headmate-backgrounds/vincent-dark.png");
  }
  .profile-willow body {
    background: url("/media/headmate-backgrounds/willow-dark.png");
  }
}

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

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


.profile-basil body {
   background-position: top;
}
  
.center {
  display: grid;
  place-items: center;
  min-height: var(--vertical-max);
  container: profile / inline-size;
}

.attributes {
  display: flex;
  gap: 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{
  color: var(--_contrast, var(--contrast));
  border-radius: var(--_border-radius, var(--border-radius));
  background-color: var(--background-faded);
  padding: var(--padding);
  width: clamp(0px, 100%, 1280px);
}


.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', serif;
  text-transform: uppercase;
}

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

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

.profile a {
  text-align: center;
}

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

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

.profile h1 {
  text-align: center;
}

.button-type{
  display: block;
}

@container profile (width > 800px){
  .profile figure {
    float: right;
    text-align: left;
  }
  .profile img {
    max-width:350px;
    max-height:400px;
    margin: unset;
    margin-left: 32px;
  }
  .profile h1 {
    text-align: left;
  }
  .button-type{
    display: inline;
  }
  figcaption{
    margin-bottom: unset;
    text-align: unset;
    margin-left: 32px;
  }

}






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

.crab-bucket {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  max-width:1280px;
  gap: 16px;
}

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

.boss {
	width: clamp(0px, 100%, 300px);
  min-height:clamp(0px, 300px, 300px);
  color: var(--_contrast, var(--contrast));
  border-radius: var(--_border-radius, var(--border-radius));
  background-color: var(--background-faded);
  padding: 1rem;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  display: flex;
}

.boss figure{
  flex: 1
}

.boss img{
  aspect-ratio: 1;
  height: 150px;
  width: 150px;
  object-fit: cover;
  margin: auto;
}

.index .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;
}

.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);
}

.moffy-coffee{
  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);
  margin-top: 16px
}

.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-title);
}

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

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

.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;
}

.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;
}

.index main > :last-child {
  padding-bottom:48px;
}

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

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