/* Created by http://freehtml5templates.com */

body {
  background: #4d6796 url(../img/soybeans-bg-polina.jpg) fixed 30% center
    no-repeat; /* Courtesy to Polina Tankilevitch (Pexels): https://www.pexels.com/photo/sliced-tofu-with-sesame-seeds-on-white-plate-4518604/ */
  background-blend-mode: overlay;
  font-family: 'Chewy', cursive;
}

/* layout */

.wrapper {
  width: 1120px;
  margin: 0 auto;
  margin-top: 5px;
  margin-bottom: 5px;
  -webkit-box-shadow: 2px 2px 7px #555;
  -moz-box-shadow: 2px 2px 7px #555;
}

.nav-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #ffffff;
}

.logo img {
  width: 3.25rem;
}

nav {
  line-height: 70px;
}

header,
footer {
  display: flex;
  flex-wrap: wrap;
}

main {
  justify-content: space-around;
  padding: 20px;
  background: #6aa56f;
  line-height: 1.5;
}

.content {
  width: 680px;
  display: flex;
  padding: 3rem 1.25rem;
  flex-flow: wrap row;
  align-items: baseline;
  margin: 0 auto;
}

.sidebar1 {
  width: 220px;
  padding: 20px 15px;
  float: left;
  background: #9ac79a;
  margin-top: 30px;
  margin-left: 20px;
}

/* basics */
/* 
h1,
h2,
h3,
h4 {
  font-weight: bold;
  color: #333;
} */

h1 {
  margin: 20px 0;
}

.recipes h3 {
  font-size: 20px;
  width: 20ch;
}

a:link,
a:visited {
  color: #333;
}

a:hover,
a:active {
  color: #999;
  text-decoration: underline;
}

article {
  margin-bottom: 3rem;
}

article p {
  margin-bottom: 18px;
}

/* nav */

nav .menu {
  font-size: 22px;
}

nav .menu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

nav .menu a {
  display: block;
  margin-right: 18px;
  padding: 0px 15px;
}

