/* Base */
:root {
  --bg: #090000;
  --text: #ffcc00;
  --link: #ffffff;
  --link-hover: #00ccff;
  --nav-link: #c00000;
  --muted: #c00000;
  --quote: #3333cc;
  --caption: #c00090;

  --sidebar-w: 182px;
  --pad: 12px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.4;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  color: var(--link-hover);
  text-decoration: underline;
}

/* Layout */
.layout {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: var(--pad);
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-w);
  padding: 6px;
}

.sidebar__logo {
  text-align: center;
  margin-bottom: 10px;
}

.nav__list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px 0;
}

.nav__item {
  margin: 0 0 10px 0;
  text-align: center;
}

.nav__link {
  color: var(--nav-link);
  font-weight: 700;
  font-size: 1.05rem;
}

.nav__note {
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 2px;
}

.rule {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  margin: 14px 0;
}

/* Main content */
.content {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
}

/* Masthead */
.masthead {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.masthead__logo {
  flex: 0 0 auto;
  margin-left: auto;
}

.masthead__titles {
  flex: 1;
  min-width: 0;
}

h1 {
  margin: 0 0 6px 0;
  font-size: 1.6rem;
}

h2 {
  margin: 14px 0 0 0;
  font-size: 1.2rem;
}

.subtitle {
  margin: 0 0 10px 0;
}

.quote {
  margin: 10px 0 10px 0;
  color: var(--quote);
  font-style: italic;
}

.quote__by {
  margin-top: 6px;
  font-style: normal;
  color: var(--quote);
}

/* Two-column section */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 10px;
}

.float-left {
  float: left;
  margin: 6px 10px 6px 0;
}

/* Picture of the month */
.picture-of-month {
  margin-top: 16px;
}

.picture-of-month__caption {
  color: var(--caption);
  margin: 0 0 10px 0;
}

.picture-of-month__label {
  font-weight: 700;
}

.photo {
  margin: 0;
}

.photo img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 3px solid rgba(255, 255, 255, 0.7);
}

/* Next two are for box on index.html */
.box {
  width: 600px;
  height: 250px;
  background-color: whitesmoke;
  border: 4px solid red;
  padding: 10px;
  margin: 10px;
}

.boxtext {
  color: red;
}

.span-box {
  color: orange;
}

/* Responsive */
@media (max-width: 900px) {
  .layout {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
  }

  .nav__item {
    display: inline-block;
    margin: 6px 10px;
  }

  .two-col {
    grid-template-columns: 1fr;
  }

  .masthead {
    flex-direction: column;
  }

  .masthead__logo {
    margin-left: 0;
  }
}