* { margin: 0; padding: 0; box-sizing: border-box; }

html {
	font-size: 18px;
}

h1, h2, h3, h4, h5, h6 {
	/* text: cacao */
	color: #A8570C;
	font-family: "Playwrite US Trad", serif;
	font-size: 1.25rem;
}

body {
	display: flex;
	flex-direction: column;
	max-width: 700px;
	justify-content: center;
	padding: 0 0.5rem 0 0.5rem;

	/* text: cast iron */
	color: #2E261C;

	/* background: cream */
	background-color: #F7F1E8;

	font-family: "Nunito", serif;
	font-size: 18px;		
}

main {
	display: flex;
	flex-direction: column;
	padding: 1rem;

	/* background: paper */
	background-color: #FFF9F1;

	/* border color: cast iron */
	border: 1px solid #2E261C;
	border-radius: 20px;
}

article {
	/* background: paper */
	background-color: #FFF9F1;

	/* border shadow: cast iron */
	box-shadow: 0px 2px 5px #2E261C;
	border-radius: 20px;
	border: 1px solid none;
}

form {
	font-size: 1.25rem;
}

a {
	/* text: oak */
	color: #8B5E34;
	text-decoration: none;
}

a:hover {
	/* text: cacoa */
	color: #A8570C;
	text-decoration: underline;
}

ul {
	/* text: oak */
	color: #8B5E34;
	list-style-type: none;
}

ul li:before {
	/* bullet points: ash */
	content: "#"; 
  	color: #888;
}

h2 a {
	/* text: cacao */
	color: #A8570C;
}

/* ------------------------- HEADER SPECIFICATIONS ------------------------- */

header {
	/* set as flex box */
	display: flex;
	flex-direction: column;
	padding: 0 0 3rem 0;
}

header h1 {
	/* text: oak */
	color: #8B5E34;
}

/* --------------- LAYER 1: TOP SECTION --------------- */
.top-header-row {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	justify-content: space-between;
	align-items: flex-end;
	border-bottom: 2px solid #8B5E34;
}

/* --------------- LAYER 1: BOTTOM SECTION --------------- */

.bottom-header-row {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	justify-content: space-between;
}

/* --------------- LAYER 2: BOTTOM SECTION ROW ITEMS --------------- */
.bottom-header-options {
	display: flex;
	flex-direction: row;
	gap: 1rem;
}

.search-bar {
	display: flex;
	flex-direction: row;
	padding: 0.25rem 0 0 0;
	gap: 0.25rem;
}


/* -------------------- PAGE HEADER SPECIFICATIONS -------------------- */
.page-header {
	display: flex;
	flex-direction: column;
	padding: 0 0 2rem 0;
}

/* -------------------- MAIN PAGE SPECIFICATIONS -------------------- */

.maintitle {
	display: flex;
	flex-direction: row;
	font-size: 1.8rem;
}

.buttons {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 1rem;
	padding: 1rem 0 0 0;
}

/* button for Sign in and Browse recipes on home page */
.fake-button {
	/* text: cream */
	color: #F7F1E8;

	/* background: oak */
	background-color: #8B5E34;

	padding: .5em 1em;
	border-radius: 20px;
	border: none;
}	

.fake-button:hover {
	/* text: paper */
	color: #FFF9F1;

	/* background: cacoa */
	background-color: #A8570C;
}

/* -------------------- RECIPE PAGE SPECIFICATIONS -------------------- */

/* --------------- LAYER 1: TOP SECTION --------------- */
.recipe-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	/* text: cacao */
	color: #A8570C;
	font-family: "Playwrite US Trad", serif;
	font-size: 2rem;
}

