/*
Theme Name:   bhm-wpbs
Theme URI:    
Description:  a child theme of the WordPress theme WP Bootstrap Starter
Author:       
Author URI:   
Template:     wp-bootstrap-starter
Version:      0.0.0
License:      
License URI:  
*/
@import url("../wp-bootstrap-starter/style.css");

/* ---------------------------------------------------------------------------------------------------- */

ul {
  list-style-image: url('https://bhm.demolitionart.com/bhm/image/site/bhm_logo_x0012.png');
}		

/*  
#bhm-link {
  font-weight: 700;
  color: hsl(195, 85%, 90%) !important;
}
*/
/*  
font-weight: bold;
font-weight: 900;
120%
*/

/* no effect: visibility: hidden !important; or display: none !important;
.wsp-pages-title {
}
*/

/* no effect, even with !important
.book-detail {
  font-size: 60%;
}
*/

.bhm-search-found {
  /* no effect, even with !important
  font-size: 60%;
  */
}

/* ---------------------------------------------------------------------------------------------------- */

/*
www.w3schools.com/howto/howto_css_image_text_blocks.asp
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
*/
.text-overlay-container {
  position: relative;
}
.text-overlay-block-tl {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(0, 0, 0, 0.5);
  color: hsl(195, 85%, 90%);
  padding-left: 10px;
  padding-right: 10px;
}
.text-overlay-block-br {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.5);
  color: hsl(195, 85%, 90%);
  padding-left: 10px;
  padding-right: 10px;
}

/* ---------------------------------------------------------------------------------------------------- */

/* wp-embed-aspect-4-3
.wp-block-embed {
  width: 400 !important;
  height: 300 !important;
}
*/
/*
.embed-youtube {
  width: 66%;
  height: 66%;
}
*/

/* ---------------------------------------------------------------------------------------------------- */

.object-image-caption {
  font-size: 80%;
}

.navbar-brand > a {
  font-size: 2.2rem;
}

header#masthead {
  margin-bottom: 0;
  background-color: #ffffff; /* #563d7c */
  box-shadow: 0 0rem 0rem rgb(0 0 0 / 0%), inset 0 0px 0 rgb(0 0 0 / 0%); /* 0 0.5rem 1rem rgb(0 0 0 / 5%), inset 0 -1px 0 rgb(0 0 0 / 10%) */
}

/* possibly: .dropdown-menu .dropdown-item */
.dropdown-item  {
  font-size: 120%;
}

/* placeholder */
/* search-field form-control */
/* does not work? */
label {
  font-size: 90% !important;
}

/* does not work */
/*
.form-control{
  font-size: 50% !important;
}
*/
/* does not work */
/*
.form-control{
  font-size: 0.8rem !important;
}
*/

/* font-size: 90% */
li  {
  font-size: 90%;
}

/* possibly: .wp-block-image figcaption */
figcaption  {
  font-size: 80%;
}

html {
  font-size: 110%; /* font-size 1em = 10px on default browser settings */
}

p {
  font-size: 90%; /* font-size: 90%; */ /* font-size 1em = 10px on default browser settings */
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background-color: hsl(195, 85%, 90%);
}

th, td {
  padding-top: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
}

#content.site-content {
  padding-bottom: 1.5rem; /* 3.75rem */
  padding-top: 1.5rem; /* 4.125rem */
}

/* ---------------------------------------------------------------------------------------------------- */

.card-text-bold {
  font-weight: 600; /* font-weight: bold */ /* bolder */
}

a:hover {
  color: #ed442d !important; /* #e55a45 */
  /* font-weight: bold; */
  text-decoration: none !important;
}
a {
  color: #444444 !important;
  /* color: #444444 !important; */
  font-weight: 600 !important;
  /* font-weight: bold !important; */
}
.a-pale {
  color: #ffffff !important;
}

#masthead {
  background-color: hsl(195, 85%, 90%) !important; /* #EEEEEE #F1F1F1 #d9d9d9 */
}
#colophon {
  background-color: hsl(195, 85%, 90%) !important;
}
html {
  background-color: hsl(195, 85%, 90%) !important;
}
#content {
  background-color: hsl(195, 85%, 92%) !important; /* #F2F2F2 #e6e6e6 */
}

/* ---------------------------------------------------------------------------------------------------- */

.ob_head {
  font-size: 120%;
}
.ob_body {
  font-size: 100%;
}

