* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #000000;
  color: #ffffff;
}

body {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100vh;
}

body.home  { background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), url("imgs/nebula1.jpg"); }
body.about { background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), url("imgs/nebula2.jpg"); }
body.zzz   { background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), url("imgs/nebula3.jpg"); }

nav {
  display: flex;
  gap: 28px;
  padding: 28px 40px 10px 40px;
}

nav a {
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
}

nav a:hover,
nav a.active {
  text-decoration: underline;
}

main {
  min-height: 80vh;
  padding: 20px 8vw 8vh 8vw;
}

.scatter {
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: 100%;
}

.scatter p {
  margin: 0;
  font-size: 17px;
  line-height: 1.75;
  color: #ffffff;
  max-width: 520px;
}

/* alternate left/right placement so paragraphs feel scattered, not stacked in a column */
.scatter p:nth-child(odd)  { align-self: flex-start; text-align: left; }
.scatter p:nth-child(even) { align-self: flex-end;   text-align: right; }

.favorites-block {
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
}

.favorites-block .row {
  font-size: 16px;
  line-height: 1.6;
  color: #ffffff;
  max-width: 520px;
}

.favorites-block .row:nth-child(odd)  { align-self: flex-start; text-align: left; }
.favorites-block .row:nth-child(even) { align-self: flex-end;   text-align: right; }

.favorites-block .label {
  margin-right: 6px;
}

.favorites-block a {
  color: #ffffff;
}

.zzz-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

.zzz-wrap p {
  font-size: 14px;
  color: #ffffff;
}

.byline {
  padding: 0 8vw 40px 8vw;
  font-size: 12px;
  color: #ffffff;
}

/* keep it readable on narrow screens instead of clipping to one edge */
@media (max-width: 700px) {
  .scatter p,
  .favorites-block .row {
    max-width: 100%;
    align-self: flex-start !important;
    text-align: left !important;
  }
}