/* page background */
body {
  margin: 0;
  padding: 0;
  background-color: black;
  background-image: url('https://nessdoesmath.neocities.org/nasa.jpg');
  background-repeat: repeat;
  color: white;
}

/* makes titles for middle boxes */
.title {
  font-family: "Arial Black", Impact, sans-serif;
  letter-spacing: -0.1em;

  font-size: 2em;   /* large titles */

  position: relative;
  top: -35px;

  border-bottom: none;
}

/* makes text in middle boxes start higher */
.content {
  position: relative;
  top: -15px;
  bottom:-15px
}

/* page width */
.wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

/* ALL boxes: no layout behavior */
.box {
  border: 1px solid #ccc;
  padding: 10px;
  background-color: black;
  box-sizing: border-box;
}

/* top + bottom boxes */
.box.full-width {
  width: 100%;
  margin-bottom: 20px;
}

/* middle layout: TWO columns ONLY */
.middle {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

/* columns stack their children */
.column {
  width: 50%;
  display: block;
}

/* spacing between boxes inside columns */
.column .box {
  margin-bottom: 20px;
}

/* make middle boxes 24px shorter by reducing vertical padding */
.column .box.middle {
  padding-top: 1px;   /* was 10px */
  padding-bottom: 1px; /* was 10px */
}

.inner-content {
  margin-top: -12px;   /* moves content up */
  margin-bottom: -12px; /* reduces overall height */
}




/* remove extra margin on last box */
.column .box:last-child {
  margin-bottom: 0;
}

/* mobile */
@media (max-width: 600px) {
  .middle {
    flex-direction: column;
  }

  .column {
    width: 100%;
  }
}

/* images */
img {
  width: 40%;
  height: auto;
  margin: 5px;
}

.stack-left,
.stack-right {
  display: inline-block;
  width: 45%;
  vertical-align: top;
  text-align: center;
}

.stack-left img,
.stack-right img {
  width: 100%;
}