diff --git a/_includes/ingredients.html b/_includes/ingredients.html
index 53efde5..13740d9 100644
--- a/_includes/ingredients.html
+++ b/_includes/ingredients.html
@@ -5,6 +5,6 @@
 <{{tag}}>Ingredients</{{tag}}>
 <ul>
 	{% for item in page.ingredients -%}
-	<li>{{ item[0] }} {%- if item[2] -%} {{ item[2] }} of {%- endif -%} {{ item[1] }}</li>
+	<li>{{ item[0] }} {% if item[2] %} {{ item[2] }} of {% endif %} {{ item[1] }}</li>
 	{% endfor -%}
 </ul>
diff --git a/_layouts/default.html b/_layouts/default.html
index 4bd2747..169381b 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -3,6 +3,7 @@
 
 <head>
 	<meta charset="UTF-8">
+	<link rel='stylesheet' href='/style.css'>
 	<title>{{ page.title }}</title>
 </head>
 
diff --git a/_layouts/recipe.html b/_layouts/recipe.html
index 88a575a..36096fa 100644
--- a/_layouts/recipe.html
+++ b/_layouts/recipe.html
@@ -19,9 +19,11 @@ layout: default
 	<h2> Subrecipes </h2>
 	{% for subrecipe in site.subrecipes -%}
 		{%- if subrecipe.parents contains id -%}
-			<h3>{{ subrecipe.name }}</h3>
 			<div class='subrecipe' id='sr-{{ subrecipe.name | downcase | url_encode }}'>
-				{{ subrecipe.output }}
+				<h3>{{ subrecipe.name }}</h3>
+				<div class='subrecipe-output'>
+					{{ subrecipe.output }}
+				</div>
 			</div>
 		{%- endif -%}
 	{%- endfor -%}
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..6ad03a4
--- /dev/null
+++ b/style.css
@@ -0,0 +1,25 @@
+body {
+	font-family: sans-serif;
+}
+.subrecipe {
+	background-color: #eee;
+	padding: 5px;
+}
+.subrecipe h3 {
+	margin: 0;
+}
+.subrecipe-output {
+	height: 0;
+	overflow-y: hidden;
+}
+.subrecipe.open .subrecipe-output {
+	height: min-content;
+}
+
+ul {
+	list-style-type: "- ";
+}
+ul, ol {
+	list-style-position: inside;
+	padding-left: 10px;
+}
