/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* ===== Base ===== */
body {
  background-color: #f4efe9;
  color: #3b2f2a;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* ===== Background image (optional) ===== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("nature.jpg"); /* upload your lake photo */
  background-size: cover;
  background-position: center;
  opacity: 0.18;
  z-index: -1;
}

/* ===== Content area ===== */
.container {
  max-width: 720px;
  margin: 3rem auto;
  padding: 2rem;
  background: rgba(244, 239, 233, 0.88);
  border: 1px solid #d6cbbf;
}

/* ===== Headings ===== */
h1, h2, h3 {
  color: #4a3b36;
  font-weight: normal;
  letter-spacing: 0.04em;
}

/* ===== Links (the important part) ===== */
a {
  color: #b05a7a;                /* rose */
  text-decoration: none;
  border-bottom: 1px solid #b05a7a;
  transition: all 0.2s ease;
}

a:visited {
  color: #7a3b4f;                /* wine */
  border-bottom-color: #7a3b4f;
}

a:hover {
  color: #3f6f5f;                /* forest green */
  border-bottom-color: #3f6f5f;
  background-color: rgba(255, 240, 200, 0.4);
}

a:active {
  color: #2b4d42;
}

/* ===== Images inside posts ===== */
img {
  max-width: 100%;
  display: block;
  margin: 2rem auto;
  border: 1px solid #cbb9a9;
}

/* ===== Footer ===== */
footer {
  font-size: 0.85em;
  color: #6b5a50;
  text-align: center;
  margin-top: 4rem;
}
<img src="portrait.jpg" alt="Dreamy portrait art">
<img src="collage.jpg" alt="Vintage collage art">
background-image: url("nature.jpg");
.container {
  box-shadow: 0 0 30px rgba(180, 150, 120, 0.25);
}