body {
  font-family: "Courier New", monospace; /* changes the text style */
  background-color: #FADA5E;
  background-image: url("/media/marill1.png");
  background-size: 61px;
  background-repeat: repeat;
  margin: 20px; /* Puts space around the page edges */
  cursor: url("/media/pumpkincursor111.png"), auto;
}

h1 {
  text-shadow: 2px 2px 2px white;
}

h2 {
    text-shadow: 2px 2px 2px white;
}

#container {
  max-width: 1000px; /* Stops the site from getting too wide */
  margin: 0 auto;
  background-color: #FFFDD0;
  border: 2px solid #E49B0F;
  padding: 20px;
}

header {
  text-align: center;
  border-bottom: 2px double #E49B0F;
  padding: 20px;
}

#flex-wrapper {
  display: flex;
  gap: 20px;
}

nav {
  width: 200px;
  border-right: 1px dashed #F5C366;
  padding-left: 15px;
}

main {
  flex: 1;
}

footer {
  text-align: center;
  padding: 10px;
}

/* --- Character Profile Layout --- */

/* Wraps the bio and the infobox together side-by-side */
.profile-container {
  display: flex;
  flex-direction: row; /* Forces items to stay side-by-side */
  flex-wrap: nowrap; /* Prevents the infobox from dropping below */
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 30px;
  width: 100%; /* Ensures it uses the full main space */
}

/* Gives the left biography area more room, but leaves room for the right */
.profile-bio {
  flex: 1 1 60%; /* Takes up 60% of the space flexibly */
  min-width: 0; /* Prevents text from expanding and kicking the box out */
}

/* Styled wiki-style heading underlines */
.profile-heading {
  color: #E49B0F; /* Matching the purple tone from your sketch */
  border-bottom: 2px solid #E49B0F;
  padding-bottom: 5px;
  margin-top: 25px;
}

/* Right Column Infobox (Image + Table Wrapper) */
.profile-infobox {
  flex: 0 0 240px; /* Locks the infobox width so it stays a steady size on the right */
  background-color: #FFFDD0; 
  border: 1px solid #E49B0F; 
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Keeps the image nicely bounded */
.infobox-image {
  width: 100%;
  height: auto;
  background-color: #FFFFF0; /* Blue placeholder like your layout image */
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Wikipedia style fast-facts table styling */
.infobox-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
  background-color: #FFFFF0;
  color: black;
}

.infobox-table th {
  background-color: #FFFF92;
  padding: 8px;
  text-align: center;
}

.infobox-table td {
  padding: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* --- Bottom Art Cards Gallery --- */
.art-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.gallery {
                background-color: none;
                padding: 10px;
                overflow: hidden;
            }


.galleryimage {
              float: left;
              width: 150px;
              height: 150px;
              background-repeat: no-repeat;
              background-size: auto 100%;
              background-position: center;
              margin: 10px;
              border: 1px black solid;
            }


/* Mobile responsive fallback so the columns stack neatly on phones */
@media (max-width: 600px) {
  .profile-container {
    flex-direction: column-reverse;
  }
  .profile-infobox {
    max-width: 100%;
    width: 100%;
  }
}