/* 1. Global Settings */
body {
  margin: 0;
  font-family: "MS Gothic", sans-serif;
  background-color: black; /* Keeps it black */
  overflow-y: hidden;      /* Side-scroller mode */
  color: #FF4500;
}

.page-wrapper {
  display: flex;
  align-items: center; 
  height: 100vh;       
  padding-left: 50px;  
}

.logo {
  flex-shrink: 0;      
  width: 250px;        
  height: auto;
  margin-right: 40px;  
}

/* 2. The Main Orange Scroll Container */
.scroll-container {
  display: inline-flex; 
  flex-direction: row;  
  flex-wrap: nowrap;    
  align-items: center; 
  border: 2px solid #FF4500; 
  height: 70vh;         
  padding: 0;           /* 0 padding allows internal boxes to touch the border */
  margin-left: 20px;
}

/* 3. Individual Post Boxes (The Frame) */
.content-item {
  display: flex;
  flex-direction: row;
  align-items: center;         /* Crucial: Prevents boxes from shrinking */
  height: 100%;           
  padding: 30px;
  border-right: 2px solid #FF4500; /* Vertical line between different posts */
  box-sizing: border-box;
}

/* 4. The Text (Left-Aligned + Internal Divider) */
/* 4. The Text - Fixed for "Auto Adjustable" width */
.content-item p {
  height: 100%;       /* Fill the box height */
  overflow-y: auto;   /* Adds a scrollbar ONLY if the text is too long */
  padding-right: 15px; /* Space for the scrollbar so it doesn't touch the text */
  
  /* Keep your existing styles below */
  width: auto;
  min-width: 250px;
  max-width: 500px;
  white-space: normal;
  text-align: left;
  line-height: 1.4;
}



/* Hover glow for text */
.content-item p:hover {
  color: #ffaa00;
  text-shadow: 0 0 10px #FF4500, 0 0 20px #FF4500;
}

/* 5. The Images (Inside the Frame) */
.scroll-container img {
  height: 85%;            
  width: auto;
  margin-left: 30px;      /* Space after the internal divider */
  flex-shrink: 0;         
  object-fit: contain;
  display: block;
}

/* 6. Navigation at the end */
.nav-section {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 50px;
}

.vertical-nav {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.nav-link {
  color: #FF4500;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.5rem;
  transition: 0.3s;
}

.nav-link:hover {
  color: #ffaa00;
  text-shadow: 0 0 10px #FF4500;
  transform: translateX(10px);
}
/* Style the scrollbar for the text area */
.content-item p::-webkit-scrollbar {
  width: 6px;               /* Thickness of the scrollbar */
}

.content-item p::-webkit-scrollbar-track {
  background: black;        /* Background of the scrollbar track */
}

.content-item p::-webkit-scrollbar-thumb {
  background: #FF4500;      /* The actual "dragger" bar */
  border-radius: 10px;      /* Rounds the edges */
  box-shadow: 0 0 5px #FF4500; /* Optional: gives the bar a slight glow */
}

.content-item p::-webkit-scrollbar-thumb:hover {
  background: #ffaa00;      /* Brightens when you hover over it */
}