:root {
  --clr-drek-red: red;
  --clr-neutral-100: #fff;
  --clr-neutral-900: #222c2a;

  --clr-drek-title: #993300;
  --clr-body-bg: #ccc;
  --clr-anchor-hover: yellow;

  --ff-primary: Arial, Verdana, Geneva, Helvetica, sans-serif;
  --ff-accent: "Times New Roman", Times, serif;
  --primary-color-dark: white;
  --secondary-color-dark: #555;
  --background-color-dark: #121212;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

a:hover,
a:focus-within {
  background: var(--clr-anchor-hover);
}

body {
  font-family: var(--ff-primary);
  /* font-weight: 500; */
  /* font-size: 1.3125rem; nah, let the user decide via settings */
  line-height: 1.2;
  margin: 0.5rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--clr-drek-title);
  margin-bottom: 0.2em;
}

.header-no-top {
  color: var(--clr-drek-title);
  margin-bottom: 0.2em;
  margin-top: 0.2em;
}

.text-thumbs {
  word-wrap: normal;
  color: black;
  margin-top: 1em;
  margin-bottom: 1em;
}

img {
  display: initial;
  max-width: 100%;
}

.img-centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.img-centered-scans {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}

.img-responsive {
  max-width: 100%;
  height: auto;
}

.drek-body {
  background-color: var(--clr-body-bg);
  color: #000;
}

.margin {
  margin-left: 1rem; /*20px;*/
  margin-top: 0;
  margin-bottom: 1rem;
}

.margin2 {
  margin-left: 2rem; /*40px;*/
  margin-top: 0;
}

.margin3 {
  margin-left: 3rem; /*60px;*/
  margin-top: 0;
}

.margin4 {
  margin-left: 4rem; /*80px;*/
  margin-top: 0;
}

.margin5 {
  margin-left: 5rem; /*80px;*/
  margin-top: 0rem;
}

.margin6 {
  margin-left: 6rem; /*80px;*/
  margin-top: 0;
}

.drek-line {
  height: 0.4rem; /*4px;*/
  width: 70%;
}

.drek-red {
  color: var(--clr-drek-red);
}

.drek-center,
.text-center {
  text-align: center;
}

.quote-small {
  font-size: small;
  font-style: italic;
}

.quote-x-small,
.quote-xsmall {
  font-size: x-small;
  font-style: italic;
}

.text-x-small,
.text-xsmall {
  font-size: x-small;
}

.text-small {
  font-size: small;
}

.text-medium {
  font-size: medium;
}

.text-large {
  font-size: large;
}

.quote {
  font-style: italic;
}

.quote-serif {
  font-family: var(--ff-accent);
  font-style: italic;
}

.title {
  color: var(--clr-drek-title);
  font-family: var(--ff-accent);
  font-size: xx-large;
  font-weight: bold;
  text-align: center;
}

.title-footer,
.title-header {
  color: var(--clr-drek-title);
  font-family: var(--ff-accent);
  font-size: large;
  font-weight: bold;
  text-align: center;
}

.corn-title {
  color: var(--clr-drek-red);
  font-family: Arial, Verdana, sans-serif;
  font-size: x-large;
  text-align: center;
}

.button-container {
  margin-top: 0.2em;
}

.clickMe {
  border: 3px #777 solid;
  border-radius: 10px;
  /* -moz-border-radius: 10px; */
  background: white;
  color: #222;
  text-decoration: none;
  width: 7em;
  font-size: x-small;
}

/* This formats how the button appears 
 * when the mouse cursor hovers over it. */
.clickMe:hover {
  border: 3px #ffffff none;
  background: var(--clr-anchor-hover);
  text-decoration: none;
  /* color: white; */
}

.clickMe:focus {
  border: 3px #ffffff none;
  background: var(--clr-anchor-hover);
  /* color: white; */
}

.thumbnails img {
  height: 80px;
  border: 4px solid #555;
  padding: 1px;
  margin: 0 10px 10px 0;
}

.thumbnails img:hover {
  border: 4px solid #00ccff;
  cursor: pointer;
}

.preview img {
  border: 4px solid #444;
  padding: 1px;
  width: 600px;
}

