/* ============================================
   FONTS
   These pull in two free pixel/retro fonts from
   Google Fonts. "Press Start 2P" is very blocky,
   so it's only used for the big site title.
   "VT323" is a friendlier pixel font, used for
   headings and nav so things stay readable.
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

/* ============================================
   COLOR PALETTE
   Defining colors once here means you can
   change the whole site's look by editing
   just this section.
   ============================================ */
:root {
  --cream: #fdf6ec;
  --rose: #e8b4bc;
  --deep-rose: #c98a97;
  --plum: #4a2e40;
  --sage: #8ba888;
  --mustard: #e3a857;
}

/* ============================================
   BASE PAGE STYLES
   "*" means "every element" - this resets
   default spacing browsers add automatically.
   ============================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 20px;
  color: var(--plum);
  background-color: var(--cream);
  /* a faint tiled pattern instead of a background image */
  background-image:
    linear-gradient(var(--rose) 1px, transparent 1px),
    linear-gradient(90deg, var(--rose) 1px, transparent 1px); 
  background-size: 24px 24px
}

a {
  color: var(--deep-rose);
  text-decoration: none;
}
a:hover {
  text-decoration: underline dotted;
}

/* ============================================
   PAGE LAYOUT
   "display: flex" puts the sidebar and content
   side by side. "flex-wrap: wrap" lets them
   stack on top of each other on narrow/mobile
   screens instead of squishing.
   ============================================ */
.page {
  display: flex;
  flex-wrap: wrap;
  max-width: 900px;
  margin: 24px auto;
  gap: 20px;
  padding: 0 16px;
}

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar {
  flex: 1 1 220px;
  max-width: 240px;
}

.sidebar-banner {
  background-color: var(--rose);
  border: 2px solid var(--plum);
  padding: 14px;
  text-align: center;
  margin-bottom: 14px;
}

.sidebar-banner h1 {
  font-family: 'Press Start 2P', monospace;
  font-size: 16px;
  line-height: 1.6;
}

.sidebar-banner .tagline {
  font-size: 14px;
  margin-top: 6px;
}

.site-nav,
.status-box {
  background-color: #fff8ef;
  border: 2px solid var(--plum);
  padding: 12px;
  margin-bottom: 14px;
}

/* a small label like a little sign above each sidebar box */
.box-label {
  font-size: 15px;
  text-transform: lowercase;
  color: var(--deep-rose);
  border-bottom: 1px dashed var(--deep-rose);
  margin-bottom: 8px;
  padding-bottom: 4px;
}

.site-nav ul {
  list-style: none;
}
.site-nav li {
  margin-bottom: 6px;
  padding-left: 14px;
}
/* a little square bullet before each nav link, retro-homepage style */
.site-nav li::before {
  content: "▸";
  color: var(--sage);
  margin-right: 6px;
}

.status-list {
  list-style: none;
  font-size: 16px;
}
.status-list li {
  margin-bottom: 4px;
}
.status-list .label {
  color: var(--sage);
  margin-right: 4px;
}
.status-list .label::after {
  content: ":";
}

/* ============================================
   MAIN CONTENT
   ============================================ */
.content {
  flex: 2 1 400px;
}

.content-box {
  background-color: #fff8ef;
  border: 2px solid var(--plum);
  padding: 16px 18px;
}

.content-box h2 {
  font-family: 'VT323', monospace;
  font-size: 26px;
  color: var(--deep-rose);
  margin-bottom: 8px;
}

.content-box p {
  line-height: 1.5;
}

.update-log {
  list-style: none;
}
.update-log li {
  margin-bottom: 6px;
  line-height: 1.5;
}
.update-log .date {
  color: var(--sage);
  font-weight: bold;
}

/* a little decorative row of symbols between sections */
.divider {
  text-align: center;
  color: var(--mustard);
  font-size: 18px;
  margin: 4px 0;
}

/* ============================================
MEDIA ROW FOR ZERO THE PUP
============================================ */
.media-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap; /* stacks them on narrow screens instead of squishing */
}

.media-row iframe {
  flex: 0 0 auto;   /* iframe keeps its own width/height, doesn't stretch */
  border: 2px solid var(--plum);
}

.media-row p {
  flex: 1 1 180px;  /* paragraph fills the remaining space, wraps text */
  margin: 0;
}

/* ============================================
   RESPONSIVE: on narrow screens, stack the
   sidebar above the content instead of beside it
   ============================================ */
@media (max-width: 600px) {
  .sidebar {
    max-width: 100%;
  }
}