@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap');
:root {
  --background: #f9f6f0;
  --alphabg: rgba(250,245,235,0.5);
  --text: #2c1a11;
  --shadow-color: #D4C5B9;
  background-color: var(--background);
  * {
    box-sizing: border-box;
  }
  p, ol, ul {
    font-size: 1.25em;
    margin: 8px;
  }
  
}

.ml-form-embedContainer {
  width: calc(min(100vw,8.5in));
}

.ml-form-embedContainer, .ml-button-horizontal {
  * {
    color: var(--text) !important;
    background-color: var(--background) !important;
  }
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--text);
  max-width: 100vw !important;
  min-height: 100vh !important;
  box-sizing: border-box;
  font-size: 16px;
  background-color: var(--background);
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  position: relative;
  justify-content: center;
  overscroll-behavior: contain;
}

#header {
  display: flex;
  flex-direction: column;
  width: 100vw;
  outline: 1px solid var(--text);
  padding-left: calc(max(1vw,16px));
  padding-right: calc(max(1vw,16px));
  align-items: left;
  justify-content: left;
  gap: 0px;
  text-shadow: 
    0 0 5px rgba(var(--shadow-color), 0.9), /* Tight, dark core */
    0 0 15px rgba(var(--shadow-color), 0.8), /* Mid-level glow */
    0 0 30px rgba(var(--shadow-color), 0.7); /* Wide, soft protection */
  h1, p{
    margin: 0px;
  }
  box-sizing: border-box;
}

#navbar {
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 100vw !important;
  display: flex;
  flex-direction: column;
  outline: 1px solid var(--text);
  box-sizing: border-box;

}

#content {
  display: flex;
  flex-direction: column;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 16px;
  box-sizing: border-box;
  height: max-content;
  flex-grow: 1;

}

.box {
  outline: 1px solid var(--text);
  box-shadow: 2px 2px 4px 0px var(--text);
}

/* Base styles for the entire site */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #2C1A11;            /* Deep Walnut Brown text */
  background-color: #F9F6F0; /* Warm Alabaster background */
}

/* Headings (H1, H2, H3, etc.) get the classic serif font */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Merriweather', Georgia, Cambria, "Times New Roman", Times, serif;
  font-weight: 700;
  color: #1E3F20;            /* Deep Sage Green for an earthy accent header */
  line-height: 1.3;
}

/* Optional: styling blockquotes for quotes from St. Francis */
blockquote {
  font-family: 'Merriweather', serif;
  font-style: italic;
  border-left: 4px solid #D4C5B9; /* Muted Clay divider line */
  padding-left: 1rem;
  color: #5A4A42; /* A slightly softer brown for subtext */
}