#myCookieConsent {
  z-index: 999;
  min-height: 20px;
  font-family: OpenSans, arial, "sans-serif";
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.6);
  overflow: hidden;
  position: fixed;
  color: #fff;
  bottom: 0px;
  right: 10px;
  display: none;
  left: 0;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
}

#myCookieConsent div {
  padding: 5px 0 0;
}

#myCookieConsent a {
  color: #ffba55;
  display: inline-block;
  padding: 0 10px;
}

#myCookieConsent a:hover {
  color: #fda016;
}
#myCookieConsent a#cookieButton {
  display: inline-block;
  color: #000000;
  font-size: 1.1em;
  background: #ffba55;
  text-decoration: none;
  cursor: pointer;
  padding: 2px 20px;
  float: right;
  border-radius: 20px;
}

#myCookieConsent a#cookieButton:hover {
  background: #fda016;
  color: #000;
}

.myphrasediv {
  font-family: Arial, Verdana, Geneva, Tahoma, sans-serif;
  font-size: small;
  font-style: italic;
}

/*
.flex-container {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  font-family: Arial, Verdana, Tahoma, sans-serif;
  text-align: left;
}

.flex-item-left {
  background-color: #f1f1f1;
  box-sizing: border-box;
  padding: 10px;
  flex: 33%;
}

.flex-item-middle {
  background-color: #f1f1f1;
  box-sizing: border-box;
  padding: 10px;
  flex: 33%;
}

.flex-item-right {
  background-color: #f1f1f1;
  box-sizing: border-box;
  padding: 10px;
  flex: 34%;
}

.flex-item-left-50 {
  background-color: #f1f1f1;
  box-sizing: border-box;
  padding: 10px;
  flex: 50%;
}

.flex-item-right-50 {
  background-color: #f1f1f1;
  box-sizing: border-box;
  padding: 10px;
  flex: 50%;
}
*/

/*
@media (max-width: 800px) {
  .flex-item-right, .flex-item-middle, .flex-item-left {
  flex: 100%;
}
}
*/

.reading-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(auto, 70ch));
  /*
  grid-template-columns: repeat(2, minmax(auto, 1fr));
  */
  /* the next stmt is interesting but display is NOW centered.*/
  /* NEW, but problems grid-template-columns: repeat(auto-fit, minmax(auto, 55ch)); */
  grid-gap: 1em;
  padding: 10px;
  justify-content: center;
}

@media only screen and (min-width: 800px) {
  .reading-container {
    grid-template-columns: minmax(auto, 70ch) minmax(auto, 70ch); /*1fr*/
  }
  .reading-box {
    width: 100%;
  }
}

@media only screen and (max-width: 799px) {
  .reading-container {
    grid-template-columns: minmax(auto, 1fr);
    gap: 0;
  }
}

.reading-box {
  text-align: left;
  background-color: var(--clr-neutral-100);
  line-height: 1.25;
  padding: 10px;
  width: 100%;
}

.reading-container1 {
  display: grid;
  grid-template-columns: minmax(auto, 70ch);
  padding: 10px;
  justify-content: center;
}

@media only screen and (max-width: 799px) {
  .reading-container1 {
    grid-template-columns: minmax(70%, 70ch);
  }
}

.p-no-top {
  margin-top: 0;
}

.columns3 {
  columns: 250px 3;
  column-rule: 1px dotted #ccc;
  column-gap: 3em;
  background-color: ivory;
  margin: 0.5em;
  padding: 0.5em;
}

/* used for videos and images - puts text below video or img */
p.clear {
  clear: both;
}

.columns-thumbs {
  /*
  columns: 300px 3;
  */
  /*column-fill: balance; */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1em;
  /*
  margin: 1em;
  padding: 1em;
  */
}

.columns-videos {
  /*
  columns: 300px 3;
  */
  /*column-fill: balance; */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1em;
  margin: 1em;
  /*
  padding: 1em;
  */
}

.section-thumbs {
  margin: 1em;
  display: inline-block;
}

/* Styles to apply when the browser is in dark mode */
@media (prefers-color-scheme: dark) {
  .columns3 {
    background-color: var(--background-color-dark);
    color: var(--primary-color-dark);
  }
}