*,
*:before,
*:after {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

:root {
	--bg-color: oklch(0.95 0 89.876);
	--fg-color: oklch(0.09 0 89.876);
	--border-color: oklch(0.85 0 89.876);

	@media (prefers-color-scheme: dark) {
		--bg-color: oklch(0.15 0 89.876);
		--fg-color: oklch(0.9 0 89.876);
		--border-color: oklch(0.25 0 89.876);
	}
}

.F0ns0q_index {
  flex-direction: column;
  gap: 1em;
  width: min(80ch, 98vw);
  padding: 1rem;
  display: flex;
}

.F0ns0q_title {
  text-align: center;
  font-size: 2em;
}

.F0ns0q_recipe {
  border: 1px solid var(--border-color);
  color: var(--fg-color);
  border-radius: .5rem;
  flex-direction: column;
  gap: .5em;
  padding: .5rem;
  text-decoration: none;
  display: flex;

  &:hover {
    background-color: var(--fg-color);
    color: var(--bg-color);
  }

  & .F0ns0q_tags {
    flex-wrap: wrap;
    gap: .5em;
    list-style: none;
    display: flex;

    & .F0ns0q_tag {
      align-items: center;
      gap: .1em;
      display: flex;
    }
  }
}

.ffsSEG_recipe {
  flex-direction: column;
  gap: 1em;
  width: min(80ch, 98vw);
  padding: 1rem;
  display: flex;
}

.ffsSEG_title {
  text-align: center;
  font-size: 2em;
}

.ffsSEG_author {
  text-align: center;
  color: color-mix(in oklch, var(--fg-color), var(--bg-color) 25%);
  margin-top: -.5rem;
  font-size: 1em;
  font-style: italic;
}

.ffsSEG_tags {
  flex-wrap: wrap;
  justify-content: center;
  gap: .5em;
  list-style: none;
  display: flex;

  & .ffsSEG_tag {
    text-transform: lowercase;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 2px 5px;
  }
}

.ffsSEG_meta {
  flex-direction: row;
  justify-content: center;
  gap: 1rem;
  display: flex;

  & .ffsSEG_item {
    align-items: center;
    gap: .5rem;
    display: flex;
  }
}

.ffsSEG_body {
  font-variant-numeric: stacked-fractions;
}

.ffsSEG_source {
  border-top: 1px solid var(--border-color);
  flex-direction: row;
  gap: 1rem;
  padding-top: .5rem;
  display: flex;

  & .ffsSEG_link {
    color: color-mix(in oklch, var(--fg-color), var(--bg-color) 50%);
    flex-direction: row;
    align-items: center;
    gap: .2rem;
    text-decoration: none;
    display: flex;

    &:hover {
      text-decoration: underline;
    }
  }
}

.ffsSEG_home {
  color: color-mix(in oklch, var(--fg-color), var(--bg-color) 50%);
  position: fixed;
  top: 1rem;
  left: 1rem;

  &:hover {
    color: var(--fg-color);
  }
}

.kFfMHq_body {
  background-color: var(--bg-color);
  min-height: 100vh;
  color: var(--fg-color);
  flex-direction: column;
  align-items: center;
  font-family: sans-serif;
  font-size: 18px;
  display: flex;
}

.ONKFda_markdown {
  text-align: justify;
  line-height: 1.5;

  & h2 {
    margin-top: 1rem;
    margin-bottom: .5rem;
  }

  & :is(ul, ol) {
    padding-left: 1.5rem;
  }

  & li {
    margin-bottom: .5rem;
  }
}