/* Clean, Centered Strategic Portfolio CSS */

body {
    border-top: 5px solid #ce0404;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  background-color: white;
  line-height: 125%;
  padding: 0;
  margin: 0;
  display: flex;          
  flex-direction: column; 
  align-items: center;    
  width: 100%;
}

h1, h2, h3, h4 {
  font-family: "Georgia", serif;
  text-align: center;
  width: 100%;
}

h1 {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  background: black;
  color: white;
  padding: 2% 0;
  margin: 0;
  width: 100vw;
  
}

h2 {
  color: navy;
  font-size: 3rem; /* Adjusted for better mobile scaling */
  font-weight: oblique;
  margin: 20px 0;
}

#tagline {
  width: 100vw;           /* Changed from 100% to 100vw to hit both edges */
  box-sizing: border-box; /* Ensures the bar doesn't "leak" off the right side */
  text-align: center;
  font-style: italic;
  font-family: Georgia, serif;
  background: #bed8f3;
  border-top: 20px solid black;
  border-bottom: 6px solid #0aa12f;
  padding: 1em 0;
}

#bodycontent {
  text-align: center;
  margin: 0 auto;
  width: 90%;
  max-width: 1000px;
  padding-bottom: 100px; /* Space for fixed footer */
}

/* Fix for the Buy It Now button area */
.buttonarea {
  text-align: center;
  padding: 20px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  margin-top: 20px;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: black;
  color: white;
  text-align: center;
  padding: 10px 0;
  border-top: 2px solid blue;
}