/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* Body and main container */
    body {
      font-family: 'Courier New', monospace;
      background-color: #f6f1ff;
      color: #222;
      margin: 0;
      padding: 0;
    }
    
    h1, h2, h3 {
  font-family: "Comic Sans MS", "Brush Script MT", cursive;
  color: #6c55b5;
}

    /* Classic wide margins for entire site */
    .page-container {
      max-width: 1000px;
      margin: 40px auto;
      padding: 0 30px;
    }

    /* Top rectangular header */
    .top-header {
      height: 180px;
      background: url('img/header.jpg') center/cover no-repeat;
      border: 1px solid #ccc;
      border-radius: 6px;
      margin-bottom: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .top-header h1 {
      font-family: 'Comic Sans MS', cursive;
      font-size: 2.5em;
      background-color: rgba(255,255,255,0.7);
      padding: 10px 20px;
      border: 1px solid #ccc;
      border-radius: 6px;
      margin: 0;
    }

    /* Sidebar + main content layout */
    .content-wrapper {
      display: flex;
      align-items: flex-start;
    }
    
    

    /* Sidebar navigation */
    .sidebar {
      width: 180px;
      background-color: #f3eaff;
      border: 1px solid #ccc;
      border-radius: 6px;
      padding-top: 20px;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      height: 100%; /* full viewport height */
      position: sticky;
      top: 0;
    }

    .sidebar a {
      display: block;
      text-decoration: none;
      color: #222;
      padding: 12px 15px;
      margin: 5px 10px;
      border-radius: 4px;
      border: 1px solid #ccc;
      transition: background-color 0.2s;
      background-color: #f5f5f5;
    }

    .sidebar a:hover {
      background-color: #e0e0e0;
    }

    /* Main content area */
    .main-content {
      margin-left: 30px;
      flex: 1;
    }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns */
  gap: 12px;
}

.gallery-item img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  border: 2px solid #d4c2ff;
  background: #faf7ff;
  transition: transform 0.2s, box-shadow 0.2s;
}

.gallery-item img:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
/* Wrapper for arrows and nav */
/* Wrapper with arrows */
/* Container hides overflow */
.horizontal-nav-container {
  overflow-x: auto;      /* allows horizontal scroll */
  overflow-y: hidden;    /* hide vertical scroll */
  white-space: nowrap;
  padding: 5px 0;
  -webkit-overflow-scrolling: touch;  /* smooth scroll on mobile */
  width: 670px;
   margin-bottom: 15px;   /* adds space below the nav */
}

/* Hide scrollbar visually but still scrollable */
.horizontal-nav-container::-webkit-scrollbar {
  display: none;
}

/* Nav links */
.horizontal-nav a {
  display: inline-block;
  padding: 6px 12px;
  margin-right: 10px;
  background-color: #e8dcff;
  color: #6c55b5;
  text-decoration: none;
  border-radius: 6px;
  font-family: "Brush Script MT", cursive;
  white-space: nowrap;
  font-size: 27px;
  transition: transform 0.2s, background-color 0.2s;
}

.horizontal-nav a:hover {
  background-color: #cdb9ff;
  transform: scale(1.05);
}

.horizontal-nav a.active {
  background-color: #b29cff; /* slightly darker purple */
  color: #fff;
  font-weight: bold;
}

.horizontal-nav-container::-webkit-scrollbar {
  height: 8px;            /* horizontal scrollbar height */
}

.horizontal-nav-container::-webkit-scrollbar-track {
  background: #faf7ff;    /* track background */
  border-radius: 4px;
}

.horizontal-nav-container::-webkit-scrollbar-thumb {
  background-color: #cdb9ff; /* thumb color */
  border-radius: 4px;
}
    /* Sections with top border heading */
    .section {
      border-top: 2px solid #333;
      padding: 25px 20px 20px 20px;
      margin-bottom: 30px;
      position: relative;
      border-radius: 4px;
      background-color: #faf7ff;
    }

/* Heading on top border */
.section-heading {
  position: absolute;
  top: -18px;                       /* negative to sit on the top border */
  left: 15px;                        /* align with content inside */
  background-color: #faf7ff;         /* same as section background */
  padding: 0 8px;                    /* little horizontal padding to “cover” border */
  font-family: "Brush Script MT", cursive;
  font-size: 30px;
  color: #6c55b5;
}

