body { font-family: "DejaVu Sans", "Bitstream Vera Sans", "Helvetica", "Roboto", sans-serif; display: flex; flex-direction: column; min-height: 100vh; background: #fafafa; } body div { flex-grow: 1; } .subrecipe { background: #eee; padding: 5px; } .subrecipe h3 { margin: 0; } .subrecipe-output { height: 0; overflow-y: hidden; } .subrecipe.open .subrecipe-output { height: min-content; } .subrecipe-heading h3 { display: inline-block; } .subrecipe-toggle { margin-left: 10px; } .subrecipe-toggle::after { font-style: italic; } .subrecipe .subrecipe-toggle::after { content: "Show"; } .subrecipe.open .subrecipe-toggle::after { content: "Hide"; } ul { list-style-type: "- "; } ul, ol { list-style-position: inside; padding-left: 10px; } footer { text-align: center; margin: 20px auto; } footer, .subtle { color: grey; font-style: italic; }