/* GENERAL RESET AND BASE LAYOUT */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  /* font-size: clamp(0.875rem, 1.5vw, 1rem); */ /* base font scales between 14px and 16px */
  font-size: clamp(1rem, 1.75vw, 1.125rem); /* bigger min, mid, and max sizes */
  color: #c7d3e3; /* or any hex, rgb, or named color */
  font-weight: bold;
  background-color: rgb(189, 185, 231);
  text-align: center;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  transition: background-image 1s ease-in-out;
}


body > * {
  position: relative;
  z-index: 1;
}

/* This tells the content to grow, pushing the footer down */
body {
  flex: 1 0 auto;
}

/* HEADER STYLING */
h1 {
  font-size: clamp(2rem, 5vw, 3rem); /* scales between 32px and 48px */
  text-align: center;
  margin: 10px auto 5px auto;
  color: #9999ff;
   text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
  background-color: rgba(0,0,0,0.2);
}

h2 {
  font-size: clamp(1.75rem, 4vw, 3rem); /* scales between 32px and 48px */
  text-align: center;
  margin: 10px auto 5px auto;
  color: #9999ff;
   text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
  background-color: rgba(0,0,0,0.2);
}

h3 {
  font-size: clamp(1.25rem, 3vw, 2rem); /* scales between 20px and 32px */
  text-align: center;
  margin: 10px auto 5px auto;
  color: #d9d9e2;
   text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
  background-color: rgba(0,0,0,0.2);
}

p {
  /* font-size: clamp(1rem, 2vw, 1.25rem); scales between 16px and 20px 1rem, 1.2vw, 1.25rem*/
  font-size: clamp(1rem, 1.0vw, 1.0rem);
  color: #af4d83;    /*  rgb(44, 19, 73); */
}

ul {
  list-style-type: disc; /* or circle, square, none */
  padding-left: 2em;     /* adds indentation */
  margin: 1em 0;
  text-align: left;      /* overrides body’s center alignment */
  color: #b13359;         /* optional: override body color */
}

li {
  margin-bottom: 0.5em;
  font-size: clamp(1rem, 2vw, 1.25rem); /* scales between 16px and 20px */
  font-weight: bold;
  color: hwb(331 20% 26%); /* apply color directly to list items */
}

/* NAVIGATION COLORS */
.navbar-header,
#menu {
  background-color: brown;
}

/* PAGE CONTENT */
#mainContent,
#centerFrame {
  width: 100%;
  padding: 25px;
  text-align: left;
  box-sizing: border-box;
}

/* TABLE SPACING */
th, td {
  padding: 10px;
}

/* INTRO PARAGRAPH */
.intro {
  padding: 25px;
  font-size: clamp(1.125rem, 2.5vw, 1.5rem); /* scales between 18px and 24px */
  text-align: left;
}

/* CLEANER & WRAPPER */
#cleaner {
  clear: both;
  height: 1px;
  width: 100%;
}

.wrapper {
  border: solid;
}

/* FOOTER FIXED AT BOTTOM ONLY IF CONTENT IS SHORT */
footer, #footer {
  width: 100%;
  background-color: #f8f8ff;
  padding: 10px;
  text-align: center;
  border-top: 1px solid #aaaaff;
  margin-top: auto;
  position: relative;
}
.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 640px; /* Optional: limits size on desktop */
  margin: 0 auto;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.text-overlay {
  font-family: 'Anton', sans-serif;
  color: oklab(86.688% -0.00429 0.01418);
  font-size: clamp(1.2rem, 1.4vw, 1.6rem);
  line-height: 1.7;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
  background-color: rgba(0,0,0,0.2);
  padding: 10px;
  border-radius: 5px;
}
.responsive-img {
  width: 100%;
  height: auto;
  display: block;
}