/* define variables with their defaults on the root element */
:root {
	/* major third scale */
	--size-scale-major: 3.815rem;
	--size-scale-900: 3.052rem;
	--size-scale-800: 2.441rem;
	--size-scale-700: 1.953rem;
	--size-scale-600: 1.563rem;
	--size-scale-500: 1.25rem;
	--size-scale-400: 1rem;
	--size-scale-small: 0.833rem;
	--size-scale-tiny: 0.694rem;

	/* colors */
	/* theme machine URL: https://tools.keithjgrant.com/theme-machine/export/?d=48,01,150,gray&c=48,06,150,green&c=48,06,330,grape&c=85,175,97.7,yellow&b1=gray-2&b2=green-4&b3=grape-4&t1=gray-12&t2=green-12&br=green-10 */
	--gray-1: hsl(129 7.53% 97.3%);
	--gray-2: hsl(129 9.95% 95.9%);
	--gray-3: hsl(129 7.1% 90.6%);
	--gray-4: hsl(129 3.69% 79.1%);
	--gray-5: hsl(129 3.91% 74%);
	--gray-6: hsl(129 3.17% 62.9%);
	--gray-7: hsl(129 2.84% 56.8%);
	--gray-8: hsl(129 2.62% 47.5%);
	--gray-9: hsl(129 2.78% 41.8%);
	--gray-10: hsl(129 2.88% 37.4%);
	--gray-11: hsl(129 3.12% 29.8%);
	--gray-12: hsl(129 3.45% 22.6%);
	--gray-13: hsl(129 3.94% 14.8%);
	--gray-14: hsl(129 4.88% 8.47%);
	--gray-15: hsl(129 5.94% 5.07%);
	--gray-16: hsl(129 7.99% 1.26%);
	--gray: var(--gray-10);
	
	--green-1: hsl(129 39.1% 97%);
	--green-2: hsl(129 51.4% 95.2%);
	--green-3: hsl(129 38.3% 89.4%);
	--green-4: hsl(130 21.1% 77.6%);
	--green-5: hsl(130 22.4% 71.9%);
	--green-6: hsl(131 18.4% 60.4%);
	--green-7: hsl(131 16.6% 54.2%);
	--green-8: hsl(132 17.7% 44.6%);
	--green-9: hsl(132 18.8% 39.1%);
	--green-10: hsl(132 19.7% 34.8%);
	--green-11: hsl(132 21.6% 27.6%);
	--green-12: hsl(133 24.3% 20.7%);
	--green-13: hsl(133 28.5% 13.3%);
	--green-14: hsl(133 36% 7.41%);
	--green-15: hsl(131 41.7% 4.41%);
	--green-16: hsl(130 52.5% 1.1%);
	--green: var(--green-10);
	
	--grape-1: hsl(308 52.3% 97.7%);
	--grape-2: hsl(308 76.5% 96.8%);
	--grape-3: hsl(308 50% 92.1%);
	--grape-4: hsl(308 23.8% 80.7%);
	--grape-5: hsl(307 25.1% 76%);
	--grape-6: hsl(307 19.8% 65.1%);
	--grape-7: hsl(307 17.5% 59.1%);
	--grape-8: hsl(306 14.7% 49.7%);
	--grape-9: hsl(306 15.4% 43.8%);
	--grape-10: hsl(306 16% 39.2%);
	--grape-11: hsl(306 17.3% 31.4%);
	--grape-12: hsl(306 19% 23.9%);
	--grape-13: hsl(306 21.7% 15.8%);
	--grape-14: hsl(306 26.3% 9.14%);
	--grape-15: hsl(306 31.3% 5.57%);
	--grape-16: hsl(307 41.7% 1.5%);
	--grape: var(--grape-10);
	
	--yellow-1: oklch(98% 0.043 97.7);
	--yellow-2: oklch(96.7% 0.089 101);
	--yellow-3: oklch(93% 0.147 97.7);
	--yellow-4: oklch(84% 0.175 97.7);
	--yellow-5: oklch(80.2% 0.191 96.1);
	--yellow-6: oklch(71.2% 0.169 95.9);
	--yellow-7: oklch(66.2% 0.157 95.7);
	--yellow-8: oklch(58.2% 0.138 95.5);
	--yellow-9: oklch(53.2% 0.126 95.2);
	--yellow-10: oklch(49.2% 0.117 95);
	--yellow-11: oklch(42.2% 0.1 94.6);
	--yellow-12: oklch(35.2% 0.083 93.9);
	--yellow-13: oklch(27.2% 0.064 92.8);
	--yellow-14: oklch(20.1% 0.048 90.9);
	--yellow-15: oklch(16.1% 0.038 89.1);
	--yellow-16: oklch(10.1% 0.024 83.5);
	--yellow: var(--yellow-4);


	/* semantic variables */
	--background-1: var(--green-1);
	--background-1-transparent: hsl(129 39.1% 97% / 85%);
	--background-2: var(--green-12);
	--background-2-transparent: hsl(133 24.3% 20.7% / 85%);
	--background-3: var(--grape-12);
	--text-1: var(--green-12);
	--text-2: var(--green-2);
	--text-3: var(--grape-2);
	--brand-color: var(--green);
	--link-color: var(--grape);
	--link-hover-color: var(--grape-13);
	--focus-outline-color: var(--brand-color);
	--body-font: "Roboto", sans-serif;

	/* sizes */
	--h1-size: var(--size-scale-800);
	--h2-size: var(--size-scale-700);
	--h3-size: var(--size-scale-600);
	--h4-size: var(--size-scale-500);
	--base-text-size: var(--size-scale-400);

	--flow-space: calc(var(--size-scale-400) * 2);
}
body {
  background-color: var(--background-1);
  color: var(--text-1);
}
body > .container.wrap {
  border: 4px solid var(--green-9);
  border-radius: 1rem;
  box-shadow: inset 0 0 3px var(--green-8);
}
.header {
  display: flex;
  justify-content: center;
}
.header a {
  display: block;
}
form label,
form p {
  color: var(--text-1) !important;
}
form .lists h2 {
  display: none;
}
/* defaults to button-primary colors */
a[class*="button"], button[class*="button"] {
  --button-border-color-hover: var(--green-7);
  --button-color: var(--green);
  --button-text-color: var(--green-2);
  --button-color-hover: var(--green-3);
  --button-text-color-hover: var(--green-12);
  align-items: center;
  background-color: var(--button-color);
  border-radius: 12px;
  border: 4px solid var(--button-border-color, transparent);
  box-shadow: inset 0 0 4px transparent;
  color: var(--button-text-color);
  display: flex;
  font-size: var(--button-font-size, 1.25rem);
  font-weight: 700;
  height: fit-content;
  justify-content: center;
  line-height: 1;
  padding-block: var(--button-pad-block, 0.75em);
  padding-inline: var(--button-pad-inline, 1.5em);
  position: relative;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  text-transform: uppercase;
  transition: background .125s ease-in-out, border .125s ease-in-out, box-shadow .125s ease-in-out;
  flex: 0 1 fit-content;
}
a[class*="button"]:hover,
button[class*="button"]:hover{
  background-color: var(--button-color-hover);
  border-color: var(--button-border-color-hover, transparent);
  box-shadow: inset 0 0 4px rgba(0,0,0,0.5);
  color: var(--button-text-color-hover);
}
		
a[class*="button"]:focus-visible,
button[class*="button"]:focus-visible {
  background-color: var(--button-color-hover);
  border-color: var(--button-border-color-hover, transparent);
  color: var(--button-text-color-important);
  outline: 2px solid var(--button-text-color-hover);
  outline-offset: 3px;
}
button[type="submit"],
#btn-back {
  margin-block-start: 2rem;
  margin-inline: auto;
}
a.button-secondary,
button.button-secondary {
	--button-border-color-hover: var(--grape-7);
	--button-color: var(--grape);
	--button-text-color: var(--grape-2);
	--button-color-hover: var(--grape-3);
	--button-text-color-hover: var(--grape-12);	
}
footer.loaded {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

footer.loaded .links {
  display: flex;
  gap: 1rem;
  justify-content: center;
  list-style-type: none;
  padding: 0;
}
footer.loaded .links li {
  flex: 0 1 30%;
}
footer.loaded .links a {
  --button-pad-block: 0.25rem;
  --button-pad-inline: 0.75rem;
  font-size: var(--size-scale-small);
}
/* utility classes */
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}