.two_card {
  background-color: hsl(195, 85%, 94%) !important; /* #F6F6F6 #F8F8F8 #f2f2f2 lightgray #ffffff */
  color: #000000;
  padding: 0.5rem; /* 1 */
  /* height: 4rem; */
}
.two_cards {
  font-size: 85%;
  background-color: hsl(195, 85%, 94%) !important; /* hsl(255, 100%, 100%) hsl(195, 85%, 96%) #FAFAFA#F9F9F9 #e6e6e6 #ffffff */
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-gap: 0rem; /* 1 */
  /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); does not work? */
}
@media (min-width: 600px) {
  .two_cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 800px) {
  .two_cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .two_cards { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------------------------------------- */

.bhm_card_puzzle {
  background-color: hsl(195, 85%, 94%) !important;
  color: #000000;
  padding: 0.5rem;
}
.bhm_cards_puzzle {
  font-size: 85%;
  background-color: hsl(195, 85%, 94%) !important;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-gap: 0rem; /* 1 */
}
@media (min-width: 400px) {
  .bhm_cards_puzzle { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 500px) {
  .bhm_cards_puzzle { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 600px) {
  .bhm_cards_puzzle { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 700px) {
  .bhm_cards_puzzle { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 800px) {
  .bhm_cards_puzzle { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 900px) {
  .bhm_cards_puzzle { grid-template-columns: repeat(7, 1fr); }
}
@media (min-width: 1000px) {
  .bhm_cards_puzzle { grid-template-columns: repeat(8, 1fr); }
}
@media (min-width: 1100px) {
  .bhm_cards_puzzle { grid-template-columns: repeat(9, 1fr); }
}
@media (min-width: 1200px) {
  .bhm_cards_puzzle { grid-template-columns: repeat(10, 1fr); }
}

/* ---------------------------------------------------------------------------------------------------- */

/* body { padding: 1rem; } */
.bhm_card {
  background-color: hsl(195, 85%, 94%) !important; /* #F6F6F6 #F8F8F8 #f2f2f2 lightgray #ffffff */
  color: #000000;
  padding: 0.5rem; /* 1 */
  /* height: 4rem; */
}
.bhm_cards {
  font-size: 85%;
  background-color: hsl(195, 85%, 94%) !important; /* hsl(255, 100%, 100%) hsl(195, 85%, 96%) #FAFAFA#F9F9F9 #e6e6e6 #ffffff */
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-gap: 0rem; /* 1 */
  /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); does not work? */
}
@media (min-width: 600px) {
  .bhm_cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 800px) {
  .bhm_cards { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
  .bhm_cards { grid-template-columns: repeat(4, 1fr); }
}
/*
@media (min-width: 1200px) {
  .bhm_cards { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 1400px) {
  .bhm_cards { grid-template-columns: repeat(6, 1fr); }
}
*/

#img_lo_card {
  max-width: 256px;  
  max-height: 256px;  
}

#img_lo {
  max-width: 400px;  
  max-height: 400px;  
}

/* ---------------------------------------------------------------------------------------------------- */

/* only works with !important
.container, .container-lg, .container-md, .container-sm, .container-xl {
  max-width: 1400px !important;
}
 */
/* makes no difference with or without !important
@media (min-width: 1200px) .container, .container-lg, .container-md, .container-sm, .container-xl {
  max-width: 1140px;
}
*/

/* only seems to work for left margin
.container {
  margin-left: 128px !important;
  margin-right: 128px !important;
}
.container {
  margin-left: 128px !important;
  margin-right: inherit !important;
}
*/
/* 100% makes content narrower
.row {
  width: 120%;
}
*/
/*
.page-template-fullwidth {
  width: 100%;
}
*/
/* makes the content section very wide but the container and masthead stays the same width
#content.site-content {
  width: 200%;
}
*/
/* makes no difference
#page-site {
  width: 100%;
}
*/
/* makes no difference
#page {
  max-width: 100%;
}
*/
/* makes no difference
#page {
  width: 100%;
}
*/
/* makes no difference
#site {
  max-width: 100%;
}
*/
/* makes no difference
#site {
  width: 100%;
}
*/
/* makes no difference 1920px 
#content {
  max-width: 200%;
}
*/
/* makes no difference
.site-main {
  max-width: 200%;
}
*/
/* makes no difference
#main {
  max-width: 100%;
}
*/
/* makes no difference
#primary {
  max-width: 200%;  
}
*/
/* makes no difference
body {
  max-width: 100%;  
}
*/
/* makes no difference
#content-area {
  max-width: 1920px; 200%
}
*/
/* makes no difference
.container {
  width: 120%;
}
1920px */

/* not used
.bhm_card_wide {
  background-color: hsl(195, 85%, 94%) !important;
  color: #000000;
  padding: 0.5rem;
}
*/

/* does not work
  .wp-block-media-text__content {
  vertical-align: top !important;
}
*/

/* ---------------------------------------------------------------------------------------------------- */