body {
    background-color: rgb(44, 44, 44);
    margin-left: 8%;
    margin-right: 8%;
}

/* headers */
h1, h2, h3, h4 {
    color: white;
}
h5, h6 {
    color: lightgray;
}
h1 {
    text-align: center;
}

/* most text */
p {
    font-family: verdana;
    font-size: 16px;
}
p, li {
    color: lightgray;
    font-family: verdana;
}

/* links */
/* Can add these if desired:
    unvisited - a:link{}
    visited - a:visited{}
    mouse over - a:hover{}
    selected - a:active{}
*/
a {
    color: rgb(87, 129, 225);
    text-decoration: underline;
}

.center {
    text-align: center;
}

/* Apply to all images rendered from Markdown */
p > img,
img {
  display: block;       /* break out of inline flow */
  margin: 1em auto;     /* center horizontally with space */
  width: 40%;           /* default 40% of container */
  max-width: 100%;      /* never exceed container */
  height: auto;         /* preserve aspect ratio */
}

/* Optional smaller image */
img.small-img {
  width: 30%;
}

/* Optional larger image */
img.large-img {
  width: 70%;
}

/* Ensure responsiveness on tiny screens */
@media (max-width: 600px) {
  img {
    width: 80%;     /* scale up on small screens */
  }
  img.small-img {
    width: 60%;
  }
  img.large-img {
    width: 90%;
  }
}

/* Responsive side-by-side images */
.img-row {
  display: flex;
  flex-wrap: wrap;      /* let them stack on smaller screens */
  gap: 10px;            /* space between images */
  justify-content: center;
}

.img-row img {
  flex: 1 1 35%;        /* images take ~35% each on larger screens */
  max-width: 38%;       /* keep them from overflowing */
  height: auto;
}