@font-face {
	font-family: "baloo";
	src: url("/fonts/baloo/baloo.woff") format("woff");
	font-weight: normal;
	font-style: normal;
      }
      
      :root {
	--hs-links: 48 100%;
	--color-foreground: hsl(0, 0%, 100%);
	--color-background: hsl(278, 73%, 19%);
	--color-links: hsl(var(--hs-links) 50%);
	--color-links-hover: hsl(var(--hs-links) 45%);
	--color-border: hsl(277, 85%, 38%);
	--color-invalid: hsl(356, 100%, 71%);
	--gradient-background: radial-gradient(
	  circle,
	  rgba(152, 11, 238, 1) 0%,
	  rgba(118, 15, 181, 1) 35%,
	  rgba(58, 13, 85, 1) 100%
	);
	--font-body: -apple-system, "Segoe UI", Helvetica Neue, Helvetica,
	  Roboto, Arial, sans-serif, system-ui, "Apple Color Emoji",
	  "Segoe UI Emoji";
	--font-display: baloo, var(--font-body);
      }
      
      html {
	box-sizing: border-box;
      }
      
      *,
      *::before,
      *::after {
	box-sizing: inherit;
      }
      
      :-moz-focusring {
	outline: auto;
      }
      
      :focus {
	outline: var(--color-links) solid 2px;
	outline-offset: 2px;
      }
      
      html,
      body {
	padding: 0;
	margin: 0;
	color: var(--color-foreground);
	background-color: var(--color-background);
      }
      
      [data-light] {
	--color-invalid: hsl(356, 70%, 39%);
	color: var(--color-background);
	background-color: var(--color-foreground);
      }
      
      body {
	font-family: var(--font-body);
	line-height: 1.5;
	background-repeat: no-repeat;
	min-height: 100vh;
	min-height: calc(100vh - env(safe-area-inset-bottom));
      }
      
      a {
	color: var(--color-links);
	text-decoration: none;
      }
      
      a:hover {
	color: var(--color-links-hover);
	text-decoration: underline;
      }
      
      hr {
	display: block;
	height: 1px;
	border: 0;
	background-color: var(--color-border);
	margin-top: 2rem;
	margin-bottom: 2rem;
      }
      
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
	font-family: var(--font-display);
	margin: 0;
      }
      
      h1 {
	font-size: 2.25rem;
	line-height: 2.5rem;
      }
      
      h2 {
	font-size: 1.5rem;
	line-height: 2rem;
      }
      
      h3 {
	font-size: 1.25rem;
	line-height: 1.75rem;
      }
      
      h4 {
	font-size: 1.125rem;
	line-height: 1.75rem;
      }
      
      h5,
      h6 {
	font-size: 0.875rem;
	line-height: 1.25rem;
      }
      
      .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
      }
      
      .container {
	--gutter: 16px;
	width: 1024px;
	max-width: calc(100% - var(--gutter) * 2);
	margin-right: auto;
	margin-left: auto;
      }
      
      /* buttons */
      
      .button {
	--shadow-color: hsl(var(--hs-links) 30%);
	--shadow-size: 3px;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-links);
	color: var(--color-background);
	font-family: var(--font-display);
	font-weight: bold;
	line-height: 1;
	font-size: 1.125rem;
	margin: 0;
	padding: 0.625em 1em;
	border: 0;
	border-radius: 4px;
	box-shadow: 0 var(--shadow-size) 0 0 var(--shadow-color);
	outline-offset: 2px;
	transform: translateY(0);
	transition: background-color 50ms ease-out, box-shadow
	    50ms ease-out,
	  transform 100ms cubic-bezier(0.3, 0.6, 0.8, 1.25);
      }
      
      .button:hover {
	--raise: 1px;
	color: var(--color-background);
	text-decoration: none;
	box-shadow: 0 calc(var(--shadow-size) + var(--raise)) 0 0 var(
	    --shadow-color
	  );
	transform: translateY(calc(var(--raise) * -1));
      }
      
      .button:active {
	--press: 1px;
	box-shadow: 0 calc(var(--shadow-size) - var(--press)) 0 0 var(
	    --shadow-color
	  );
	transform: translateY(var(--press));
	background-color: var(--color-links-hover);
      }
      
      .button[disabled],
      .button[aria-disabled="true"] {
	transform: translateY(0);
	pointer-events: none;
	opacity: 0.7;
      }
      
      .button:focus:not(:focus-visible) {
	outline: none;
      }
      
      /* forms */
      
      form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
      }
      
      fieldset {
	margin: 0;
	padding: 0;
	border: 0;
      }
      
      legend {
	display: block;
	max-width: 100%;
	margin-bottom: 0.5rem;
	color: inherit;
	white-space: normal;
      }
      
      [type="text"],
      [type="password"],
      [type="date"],
      [type="datetime"],
      [type="datetime-local"],
      [type="month"],
      [type="week"],
      [type="email"],
      [type="number"],
      [type="search"],
      [type="tel"],
      [type="time"],
      [type="url"],
      [type="color"],
      textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: block;
	display: flex;
	align-items: center;
	width: 100%;
	height: 2.5rem;
	margin: 0;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--color-border);
	border-radius: 4px;
	background-color: hsl(0 0% 100% / 10%);
	background-blend-mode: luminosity;
	box-shadow: none;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: normal;
	line-height: 1.5;
	color: var(--color-foreground);
	transition: box-shadow 200ms, border-color 50ms ease-out,
	  background-color 50ms ease-out, color 50ms ease-out;
      }
      
      [data-light] [type="text"],
      [data-light] [type="password"],
      [data-light] [type="date"],
      [data-light] [type="datetime"],
      [data-light] [type="datetime-local"],
      [data-light] [type="month"],
      [data-light] [type="week"],
      [data-light] [type="email"],
      [data-light] [type="number"],
      [data-light] [type="search"],
      [data-light] [type="tel"],
      [data-light] [type="time"],
      [data-light] [type="url"],
      [data-light] [type="color"],
      [data-light] textarea {
	color: var(--color-background);
	background-color: hsl(0 0% 0% / 10%);
      }
      
      [type="text"][aria-invalid="true"],
      [type="password"][aria-invalid="true"],
      [type="date"][aria-invalid="true"],
      [type="datetime"][aria-invalid="true"],
      [type="datetime-local"][aria-invalid="true"],
      [type="month"][aria-invalid="true"],
      [type="week"][aria-invalid="true"],
      [type="email"][aria-invalid="true"],
      [type="number"][aria-invalid="true"],
      [type="search"][aria-invalid="true"],
      [type="tel"][aria-invalid="true"],
      [type="time"][aria-invalid="true"],
      [type="url"][aria-invalid="true"],
      [type="color"][aria-invalid="true"],
      textarea[aria-invalid="true"] {
	border-color: var(--color-invalid);
      }
      
      textarea {
	display: block;
	min-height: 50px;
	max-width: 100%;
      }
      
      textarea[rows] {
	height: auto;
      }
      
      input:disabled,
      input[readonly],
      textarea:disabled,
      textarea[readonly] {
	opacity: 0.7;
	cursor: not-allowed;
      }
      
      [type="file"],
      [type="checkbox"],
      [type="radio"] {
	margin: 0;
      }
      
      [type="file"] {
	width: 100%;
      }
      
      label {
	margin: 0;
      }
      
      [type="checkbox"] + label,
      [type="radio"] + label {
	margin-left: 0.5rem;
      }
      
      label > [type="checkbox"],
      label > [type="radio"] {
	margin-right: 0.5rem;
      }
      
      ::placeholder {
	color: hsl(0 0% 100% / 65%);
      }
      
      .form-validation-error {
	margin: 0;
	margin-top: 0.25em;
	color: var(--color-invalid);
	font-size: 0.8rem;
      }
      
      .error-container {
	background-color: hsla(356, 77%, 59%, 0.747);
	border-radius: 0.25rem;
	padding: 0.5rem 1rem;
      }