/* Style for the widget container */
#verse-widget-header, #verse-widget-sidebar {
  display: flex;
  flex-direction: column;
  border: 0px solid blue;
  width: 100%; /* Adjust to fit your layout */
  height: auto;
  min-height: 18.75em;
  max-width: 75em; /* Optional: Limit max size */
  color: white;
  margin: 1.25em auto; /* Center it on the page */
  text-align: center;
}

h2{
  text-align: left;
}

/* Background container */
.verse-background {
  flex-grow: 1;
  border: 0px solid purple;
  position: relative;
  background-size: cover; /* Ensures the image covers the entire area */
  background-position: center; /* Centers the image */
  background-repeat: no-repeat;
  padding: 1.25em; /* Space inside the container */
  border-radius: 0.5em; /* Optional: Rounded corners */
  box-shadow: 0 0.25em 0.375em rgba(0, 0, 0, 0.3); /* Optional: Add a shadow */
  color: white; /* Text color for better contrast */
}

/* Verse text */
.verse-text {
  font-size: 2rem; /* Adjust size as needed */
  font-weight: bold;
  line-height: 1.5;
  text-shadow: 0.125em 0.125em 0.25em rgba(0, 0, 0, 0.7); /* Add contrast for readability */
  margin: 0;
  color: white !important;
}

/* Verse reference styling */
.verse-reference {
  display: block;
  margin-top: 0.625em;
  font-size: 2rem;
  font-style: italic;
}

.sidebar > .verse-background > .verse-text {
  font-family: Georgia, serif;
  font-size: 1.4em;
  color: white;
}

@media screen and (max-width: 900px) {
  /* Verse text */
  .verse-text {
    font-size: 1.2rem; /* Adjust size as needed */
    font-weight: bold;
    line-height: 1.5;
    text-shadow: 0.125em 0.125em 0.25em rgba(0, 0, 0, 0.7); /* Add contrast for readability */
    margin: 0;
    color: white;
  }

  .sidebar > .verse-background > .verse-text {
    font-size: 1.2em;
    color: white;
  }

  /* Verse reference styling */
  .verse-reference {
    display: block;
    margin-top: 0.625em;
    font-size: 2rem;
    font-style: italic;
  }
}

/* a tinted window with white font for a light on dark contrast */
.container {
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  border-radius: 0.75em;
  box-shadow: 0 0.25em 0.625em rgba(0, 0, 0, 0.3);
  color: #000000;
  width: 100%;
  margin: 3em auto;
  max-width: 31.25em;
  padding: 1.25em;
  text-align: center;
}

.container a{
  color: white;
}

.container a:visited {
  color: white;
}

.container a:hover {
  color: rgba(255, 255, 255, .5) ;
}

.sidebar-verse-text{
  font-size: 1.2rem;
}