/* ---------- LAYER 2: BOTTOM SECTION ---------- */
.recipe-metadata {
	display: flex;
	flex-direction: row;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.tag-list {
	display: flex;
	flex-direction: row;
	gap: 0 0.5rem;
	flex-wrap: wrap;
	text-wrap: nowrap;
}

/* --------------- LAYER 1: MIDDLE SECTION --------------- */

.picture-with-recipe-overview-and-description {
	display: flex; 
	flex-direction: column;
}

.picture-with-description {
	display: flex;
	flex-direction: row;
	gap: 1rem;
}

/* ---------- LAYER 2: LEFT SIDE ---------- */
.rotated-picture {
	display: flex;
	flex-direction: column;
	padding: 0rem 0 0.5rem 0;

	transform: rotate(2deg);

	/* border color: white */
	border: 5px solid white;
	border-radius: 3px;

	height: auto;
	width: auto;
	max-width: 33.33%;
	flex: 0 0 33.33%;
}

.recipe-overview {
	display: flex;
	flex-direction: column;
	padding: 0 0 2rem 0;
	max-width: 66.66%;
	max-width: 33.33%;
	flex: 0 0 33.33%;
}

.recipe-overview dt{
	display: inline;
	font-weight: 600;
	margin: 0;
	gap: 0.25rem 0.5rem;
	width: calc(100% / 4);	
}

.recipe-overview dd {
	display: inline;
	margin: 0;
}

/* ---------- LAYER 2: RIGHT SIDE ---------- */
.recipe-description-spacing {
	line-height: 1.25;
}

.recipe-description {
	display: flex; 
	flex-direction: row;
	padding: 0 0 2rem 0;
	flex: 1;
}

/* --------------- LAYER 1: BOTTOM SECTION --------------- */

.ingredients-and-steps {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	width: 100%;
}

/* ---------- LAYER 2: LEFT SIDE ---------- */
.ingredient-list {
	display: flex;
	flex-direction: column;
	padding: 0 0 0 1rem;
	text-indent: -1rem;
	line-height: 1.25;
	width: calc(100% / 3);
	row-gap: 0.5rem;
}


.ingredient-ul {
	/* text: oak */
	color: #8B5E34;
	list-style-type: none;
}

.ingredient-ul li:before {
	/* no bullet points */
	content: ""; 
  	color: #888;
}

/* ---------- LAYER 2: RIGHT SIDE ---------- */
.cooking-step-list {
	display: flex;
	flex-direction: column;
	padding: 0 0 0 1em;
	line-height: 1.25;
	width: calc((100% / 3) * 2);
	row-gap: 0.5rem
}

/* --------------- RESPONSIVE LAYOUT --------------- */
@media (max-width: 500px) {
	body {
		padding: 0;		
	}
	
	header {
		padding: 0 0 0.5rem 0;
	}

	.picture-with-recipe-overview-and-description {
		flex-direction: column;
		gap: 2rem;
		padding: 0 0 2rem 0;
	}

	.picture-and-recipe-overview {
		width: 100%;
	}

	.recipe-overview {
		padding: 0;
	}

	.recipe-overview-item {
		gap: 0.25rem 1rem;
	}

	.ingredients-and-steps {
		flex-direction: column;
		gap: 2rem;
	}

	.ingredient-list {
		width: 100%;
	}

	.cooking-step-list {
		width: 100%;
	}
}

/* -------------------- LOG IN PAGE LAYOUT SPECIFICATIONS --------------------  */

/* --------------- LAYER 1: TOP SECTION --------------- */
.login-page-header {
	display: flex;
	flex-direction: row;
	padding: 0 0 2rem 0;
	font-size: 1.8rem;
}

/* --------------- LAYER 1: BOTTOM SECTION --------------- */

/* ---------- LAYER 2: TOP SECTION ---------- */
.login-parameter {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	padding: 0.25rem;
	align-items: baseline;
	justify-content: flex-end;
} 

.login-parameter input[type="text"] {
	width: 80%;	
}

.password-parameter {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	padding: 0.25rem;
	align-items: center;
	justify-content: flex-end;
	flex: 1;
}

.password-parameter input[type="password"] {
	width: 100%;
}

.password-parameter input[type="text"] {
	width: 100%;
}

.password {
    	display: flex;
	flex-direction: row;
	justify-content: space-between;
   	align-items: center;
	gap: 1rem;
}

input[type="checkbox"] {
	transform: scale(1.2); 
}


/* ---------- LAYER 2: BOTTOM SECTION ---------- */

.login-button-centered {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.login-button {
	width: 50%;
	min-width: 200px;
}

/* --------------- RESPONSIVE LAYOUT --------------- */
@media (max-width: 700px) {
	.login-parameter {
		flex-direction: column;
		gap: 0;
		padding: 0 0 1rem 0;
	}
}
	

/* -------------------- RECIPE CARD LAYOUT SPECIFICATIONS -------------------- */

.card-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 1rem 1rem 1rem 1rem;
	gap: 1rem;
	align-items: flex-start;
}

/* --------------- LAYER 1: INNER CARD --------------- */
.card { /* 3 cards per row */
	display: flex;
	flex-direction: column;
	padding: 0.5rem;
	max-width: calc((100% - 5rem) / 3);
}

/* --------------- RESPONSIVE LAYOUT --------------- */
@media (max-width: 600px) { /* 2 cards per row */
	.card {
		max-width: calc((100% - 5rem) / 2);
	}
}
 
@media (max-width: 400px) { /* 1 card per row */
	.card {
		max-width: 100%;
		min-width: 200px;
	}
}

/* -------------------- SEARCH PAGE SPECIFICATIONS --------------------  */

.full-search-bar {
	display: flex;
	flex-direction: row;
	width: 100%;
}

.full-search-bar input[type="search"] {
	width: 100%;
	padding: 0.25rem;
}


/* -------------------- PROFILE PAGE SPECIFICATIONS -------------------- */

/* --------------- LAYER 1: TOP SECTION --------------- */
.profile-picture-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 0 0 2rem 0;
	align-items: flex-start;
}

