html {
	background-color: rgb(255 252 248);
	font-family: var(--font-family-serif), var(--font-family-serif), sans-serif;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
  color: var(--soft-black);
}

body {
	margin: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.container-narrow {
  max-width: 600px;
  margin: 0 auto;
}

:root {
	--space-0: 0;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 20px;
	--space-5: 32px;
	--space-6: 52px;
	--space-7: 84px;
	--space-8: 136px;
	--space-9: 220px;

	--font-family-sans: Inter;
	--font-family-serif: 'utopia-std';
	--font-family-mono: IBM Plex Mono;

	--font-size-0: 12px;
	--font-size-1: 14px;
	--font-size-2: 16px;
	--font-size-3: 18px;
	--font-size-4: 20px;
	--font-size-5: 24px;
	--font-size-6: 30px;
	--font-size-7: 36px;
	--font-size-8: 48px;
	--font-size-9: 60px;
	--font-size-10: 72px;

	--line-height-0: 16px;
	--line-height-1: 20px;
	--line-height-2: 24px;
	--line-height-3: 28px;
	--line-height-4: 28px;
	--line-height-5: 32px;
	--line-height-6: 36px;
	--line-height-7: 40px;
	--line-height-8: 48px;
	--line-height-9: 60px;
	--line-height-10: 72px;
	--line-height-11: 96px;
	--line-height-12: 128px;

	--white: #fff;
	--green-200: rgb(201 217 107);
	--green-300: rgb(179 202 101);
	--green-400: rgb(157 200 95);
	--green-500: rgb(135 198 89);
	--gray-200: #ced2d9;
	--gray-600: #6e7683;
	--blue-600: #1e61cd;
	--magenta-100: #f9d7eb;
  
	--max-width-0: 320px;
	--max-width-1: 768px;
  
	--soft-black: #505050;
  
}

@font-face {
  font-family:"utopia-std";
  src:url("/fonts/utopia-std-400.woff2") format("woff2");
  font-display:auto;
  font-style:normal;
  font-weight:400;
  font-stretch:normal;
}

@font-face {
  font-family:"utopia-std";
  src:url("/fonts/utopia-std-400-italic.woff2") format("woff2");
  font-display:auto;
  font-style:italic;
  font-weight:400;
  font-stretch:normal;
}

@font-face {
  font-family:"utopia-std";
  src:url("/fonts/utopia-std-700.woff2") format("woff2");
  font-display:auto;
  font-style:normal;
  font-weight:700;
  font-stretch:normal;
}

@font-face {
  font-family:"utopia-std";
  src:url("/fonts/utopia-std-700-italic.woff2") format("woff2");
  font-display:auto;
  font-style:italic;
  font-weight:700;
  font-stretch:normal;
}