:root {
  --text-color: #333;
}

body {
    margin: 40px auto;
    max-width: 650px;
    line-height: 1.6;
    font-size: 18px;
    color: var(--text-color);
    padding: 0 10px;
    font-family: sans-serif
}

a {
    color: var(--text-color);
    font-weight: bold;
}

h1, h2, h3, nav {
    line-height: 1.2;
    font-variant: small-caps;
}

h2, nav {
    /* put a line above header and navigation pane */
    border-top: solid;
    border-top-width: 2px;
    border-color: var(--text-color);

    /* space between the line and the title text */
    padding-top: 0.4em;

    /* space above the line */
    margin-top: 1em;
}

nav {
    /* align center horizontally */
    text-align: center;

    /* style this as an h2 tag */
    font-size: 1.17em;
    font-weight: bold;
}

.ingredient-quantity {
	float: right;
	display: inline-block;
	width: 40%;
}

/* control commented ingredients */
details > summary {
  list-style: none;
}

summary > .ingredient-label::after {
    content: "...";
}
details[open] .ingredient-label:after {
    content: "";
}

.ingredient-comment {
    font-size: 0.8em;
    font-style: italic;
}

/* float header to accomodate duration */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header {
    margin-top: 1em;
    margin-bottom: 1em;
}

header > .step-title {
    /* move margins to parent */
    margin-bottom: 0px;
    margin-top: 0px;
}

header > .step-duration {
    flex-shrink: 0;
}

.recipe-label {
    margin-bottom: 1em;
}

.step-title > .number {
	/* avoid funky small caps parenthesis on Firefox */
    font-variant: full-width;
}