/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* Background: either a tiled gif OR a gradient fallback */

    /* Reset-ish */
/* === Page chrome & retro background === */
:root {
  --card-bg: rgba(0,0,0,0.6);
  --card-brd: rgba(255,255,255,0.2);
  --text: #fff;
  --link: #ffd2f8;
  --accent: #ff8de3;
  --shadow: 0 8px 24px rgba(0,0,0,0.35);
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: "Comic Sans MS", "Arial Rounded MT Bold", Tahoma, Arial, sans-serif;
  cursor: url("assets/heart-select.cur"), auto;
  position: relative;
}

/* Head & foot are centered like the grid area */
.site-header, .site-footer {
  max-width: 1120px;
  text-align: center;
}

.site-header {
  max-width: 1120px;
  margin: 20px auto;
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center; /* keeps the image/marquee centered */
  gap: 40px;           /* <- your spacing */
}

/* === GRID LAYOUT === */
.page-grid {
  /* 3 columns: left sidebar — main — right sidebar */
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 220px;
  gap: 18px;
  align-items: flex-start;
  max-width: 1120px;   /* overall page width */
  margin: 0 auto;      /* center the grid in the viewport */
  padding: 0 14px 28px;
}

/* Sidebars */
.sidebar {
  display: grid;
  gap: 18px;
}
.sidebar.left { grid-column: 1; }
.sidebar.right { grid-column: 3; }

/* Main content column */
.content {
  grid-column: 2;
  display: grid;
  gap: 18px;
}

/* Keep actual text containers narrow for readability */
.content > .card {
  max-width: 600px; /* <- your requested 600px cap */
  margin: 0 auto;   /* center inside the middle column */
}

/* === Cards & basic look === */
.card {
  background: #c0ffb5;
  border: 2px dotted;
  border-color: #247055;
  border-radius: 14px;
  padding: 14px 16px;
}

h1 { font-size: 36px; margin: 0 0 12px; color: #247055; }
h2 { font-size: 26px; margin: 0 0 8px; color: #247055 }
h3 { font-size: 18px; margin: 0 0 8px; color: #247055; }
p, li { line-height: 1.5; }

a { color: var(--link); text-decoration: underline; }
a:hover { color: #fff; }

/* Sidebar lists */
.menu ul, .quick-facts ul {
  list-style: none; padding: 0; margin: 8px 0 0;
}
.menu li, .quick-facts li { margin: 6px 0; }

/* Weather placeholder box */
.weather-box {
  display: grid; place-items: center;
  height: 120px;
  border: 1px dashed var(--card-brd);
}

/* Status pill/dot */
.status-line { display: flex; align-items: center; gap: 8px; }
.dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block; background: #00d37a; /* default green */
}
.status[data-status="offline"] .dot { background: #ff5c5c; }

/* === Responsive: stack on mobile === */
@media (max-width: 920px) {
  .page-grid {
    grid-template-columns: 1fr; /* single column */
  }
  .sidebar.left, .sidebar.right, .content { grid-column: 1; }
  .site-header img { max-width: 100%; height: auto; }
  .content > .card { max-width: 100%; }
}

body {
  position: relative;            /* create stacking context */
  margin: 0;
  font-family: "Comic Sans MS", "Arial Rounded MT Bold", Tahoma, Arial, sans-serif;
  cursor: url("assets/heart-select.cur"), auto;
}

/* Background tile lives behind all content */
body::before {
  content: "";
  position: fixed;
  background-image: url("assets/5001.png");
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: auto;
  z-index: -1;                   /* <— key line */
}

/*Marquee*/
marquee {
  display: block;
  margin-top: 40px;
}

.header-image {
  display: block; 
  margin-bottom: 40px;
}