body {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('../img/coramdeo_background_alt_blur.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    font-family: Arial, sans-serif;
    color: #e6dcc6; /* Muted cream color, less bright than before */
    margin: 0;
    padding: 20px;
    font-family: 'maiola', serif;
}

.container {
    max-width: 450px;
    margin: 0 auto;
    padding: 30px;
}

h1 {
    color: #fffacc; /* Slightly more intense yellow-white for headings */
    text-align: center;
    font-family: 'moret', serif;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Adding text shadow for better readability */
}

h2 {
    color: #fffacc; /* Same color as h1 */
    text-align: center;
    font-family: 'moret', serif;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

img.logo {
    display: block;
    margin: 0 auto 20px;
    max-width: 50%;
    height: auto;
    filter: drop-shadow(1px 2px 6px rgba(45, 0, 37, 1));
}

p {
    font-size: 19px;
    line-height: 1.6;
    margin-bottom: 1em;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}

blockquote {
  font-family: 'maiola', serif;
  font-style: italic;
  margin: 1.5em 0;
  padding: 0.5em 20px;
  position: relative;
  font-size: 1.1em;
}

blockquote .citation {
  display: block;
  margin-top: 1em;
  text-align: right;
  font-style: normal;
  font-size: 1.1em;
  color: #fffacc; /* Same color as headings for contrast */
}

/* Media Queries for Responsive Design */
/* Tablet and Mobile Layout */
@media screen and (max-width: 768px) {
  /* Reset the desktop layout for smaller screens */
  body {
    display: block;
    padding: 20px;
  }
  
  .logo-container {
    position: static;
    width: 100%;
    padding: 0;
  }
  
  img.logo {
    max-width: 70%; /* Larger logo on smaller screens */
    margin: 0 auto 20px;
    display: block;
  }
  
  .content-container {
    width: 100%;
    padding: 0;
  }
  
  .container {
    max-width: 450px;
    margin: 0 auto;
    padding: 30px;
  }
}

@media screen and (max-width: 480px) {
  img.logo {
    max-width: 90%; /* Even larger logo on very small screens */
  }
  
  .container {
    padding: 20px; /* Slightly reduced padding on small screens */
  }
  
  p {
    font-size: 18px; /* Slightly smaller text on phones for better fit */
  }
}

/* Desktop layout - Logo on left side, fixed, centered together */
@media screen and (min-width: 769px) {
  body {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0;
    justify-content: center;
  }
  
  .logo-container {
    position: sticky;
    top: 0;
    width: 250px; /* Fixed width instead of percentage */
    padding: 100px 20px 40px 20px; /* Increased top padding to push logo down */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  img.logo {
    max-width: 100%;
    margin: 0;
    /* filter: drop-shadow(0px 0px 30px rgba(45, 0, 37, 1)) drop-shadow(0px 0px 20px rgba(45, 0, 37, 0.8)); */
  }
  
  .content-container {
    width: 450px; /* Fixed width instead of percentage */
    padding: 40px;
    box-sizing: border-box;
  }
  
  .container {
    max-width: 100%;
    margin: 0;
    padding: 0;
  }
}