:root {
	--body-sans-font: Geist, sans-serif;
	--body-preformatted-font: Iosevka Curly Iaso, monospace;
	--body-title-font: Podkova, serif;
  
	--background: #ffffff;
	--text: #2e261f;
	--text-selection: #9AC1DA;
	--preformatted-background: #F4F3F1;
	--link-foreground: #40718F;
	--link-background: #E9F6FB;
	--blockquote-border-left: 1px solid #4F4E4A;
  
	--progress-bar-outline: #4684AA solid 4px;
	--progress-bar-fill: #4684AA;
  }
  
  @font-face {
	font-family: "Geist";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("./static/geist.woff2") format("woff2");
  }
  
  @font-face {
	font-family: "Podkova";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("./static/podkova.woff2") format("woff2");
  }
  
  @font-face {
	font-family: "Iosevka Curly";
	font-style: monospace;
	font-display: swap;
	src: url("./static/iosevka-curly.woff2") format("woff2");
  }
  
  main {
	font-family: var(--body-sans-font);
	max-width: 50rem;
	padding: 2rem;
	margin: auto;
  }
  
  ::selection {
	background: var(--text-selection);
  }
  
  body {
	background: var(--background);
	color: var(--text);
  }
  
  body,
  html {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: auto;
	margin-right: auto;
  }
  
  .centered-div {
	text-align: center;
  }
  
  #status {
	font-variant-numeric: tabular-nums;
  }
  
  .centered-div {
	text-align: center;
  }
  
  #status {
	font-variant-numeric: tabular-nums;
  }
  
  #progress {
	display: none;
	width: min(20rem, 90%);
	height: 2rem;
	border-radius: 1rem;
	overflow: hidden;
	margin: 1rem 0 2rem;
	outline-offset: 2px;
	outline: var(--progress-bar-outline);
  }
  
  .bar-inner {
	background-color: var(--progress-bar-fill);
	height: 100%;
	width: 0;
	transition: width 0.25s ease-in;
  }
  
  @media (prefers-reduced-motion: no-preference) {
	.bar-inner {
	  transition: width 0.25s ease-in;
	}
  }
  
  pre {
	background-color: var(--preformatted-background);
	padding: 1em;
	border: 0;
	font-family: var(--body-preformatted-font);
  }
  
  a,
  a:active,
  a:visited {
	color: var(--link-foreground);
	background-color: var(--link-background);
  }
  
  h1,
  h2,
  h3,
  h4,
  h5 {
	margin-bottom: 0.1rem;
	font-family: var(--body-title-font);
  }
  
  blockquote {
	border-left: var(--blockquote-border-left);
	margin: 0.5em 10px;
	padding: 0.5em 10px;
  }
  
  footer {
	text-align: center;
  }