/* Numbers to the right. */
.part,
.percent,
.sap,
.cost,
.mass {
	text-align: right;
}

@media screen and (max-width: 750px) {
	body {
		margin: .5em;
	}	
	
	#recipe {
		display: grid;
		grid-template-columns: fit-content(2em) 1.5em auto auto;
		grid-auto-rows: auto;
		align-items: center;
	}

	#lyeSolutionHeader, 
	#oilsHeader, 
	#foofsHeader, 
	#totalHeader 
	{
		grid-column-start: 1;
		grid-column-end: 5;
	}

	#recipe h3 label {
		display: none;
	}
	
	#recipe li label {
		grid-column-start: 3;
		grid-column-end: 4;	
	}
	
	#recipe .ingredient {
		grid-column-start: 2;
		grid-column-end: 5;
		font-weight: bold;
	}

	#recipe .part, 
	#recipe .percent, 
	#recipe .sap, 
	#recipe .cost, 
	#recipe .mass {
		grid-column-start: 4;
		grid-column-end: 5;
	}

	#recipe .boxes {
		grid-column-start: 1;
		grid-column-end: 2;
		margin-right: .5em;
	}

	.oilRow .ingredient {
		grid-column-start: 2;
		grid-column-end: 5;
	}


	#addOil {
		grid-column-start: 2;
		grid-column-end: 5;
	}

	.foofRow .ingredient {
		grid-column-start: 2;
		grid-column-end: 5;

	}

	#addFoof {
		grid-column-start: 2;
		grid-column-end: 5;
	}

	.row {
		display: contents;
	}
}

@media print, screen and (min-width: 750px) {
	#recipe {
		display: grid;
		grid-template-columns: auto 1fr auto auto auto auto auto;
		grid-auto-rows: 1fr;
		align-items: center;
	}
	
	#recipe li label {
		display: none;
	}

	#lyeSolutionHeader {
		grid-column-start: 1;
		grid-column-end: 6;
	}

	#oilsHeader {
		grid-column-start: 1;
		grid-column-end: 3;
	}

	#addOil {
		grid-column-start: 2;
		grid-column-end: 6;
	}

	#foofsHeader {
		grid-column-start: 1;
		grid-column-end: 6
	}

	#addFoof {
		grid-column-start: 2;
		grid-column-end: 6;
	}

	#totalHeader {
		grid-column-start: 1;
		grid-column-end: 6
	}

	#waterRow .ingredient, 
	#lyeRow .ingredient {
		grid-column-end: 6
	}

	.foofRow .ingredient {
		grid-column-end: 6;
	}

	.row {
		display: contents;
	}

	.ingredient {
		grid-column-start: 2;
	}

	.cost {
		grid-column-start: 6;
		grid-column-end: 7;
	}

	.mass {
		grid-column-start: 7;
		grid-column-end: 8;
	}



	/* Keep table cells from crashing into each other. */
	#recipe .part, 
	#recipe .percent, 
	#recipe .sap, 
	#recipe .cost {
		margin-right: 1em;
	}

	.boxes {
		margin-right: .5em;
	}


@media screen and (min-width: 750px) {
	body {
		padding-left: 2em;
		padding-right: 2em;
	}
}