/* ---------- LAYER 2: RIGHT SIDE ---------- */
.profile-picture {
	width: 5rem;
	height: 5rem;
}

/* ---------- LAYER 2: LEFT SIDE ---------- */

.profile-metadata {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	justify-content: space-between;
}

.profile-metadata p {
	margin: 0;
}

/* --------------- LAYER 1: MIDDLE SECTION --------------- */
.profile-description {
	display: flex; 
	flex-direction: row;
	padding: 0 0 2rem 0;
}

/* -------------------- EDIT PAGE SPECIFICATIONS -------------------- */

/* --------------- LAYER 1: TOP SECTION --------------- */

.edit-header {
	display: flex;
	justify-content: space-between;
}

.edit-recipe-title {
	/* text: cacao */
	color: #A8570C;
	font-family: "Playwrite US Trad", serif;
	font-size: 2rem;
}

.edit-header input[type="text"] {
	flex: 1;
	width: 100%;
}

/* --------------- LAYER 1: MIDDLE SECTION --------------- */

textarea {
	width: 100%;
	resize: vertical;
}

output {
	display: flex;
	flex-direction: column;
	padding: 0 0 1rem 0;
}

output li {
	color: #FF0000;
}

output li:before {
	content: "\25CB";
	color: #FF0000;
}

/* ---------- LAYER 2: LEFT SIDE ---------- */
.edit-rotated-picture {
	display: flex;
	flex-direction: column;
	padding: 0rem 0 0.5rem 0;

	transform: rotate(2deg);

	/* border color: white */
	border: 5px solid white;
	border-radius: 3px;

	height: auto;
	max-width: 100%;
	flex: 0 0 33.33%;
}

.picture-with-upload {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 33.33%;
	padding: 0 0 1rem 0;
}

.picture-with-description label {
	display: flex;
	flex-direction: column;
	width: 100%;
	resize: vertical;
}

.recipe-overview-item input[type="number"] {
	width: 25%;
}

/* ---------- LAYER 2: RIGHT SIDE ---------- */
.edit-cooking-step-list {
	display: flex;
	flex-direction: column;
	padding: 0 0 0 1rem;
	line-height: 1.25;
	width: 66.66%;
	row-gap: 0.5rem
}

.edit-step {
	vertical-align: top;
}

.edit-cooking-step-list ol li {
	padding: 0 0 1rem 0;
}

.edit-cooking-step-list ol ul li {
	padding: 0 0 0.25rem 0;
}

.edit-cooking-step-list ol ul li:before {
	content: "\25CB";
	color: #888;
}

.edit-cooking-step-list input[type="number"] {
	width: 15%;
	text-align: left;
}

#ingredient-unit {
	width: 25%;
	text-align: left;
}

#ingredient-name {
	width: 50%;
	text-align: left;
}

/* -------------------- ADDITIONAL SPECIFICATIONS -------------------- */

.midbold {
	font-weight: 600;
}

.maintext {
	/* text: cast iron */
	color: #2E261C;
}

.increasedspacing {
	line-height: 1.25;
}