@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-optical-sizing: auto;
}

/* View Transitions */
@view-transition {
	navigation: auto;
}

:root {
  /* Animation */
	--ease: cubic-bezier(0.07, 1.00, 0.00, 1.00);
  --animation-speed: 1200ms;

  /* Spacing */
  --flow-space: clamp(0.5em, 0.5em + 1vw, 1em);

  /* Scale */
  /* https://codepen.io/miriamsuzanne/pen/QwEXomP */
  --size--medium: clamp(1em, 22px + 1vi, 1.25em);

  --scale: 1.1;
  /* create the typographic scale! */
  --xx-small: calc(var(--size--medium) * pow(var(--scale), -1));
  --x-small: calc(var(--size--medium) * pow(var(--scale), -.5));
  --small: calc(var(--size--medium) * pow(var(--scale), -.25));
  --large: calc(var(--size--medium) * pow(var(--scale), 1));
  --x-large: calc(var(--size--medium) * pow(var(--scale), 2));
  --xx-large: calc(var(--size--medium) * pow(var(--scale), 3));
  --xxx-large: calc(var(--size--medium) * pow(var(--scale), 4));
  --xxxx-large: calc(var(--size--medium) * pow(var(--scale), 5));
  --xxxxx-large: calc(var(--size--medium) * pow(var(--scale), 6));
  --xxxxxx-large: calc(var(--size--medium) * pow(var(--scale), 7));

  /* Fonts */
  --font-body: 'Inter', sans-serif;
  --font-heading: 'Space Grotesk', serif;
  --font-monospace: monospace;

  /* Colors */
	--clr-gold: oklch(78.266% 0.14194 89.569);
	--clr-darkteal: #182024;
	--clr-teal: #4E8B8C;
  --clr-greenbright: #618616;
	--clr-greenlighter: #8EA75D;
	--clr-palefoam: oklch(93.911% 0.02612 147.337);
  --clr-darkblue: #044488;
	--clr-mediumblue: #0D6FBA;
	--clr-brightblue: #0099FF;
  --clr-brightblue-alt: #0482cb;
	--clr-lightblue: #77B0CE;
  --clr-lightbrightblue: #71bfe9;
	--clr-greige: #C4C4C4;
  --clr-lightbeige: #f6f1ee;
	--clr-maroonish: #9E3F4E;
	--clr-paledpeach: #FFC9B9;
	--clr-brightorange: #FF6924;
	--clr-salmon: #D7765B;
	--clr-beige: #DCB39E;

  --link-color: var(--clr-darkblue);
  --link-decoration-color: var(--clr-brightblue);
  --link-border-width: 2px;
  --link-border-color: transparent;
  --link-hover-color: var(--clr-brightblue);
  --link-hover-border-color: var(--clr-lightbrightblue);
  --link-active-color: var(--clr-brightblue-alt);
}

body {
  font-family: var(--font-body);
  font-size: var(--small);
  line-height: 1.5;

  background-color: var(--clr-bg);
  color: var(--clr-fg);
}
.container {
  padding: 4vw 8vw;
  margin-inline: auto;
  max-width: 70ch;

  background-color: oklch(from var(--clr-bg) l c h / 0.6);
}

/* Visually Hidden */
/* https://www.a11yproject.com/posts/how-to-hide-content/ */
.visually-hidden:not(:focus):not(:active) {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* links */
a[href] {
	color: var(--link-color);

  position: relative;

  color: var(--link-color);
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-decoration-color: (--link-color);
  border: var(--link-border-width) dotted var(--link-border-color);

  padding: var(--link-border-width);

  transition: all var(--animation-speed) var(--ease);

}
a[href]:visited {
	color: var(--link-active-color);
  border-color: var(--link-hover-border-color);
}
a[href]:hover,
a[href]:active,
a[href]:visited:hover,
a[href]:focus {
	color: var(--link-hover-color);
}
p a, ul a, ol a {
  font-weight: bolder;
}

h1,
.site-title,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1;
  margin:0;
}

h1, h1.site-title{
  font-size: var(--xxxxxx-large);
}
h2 {
  font-size: var(--xxxxx-large);
}
h3 {
  font-size: var(--xxxx-large);
}
h4 {
  font-size: var(--xxx-large);
}
h5 {
  font-size: var(--xx-large);
}
h6 {
  font-size: var(--x-large);
}
.site-title {
  font-size: var(--small);
}
.site-title a {
  font-weight:normal;
}

p {
  margin: 1rem 0;
  line-height: 1.9;
}

iframe {
  max-width: 100%;
  aspect-ratio: 560/315;
  height: auto;
}