/* --- RESET & BASIC SETUP --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Force the body to fill the entire screen height */
html, body {
  height: 100%;
}

body {
  font-family: 'Comic Sans Custom', 'Comic Sans MS', sans-serif;
  background-color: #0f0a1c; /* Deep royal night background */
  color: #ffffff; /* Forces all text to be crisp white */
  line-height: 1.6;
  padding: 20px;
}

/* --- CSS GRID LAYOUT --- */
.grid-container {
  display: grid;
  gap: 15px; 
  grid-template-columns: 200px 1fr 200px; 
  grid-template-rows: auto 1fr auto; /* 1fr forces the middle row to expand and fill space */
  grid-template-areas: 
    "header header header"
    "nav main aside"
    "footer footer footer";
  max-width: 1200px;
  min-height: calc(100vh - 40px); /* Makes the grid stretch to full screen height */
  margin: 0 auto;
}

/* --- GRID AREA ASSIGNMENTS & VISUAL STYLING --- */
.header {
  grid-area: header;
  background-color: #2a1142; /* Royal dark purple */
  padding: 25px;
  text-align: center;
  border: 2px solid #ffd700; /* Gold border accent */
}

.sidebar-left {
  grid-area: nav;
  background-color: #1b0b2e;
  padding: 15px;
  border: 1px solid #b8860b; 
}

.main-content {
  grid-area: main;
  background-color: #23123a;
  padding: 20px;
  border: 1px solid #ffd700;
}

.sidebar-right {
  grid-area: aside;
  background-color: #1b0b2e;
  padding: 15px;
  border: 1px solid #b8860b;
}

.footer {
  grid-area: footer;
  background-color: #2a1142;
  padding: 15px;
  text-align: center;
  border: 1px solid #ffd700;
}

/* --- RESPONSIVE LAYOUT FOR MOBILE --- */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr; 
    grid-template-rows: auto;
    grid-template-areas: 
      "header"
      "nav"
      "main"
      "aside"
      "footer";
  }
}