/* --- CSS VARIABLES --- */
:root {
  /* Colors */
  --primary-accent: #8d9f75; 
  --secondary-accent: #667355; 
  --box-shadow: #30322d;
  --text-light: #ffffff;
  --text-dark: #000000;
  --page-bg-color: #232323;
  --body-bg-color: #171717;
  
  /* Helper for missing var in original snippet */
  --text-color: var(--text-light); 
  --white: #ffffff;

  /* Dimensions */
  --content-width: 650px;
  --sidebar-width: 220px;
  --border-radius: 5px;
  
  /* Media */
  --banner-image: url("header.jpg");
}

/* Basic Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  color: var(--text-color);
  font-family: sans-serif;
  background-color: var(--page-bg-color);
  line-height: 1.6;
}

/* --- TOP SECTION --- */

/* The Banner */
#banner {
  width: 100%;
  background-color: var(--secondary-accent);
  color: var(--white);
  text-align: center;
  padding: 40px 20px;
  font-size: 2rem;
  font-weight: bold;
}

/* The Nav Bar */
header {
  width: 100%;
  background-color: var(--primary-accent);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 2px solid var(--primary-accent);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

header nav ul {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 15px 0;
  gap: 30px;
}

header nav ul li a {
  text-decoration: none;
  color: var(--text-color);
  font-weight: bold;
  font-size: 1.1rem;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background 0.2s;
}

header nav ul li a:hover {
  background-color: rgba(255,255,255,0.5);
}

/* --- MAIN LAYOUT --- */

/* Container to center everything */
.body-container {
  display: flex;
  justify-content: center; 
  align-items: flex-start;
  padding-top: 20px;
  width: 100%;
  gap: 20px; 
}

/* Column Structures */
.sidebar {
  width: var(--sidebar-width);
  flex: 0 0 var(--sidebar-width); 
  height: fit-content;
}

#middle-area {
  width: var(--content-width);
  flex: 0 1 var(--content-width); 
  min-height: 80vh;
}

/* --- CONTENT CARDS --- */
.card {
  color: var(--text-light);
  margin-bottom: 20px; 
  background-color: var(--body-bg-color);
  border-radius: var(--border-radius);
  padding: 15px;
  list-style-type: none;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.card img {
  border: 3px solid #8d9f75;
  border-radius: 3px;
  padding: 2px;
  margin: 10px 10px 10px 0px;
  max-width: 100%; /* Ensure images don't overflow cards */
  height: auto;
}

.card ul {
  list-style: none;
}

/* Headings */
h1, h2, h3 {
  color: var(--text-dark);
  border-radius: 5px;
  padding: 3px;
  background-color: var(--primary-accent);
  margin: 3px 0px;
  margin-bottom: 10px;
}

/* Specific padding for sidebar cards */
.sidebar h1, 
.sidebar h2, 
.sidebar h3 {
  text-align: center;
}

.sidebar img {
  width:90%;
}

/* Specific padding for main area cards */
#middle-area h1, 
#middle-area h2, 
#middle-area h3 {
  padding: 3px 15px;
}

p {
  margin-bottom: 15px;
}

a {
  color:var(--primary-accent);
}

.scrolling {
  animation: scrolling 12s .2s linear 1;
}

footer {
  text-align: center;
  margin-top: 50px;
  margin-bottom: 10px;
  line-height: 1.0;
}

@keyframes scrolling {
  from { top: 0; transform: translate3d(0, 0, 0); }
  to { transform: translate3d(100%, 0, 0); }
}

/* --- RESPONSIVENESS --- */

@media (max-width: 900px) {
  /* Change direction to column so they stack vertically */
  .body-container {
    flex-direction: column;
    align-items: center;
  }

  /* Make Main Content appear first */
  #middle-area {
    width: 95%; /* Use percentage for mobile padding */
    max-width: 100%; 
    margin: 0;
    order: 1; /* Puts this at the top */
    flex: auto; /* Allow it to resize */
  }

  /* Make Sidebars appear last */
  .sidebar {
    display: block; /* Ensure it is visible */
    width: 95%;
    flex: auto;
    margin-top: 20px;
    order: 2; /* Puts this at the bottom */
  }

  .card img {
    width: 40%;
  }
}