/* ==========================================
   1. GLOBAL PAGE STYLES & CENTERING
   ========================================== */
html, body {
  background-color: #000000 !important; /* Forces the outer page background to black */
  color: #ffffff;
  margin: 0;
  padding: 0;
  font-family: Verdana, Geneva, sans-serif; /* Clean, classic retro font choice */
  display: flex;
  flex-direction: column;
  align-items: center;                  /* Centers the entire layout frame horizontally */
  min-height: 100vh;
}

/* ==========================================
   2. MAIN TABLE LAYOUT CONTAINER
   ========================================== */
.main-layout {
  width: 95%;               
  max-width: 1000px;        /* Expanded width to give your artwork room to shine */
  margin: 40px auto;        /* Adds vertical breathing room and helps center the table */
  border-collapse: separate;/* Required for rounded corners to work on tables */
  border-spacing: 0;
  border: 2px solid #ffffff;/* Clean white border to frame the site against the black background */
  border-radius: 12px;      /* Rounded edges for the main frame */
  overflow: hidden;         /* Forces the banner image to respect the rounded corners */
  background-color: #000000;/* Dark gray background for the inside of the table */
}

/* ==========================================
   3. BANNER ROW STYLES
   ========================================== */
.banner-cell {
  padding: 0;
  margin: 0;
  line-height: 0;           /* Prevents gaps or weird spacing beneath the image */
}

.banner-img {
  width: 100%;
  height: auto;             /* Maintains the image's proper proportions */
  display: block;
}

/* ==========================================
   4. NAVIGATION BUTTONS STYLES
   ========================================== */
.nav-cell {
  background-color: #080808;  /* Slightly darker navigation strip for visual depth */
  padding: 12px;
  text-align: center;
  border-bottom: 1px solid #ffffff;
}

.nav-btn {
  display: inline-block;
  color: #ffffff;
  text-decoration: none;      /* Removes the standard underline */
  padding: 6px 16px;
  margin: 0 8px;
  border: 1px solid #ffffff;
  border-radius: 4px;         
  font-size: 14px;
  transition: all 0.2s ease;  /* Smooth color inversion on hover */
}

/* Inverts colors to white background / black text when hovered */
.nav-btn:hover {
  background-color: #ffffff;
  color: #000000;             
  cursor: pointer;
}

/* ==========================================
   5. IFRAME CONTENT WINDOW ("THE FRAME")
   ========================================== */
.frame-container-cell {
  padding: 0;                 /* No padding so the frame reaches the bottom edges cleanly */
}

.content-window {
  width: 100%;
  height: 600px;            /* Tall viewscreen window so content feels spacious */
  border: none;               /* Hides default browser frame borders */
  display: block;
  background-color: #080808;  /* Matches the dark inner table layout */
}