#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;
  display: block; 
  float: left;
  border-radius: 20px;
}

.card { border-radius: 20px; }

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


/* This formats the individual card blog post */

.content-item { 
  background-color: #ffffff;
  display: block; 
  border-radius: 20px;
  padding: 10px;
}


/* .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. */