/* Scrollable content below heading */
.section-content {
  max-height: 400px;      /* adjust height as needed */
  overflow-y: auto;
}

    .section h2 {
      position: absolute;
      top: -14px;
      left: 20px;
      background-color: #fafafa;
      padding: 0 10px;
      font-size: 1.5em;
      margin: 0;
    }
    
    .section ul li {
      text-align: justify;
    }

.section-content::-webkit-scrollbar {
  width: 8px;
}

.section-content::-webkit-scrollbar-thumb {
  background-color: #c8b5ff;
  border-radius: 4px;
}

.section-content::-webkit-scrollbar-track {
  background: #f6f1ff;
}

    /* Character grid inside section */
    .character-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 20px;
      margin-top: 20px;
    }
    
    .character-card {
      text-decoration: none;
      color: inherit;
      display: block;
    }

    .character-box {
      border: 1px solid #ccc;
      border-radius: 6px;
      padding: 10px;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      height: 200px;
      box-sizing: border-box;
    }

    .character-box.empty {
      background-color: #f5f5f5;
      border: 1px dashed #ccc;
    }

    .character-box img {
      width: 100px;
      height: 100px;
      object-fit: cover;
      border-radius: 4px;
      margin-bottom: 10px;
    }

    .char-info {
      text-align: center;
    }

    .char-name {
      font-weight: bold;
      font-size: 1em;
      margin-bottom: 4px;
    }

    .char-age {
      font-size: 0.9em;
      color: #555;
    }
    
    .profile-card {
  width: 260px;
  padding: 15px;
}

.profile-card h2 {
  text-align: center;
  margin-bottom: 10px;
}

.profile-photo {
  width: 100%;
  border: 2px solid #ccc;
}

.profile-carousel {
  position: relative;
  width: 100%;
}

.carousel-image {
  width: 100%;
  border: 2px solid #ccc;
  display: none;
}

.carousel-image.active {
  display: block;
}

.carousel-controls {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}

.carousel-controls button {
  font-family: monospace;
  cursor: pointer;
}

.basic-info {
  margin-top: 10px;
  font-family: monospace;
  font-size: 14px;
}

.recent-event-card {
  margin-top: 15px;
  padding: 10px;
  border: 2px solid #cdb9ff;
  background-color: #faf7ff;
  font-family: monospace;
}

.recent-event-card h3 {
  margin-top: 0;
  font-family: "Brush Script MT", cursive;
  color: #6c55b5;
}

.stats-modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}

.stats-box {
  background-color: #faf7ff;
  border: 2px solid #cdb9ff;
  width: 70%;
  max-width: 800px;
  margin: 80px auto;
  padding: 20px;
  position: relative;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
  font-size: 20px;
}

.stats-content {
  display: flex;
  gap: 20px;
}

.stats-photo img {
  width: 250px;
  object-fit: cover;
}

.stats-info {
  max-height: 400px;
  overflow-y: auto;
  font-family: monospace;
}

.time-machine-box{
  max-width:700px;      /* keeps it inside page margins */
  width:100%;

  margin:20px auto;     /* centers it */

  border:2px solid #cdb9ff;
  background:#faf7ff;

  border-radius:6px;

  display:flex;
  flex-direction:column;
}

/* top title */
.tm-header{
  padding:10px 15px;
  border-bottom:2px solid #cdb9ff;
  font-weight:bold;
  font-size:18px;
}

/* event area */
#timeline-events {
  padding: 15px;
  max-height: 300px;
  overflow-y: auto;
  transition: opacity 0.4s ease;
  opacity: 1;
}

/* events */
.timeline-event{
  margin-bottom:8px;
}

/* controls bar */
.tm-controls{
  border-top:2px solid #cdb9ff;

  display:flex;
  justify-content:center;
  align-items:center;

  gap:12px;

  padding:10px;
}

/* buttons */
.tm-controls button{
  background:#e8dcff;
  border:2px solid #cdb9ff;
  padding:4px 10px;
  cursor:pointer;
}

/* year */
#currentYear{
  font-weight:bold;
  font-size:18px;
}

/* era label */
#currentEra{
  margin-left:15px;
  font-style:italic;
  color:#6c55b5;
}

    /* Responsive adjustments */
    @media (max-width: 768px) {
      .content-wrapper {
        flex-direction: column;
      }

      .sidebar {
        width: 100%;
        height: auto;
        position: relative;
      }

      .main-content {
        margin-left: 0;
      }

      .character-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 480px) {
      .character-grid {
        grid-template-columns: 1fr;
      }
    }