/* ======================================================
   EDIT ME — customize colors, images, and spacing here
   ====================================================== */
:root {
  --bg-color: #cfe8f3;        /* page background (light blue) */
  --frame-bg: #ffffff;        /* inner square background */
  --lace-color: #ffffff;      /* fallback lace border color (used if no border image) */
  --lace-shadow: #ffffff;     /* lace border shading */
  --text-color: #1670a8;      /* text color */
  --heading-color: #7dcdff;   /* heading color */
  --gutter: 20px;             /* consistent spacing between border, image, and text */
  --gallery-gap: 8px;         /* small gap between gallery images */
  --title-color: #4a7a94;     /* header text color */
  --link-color: #7dcdff;      /* color of the bolded text links */
  --link-gap: 20px;           /* spacing between links */
  --image-url: url('https://64.media.tumblr.com/b856a3ac11efdf152f44e3a354ce8cdb/004fbe5af8ecc3d1-19/s500x750/59417897dc7ceb929380b2ddd51d33ad41a87d8d.png'); /* <-- left-side photo link */
  /* <-- BORDER IMAGE: put a lace/pattern image link here.
       Leave empty (none) to use the plain --lace-color border instead. */
  --border-image-url: url('https://64.media.tumblr.com/523bab5dd4e734795f36e47e080484da/2c77a31899225e99-64/s250x400/5d5a4a7a8f36d478902da6e8ddf878db9ee04789.png');
  --border-width: 22px;       /* thickness of the border image */
  --border-slice: 27;         /* how the border image is sliced (see border-image-slice) */

  /* <-- PAGE BACKGROUND IMAGE: put an image link here to use instead of the plain background color.
       Leave as none to use --bg-color instead. */
  --bg-image-url: url('https://64.media.tumblr.com/5468756b24cd375cd8bd89def33e0070/cb73006e4f06fda1-74/s250x400/1ef64bf1c046932045353c8acd1d456f461ea8f8.png');
  --bg-size: auto;            /* 'auto' = tiled/repeated at natural size, 'cover' = fit and fill screen, 'contain' = fit without cropping */
  --bg-repeat: repeat;        /* 'repeat' to tile, 'no-repeat' for a single fitted image */
}
/* ====================================================== */
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-color);
  background-image: var(--bg-image-url);
  background-size: var(--bg-size);
  background-repeat: var(--bg-repeat);
  font-family: sans-serif, 'Hammersmith One', serif;
}
.page {
  position: relative;
  background: var(--frame-bg);
  padding: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--gutter);
  /* border: uses an image if --border-image-url is set, otherwise a plain lace color */
  border: var(--border-width) solid var(--lace-color);
  border-image: var(--border-image-url) var(--border-slice) round;
  border-radius: 24px;
  overflow: hidden;
}
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--gutter);
}
.text-side {
  position: relative;
  z-index: 1;
  width: 260px;
  height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--text-color);
}
.image-side {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 260px;
  height: 260px;
  background-image: var(--image-url);
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  box-shadow: inset 0 0 0 4px var(--lace-color), 0 0 0 1px var(--lace-shadow);
}
.text-side h1 {
  margin: 0 0 12px;
  font-size: 26px;
  color: var(--heading-color);
  letter-spacing: 1px;
}
.text-side p {
  margin: 0 0 10px;
  line-height: 1.6;
  font-size: 15px;
}
.links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--link-gap);
  flex-wrap: wrap;
}
.links a {
  font-weight: bold;
  color: var(--link-color);
  text-decoration: none;
  font-size: 15px;
}
.links a:hover {
  text-decoration: underline;
}
.gallery-title {
  margin: 0;
  text-align: center;
  font-size: 30px;
  color: var(--title-color);
  letter-spacing: 1px;
}
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 500px);
  gap: var(--gallery-gap);
}
.gallery img {
  display: block;
  width: 500px;
  height: 500px;
  object-fit: cover;
}