header,
nav,
footer {
    background-color: black;
    /* black background */
    color: white;
    /* white text so it’s readable */
    text-align: center;
    /* center text */
    width: 100%;
    /* ensures stretches across screen */
}

main {
    background-color: #1a1010;
    background-image: url("https://www.transparenttextures.com/patterns/back-pattern.png");
    color: white;
}

.roundedImage {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
}

.centerContent {
    display: flex;
    /* enables flexbox */
    flex-direction: column;
    /* stack sections vertically */
    align-items: center;
    /* center items horizontally */
    justify-content: center;
    /* center items vertically */
    text-align: center;
    /* center text inside sections */
}

.imageBox {
  border: 2px solid white;   /* white border around the section */
  padding: 20px;             /* space inside the box */
  margin: 20px auto;         /* space outside + centers box horizontally */
  width: 35%;        /* shrink-wraps box to image size */
  background-color: #111;    /* optional dark background */
  border-radius: 8px;        /* rounded corners */
  text-align: center;        /* centers captions or text if added */
}

.imageBox img {
  display: block;            /* removes bottom whitespace from inline img */
  max-width: 100%;           /* makes image scale down if container shrinks */
  height: auto;              /* keeps correct proportions */
  border-radius: 4px;        /* slight rounding for the image itself */
}

.mapBox {
  border: 2px solid white;   /* white border around the section */
  padding: 20px;             /* space inside the box */
  margin: 20px auto;         /* spacing outside, auto centers horizontally */
  width: fit-content;        /* box adjusts to content width */
  background-color: #111;    /* optional: dark background to contrast border */
  border-radius: 8px;        /* rounded corners */
  text-align: center;        /* center text or extra content inside */
}

.aboutBox {
  border: 2px solid white;   /* white border around the box */
  padding: 20px;             /* space inside the box */
  margin: 20px auto;         /* spacing around the box */
  width: 70%;                /* adjust width as needed */
  text-align: left;          /* left-aligns everything */
  background-color: #111;    /* optional: dark background so white border pops */
  color: white;              /* white text to contrast the background */
  border-radius: 8px;        /* rounded corners */
}