#body { background-color: #000000; }
#header { background-color: #000000; }
#footer { background-color: #000000 !important; }
#page-wrapper { background-color: #000000; }
#item img { display: block; margin-left: auto; margin-right: auto; }

.logo { float: left; width: 100%; }
.e-content p { font-size: 12pt; margin: 10px; }


/* This formats the layout of the main blog page */

#item { 
  background-color: #000000;
  border-radius: 20px;
}

.card { border-radius: 20px; }

.container.grid-lg { 
  max-width: 90%; 
}

/* This formats the individual card blog post */
.content-item { 
  /* max-width: 50%; */
  display: grid;
  justify-content: space-evenly;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  padding: 10px;
  background-color: #ffffff;
  color: #000000; 

  @media screen and (min-width: 1200px) {
      max-width: 50%;
  }

}


/* This centers the heading LOGO and menu items */
/*
.container {
  display: grid;
  justify-content: space-evenly;
  margin-left: auto;
  margin-right: auto;
}
*/

/* This centers all the items into a single column on the main blog page */
/*
.bricklayer {
  display: grid;
  justify-content: space-evenly;
  margin-left: auto;
  margin-right: auto;
}
*/


/* .frame-box, modular-features, and .section contain formatting for the "buy my books" page */
.frame-box { 
   display: block;
   background-color: #FFFFFF; 
   padding: 10px; 
   border-radius: 20px;
   font-size: medium; 
}

.frame-box p {
  padding: 10px; 
  display: block;
  text-align: left;
}

.modular-features { padding: 5px; } 

/* This breaks the hero image overlay on the "blog" and "travel" pages. Not sure why... */
/* .section { padding: 5px; } */



/* .e-content iframe { display: block; margin-left: auto; margin-right: auto; } */
.e-content iframe { display: flex; justify-content: center; align-items: center; } /* This is not working as expected. Need to tweak. */