nav .menu a:hover {
  text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6,
.shine {
  font-family: 'Chewy', cursive;
}

p {
  font-size: 22px;
}

p,
figcaption,
span,
.privacy,
.card li {
  font-family: 'Roboto Condensed', Verdana, Arial, Helvetica, sans-serif;
}

/** HEADER */

header {
  padding: 40px;
  background: url(../img/bag-soybeans-headerbg.jpg) #126345fa no-repeat left
    center/cover; /*public domain (https://www.maxpixel.net/Beans-Grain-Soybeans-Bag-Oil-Burlap-Plants-Seeds-2039638) */
  height: 220px;
  background-blend-mode: multiply;
  color: white;
}

header h1 {
  font-size: 60px;
}

header h1 a:link,
header h1 a:visited {
  color: #d0e8d7;
}

header h1 a:hover {
  text-decoration: underline;
}

.shine {
  color: #c7902b;
}

header h2 {
  font-style: italic;
  font-size: 14px;
  color: #333;
}

/** ARTICLES **/

article img {
  margin-bottom: 16px;
  margin-right: 18px;
  -webkit-box-shadow: 3px 6px 6px #297b70;
  -moz-box-shadow: 3px 3px 7px #777;
}

.content p {
  margin-bottom: 24px;
  color: #122271;
  font-weight: 600;
}

.content h2,
.content h3,
.content h4 {
  color: #461f08;
  margin: 0 0 20px 0;
}

.content h2 {
  font-size: 40px;
  text-shadow: 0px 2px 3px #ddd;
}

.content

/* sidebar and footer widget blocks */

.asidebox {
  width: 180px;
  -o-border-image: url('../img/boxborder.gif') 27 27 27 27 round round;
  -icab-border-image: url('../img/boxborder.gif') 27 27 27 27 round round;
  -khtml-border-image: url('../img/boxborder.gif') 27 27 27 27 round round;
  -moz-border-image: url('../img/boxborder.gif') 27 27 27 27 round round;
  -webkit-border-image: url('../img/boxborder.gif') 27 27 27 27 round round;
  border-image: url('../img/boxborder.gif') 27 27 27 27 round round;
  border: 5px solid #eee;
  margin-bottom: 40px;
  padding: 7px;
}

aside h3 {
  font-size: 18px;
  text-shadow: 0px 2px 3px #ddd;
  text-align: center;
  margin-bottom: 25px;
  color: #15527d;
}

aside ul {
  margin-bottom: 20px;
  margin-top: -15px;
  padding-left: 28px;
  list-style-type: disclosure-closed;
}

.asidebox img {
  display: block;
  margin: 0 auto;
}

.asidebox a {
  font-family: 'Roboto Condensed', Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
}

footer {
  background-color: #8be8f7;
  color: #fff;
  padding: 20px;
  display: flex;
  flex-flow: wrap column;
  justify-content: space-around;
  line-height: 1.5;
}

.footer-segment {
  width: 140px;
}

footer h4 {
  color: #777;
  font-size: 16px;
  text-align: center;
  text-shadow: 0px 2px 3px #ddd;
}

footer a:link,
footer a:visited {
  color: #577695;
}

footer a:hover {
  text-decoration: underline;
}

footer p {
  color: #333;
  text-align: center;
  margin: 10px 0;
  font-size: 16px;
}

/* ====== custom CSS ========== */

figcaption {
  font-size: 16px;
  color: #151307;
  font-style: italic;
}

.content article a {
  color: #9a1515;
}

/* origin */

.origin figure {
  float: left;
  margin-right: 15px;
  margin-bottom: 10px;
}

.origin img {
  width: 300px;
  height: 190px;
}

/* nutrients and benefits */

.nutribenefit figure {
  margin-bottom: 23px;
}
.nutribenefit img {
  width: 395px;
  height: 245px;
}

/* recipes */
.recipes {
  display: flex;
  justify-content: flex-start;
  flex-flow: wrap row;
}

.recipes div {
  width: 220px;
  height: 270px;
  background: #e2d8d8;
  margin-bottom: 3rem;
  margin-right: 2.5rem;
  display: flex;
  flex-flow: wrap column;
  align-items: baseline;
  padding: 25px;
  border-radius: 6px;
}

.recipes img {
  width: 220px;
  height: 150px;
}

/* fun facts */
.fun {
  list-style-type: disc;
  color: black;
  padding-left: 23px;
}

.fun p {
  width: 38ch;
}

/* food contains soy */
.cards-food-soy,
.cards-exciting,
.card {
  display: flex;
}

.cards-food-soy,
.cards-exciting {
  flex-direction: column;
  row-gap: 1.3rem;
}

.card {
  background: beige;
}

.card div:last-of-type {
  padding: 1.15rem;
}

.card:nth-of-type(1n) {
  flex-direction: row;
}

.card:nth-of-type(2n) {
  flex-direction: row-reverse;
}

.card img {
  width: 14rem;
  margin: 0;
}
.card h3 {
  font-size: 32px;
  text-shadow: 4px 5px 7px #c75e99;
}
.card h4 {
  font-size: 24px;
  margin-bottom: 0.75rem;
}
.card p {
  font-size: 18 px;
}

.card ol {
  list-style-type: auto;
  font-size: 17px;
  padding-left: 2rem;
}

.card ol li {
  margin-bottom: 0.95rem;
  color: #094431;
}

.new-exciting > img {
  float: left;
  box-shadow: none;
}

/* footer */

footer h2 {
  margin-left: 50px;
  color: grey;
}
.footer-content,
.soc-media,
.privacy {
  display: flex;
}

.footer-content {
  justify-content: space-between;
}
.privacy {
  gap: 1.3rem;
  align-items: center;
}

.privacy li {
  flex: 1 1 auto;
}
.soc-media {
  margin-left: 49px;
}
.soc-media li {
  margin-right: 30px;
}

.soc-media img {
  width: 55px;
  height: 55px;
}