/* 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{
  font-family: 'Courier New', Courier, monospace;
  line-height: 1.5;
  font-weight: bold;
  font-size: 2rem; 
  color: white !important;
}

@media screen and (max-width: 900px) {
  .verse-text {
    font-size: 1.2rem; /* Just change the font size for mobile */
  }

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

/* 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;
}