#mats {
	position: fixed;
	width: 20%;
	height: 100%;

	h1 {
		margin: 0;
		font-size: 24px;
		text-align: center;
	}

	ul {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		height: 90%;
		list-style: none;
		line-height: 2;
		user-select: none;

		li {
			cursor: pointer;
		}
	}
}

#recipes {
	display: flex;
	width: calc(80% - 20px);
	flex-wrap: wrap;
	margin: 20px 10px;
	user-select: none;
	margin-left: auto;
	margin-right: 0;

	.recipe-wrapper {
		cursor: pointer;
		padding: 10px 20px 10px 10px;

		input[type="checkbox"] {
			display: none;
		}

		label {
			display: inline-block;
			width: 100%;
			height: 100%;
			cursor: pointer;
		}

		img {
			vertical-align: middle;
		}

		&:hover {
			box-shadow: 0px 0px 20px 0px limegreen;
			scale: 1.1;
		}

		&.complete {
			color: limegreen;
			> * {
				text-decoration: line-through;
			}
		}
	}
}