/* Add your styles here */

/* Given CSS rules below */
body {
   margin: 0;
   font-family: Helvetica, sans-serif;
}

header {
   border-bottom: 2px solid #93B5C6;
   background-color: #DDEDAA;
   padding: 8px;
   display: flex;
   justify-content: space-between;
}

.logo {
   color: #BD4F6C;
   font-size: 18px;
}

.content {
   margin-left: 30px;
   display: flex;
   flex-wrap: wrap;
}
.main-content {
	display: flex;
	flex-wrap: wrap;
	flex-grow: 1;
	flex-basis: 70%;
}

.title {
   border-bottom: 1px dashed #93B5C6;
   display: flex;
   align-items: baseline;
}

.title h1 {
   color: #BD4F6C;
}

.title p {
   color: #93B5C6;
   margin-left: 30px;
}

.summary {
   margin-top: 30px;
   display: flex;
   justify-content: space-evenly;
   flex-grow: 1;
   flex-basis: 100%;
}

.summary > div {
   background-color: #DDEDAA;
   border: 2px solid #93B5C6;
   border-radius: 5px;
   color: #BD4F6C;
   padding: 5px;
   width: 210px;
}

.summary > div > div{
	display: flex;
	justify-content: space-between;

}

.related-content {
   margin-left: 100px;
   flex-grow: 1;
   flex-basis: 20%;
}

.ingredients, .directions{
	flex-grow: 1;
	flex-basis: 45%;
}