/* =========
   Global Reset & Base
   ========= */
* {
  box-sizing: border-box;
  font-family: "Times New Roman", Times, serif;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: url('Website Assets/Bg.gif') repeat;
  background-position: top left;
  background-size: auto;
}

.wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  border: 12px solid transparent;
  border-image: url('Website Assets/Pageborder.gif') 8 round;
  background: rgba(255,255,255,0.9); /* keeps wrapper slightly opaque so content is readable */
}

/* =========
   Header
   ========= */
.header {
  text-align: center;
  padding: 0px;
}

.header img {
  display: inline-block;
  vertical-align: middle;
}

.logo {
  max-width: 1000px;
  margin-bottom: 10px;
}

/* =========
   Navbar
   ========= */
.navbar {
  background: #fff;
  text-align: center;
  padding: 10px 0;
}

.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar li {
  display: inline-block;
  margin: 0 10px;
}

.navbar a {
  color: #00f;
  text-decoration: underline;
}

/* =========
   Content Layout
   ========= */
.content-area {
  display: flex;
  gap: 10px;
  padding: 12px 0;
  flex-wrap: nowrap;         /* prevent sidebar from dropping below main content */
  align-items: flex-start;
}

/* Move sidebar visually to the left without editing HTML */
.sidebar {
  order: -1;                 /* place sidebar before main content in the flex row */
  flex: 0 0 220px;           /* keep fixed width */
  width: 220px;
  text-align: center;
  padding-left: 0px;
  box-sizing: border-box;
  margin-right: 10px;        /* spacing between sidebar and main */
}

/* Use a left divider when sidebar is on the left */
.main-content {
  flex: 1 1 auto;
  min-width: 0;             /* prevents overflow in flex children */
  text-align: center;
  border-left: 1px solid #ddd; /* changed from border-right */
  padding-left: 15px;          /* changed from padding-right */
}

.main-content article {
  position: relative;
  margin: 20px auto;
  padding: 20px;
  background: url('Website Assets/box.gif') center/100% 100% no-repeat;
  background-clip: padding-box;
  border: 10px solid transparent; /* keeps the padding away from the border edge */
  box-sizing: border-box;
  text-align: center;
}

/* force consistent sizing for sidebar images / links */
.sidebar img {
  display: block;
  width: 160px;             /* set desired icon width */
  max-width: 100%;
  height: auto;
  margin: 8px auto;
}

/* =========
   Footer
   ========= */
.footer {
  text-align: center;
  padding: 10px;
  background: #FFFFFF;
  font-size: 0.85em;
}

/* =========
   Custom Divider
   ========= */
.retro-divider {
  border: none;
  height: 18px; /* match your image height */
  background: url('Website Assets/Line.gif') center/contain no-repeat;
  margin: 8px auto;
  width: 90%;
  display: block;
}

/* =========
   Animated Border (Reusable)
   ========= */
.retro-border {
  border: 8px solid transparent; /* space for GIF edge */
  border-image: url('Website Assets/Line.gif') 30 round; 
}

/* =========
   Responsive
   ========= */
@media (max-width: 600px) {
  .content-area {
    flex-direction: column;
    flex-wrap: wrap;
  }

  .main-content {
    border-right: none;
    padding-right: 0;
  }

  .sidebar {
    width: 100%;
    flex: 0 0 auto;
  }

  .sidebar img {
    width: 140px;
  }

  .wrapper {
    max-width: 100%;
  }
}

/* hide tab sections by default and show home as default */
.tab-content {
  display: none;
}

/* show the default tab when page loads */
#home-content {
  display: block;
}


/* About page hero gif sizing */
#about-content .about-hero {
  display: block;
  width: 280px;      /* set a sensible default width */
  max-width: 100%;
  height: auto;
  margin: 0 auto 12px;
}

/* Style for the vertically stacked images in the Others tab */
.others-images {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center align images and captions */
  gap: 20px; /* Add spacing between images */
  margin-top: 20px;
}

.others-images figure {
  text-align: center; /* Center align the captions */
  max-width: 100%; /* Ensure the images fit within the content box */
}

.others-images img {
  max-width: 100%; /* Make images responsive */
  height: auto; /* Maintain aspect ratio */
  border: 2px solid #ddd; /* Optional: Add a border around the images */
  border-radius: 8px; /* Optional: Add rounded corners */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional: Add a subtle shadow */
}

.others-images figcaption {
  margin-top: 8px;
  font-size: 0.9rem;
  color: #555; /* Optional: Caption text color */
}