/* minimal reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  background: #fff;
  color: #111;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.45;
}

/* Centered layout (flex) */
.wrap {
  min-height: 100svh;                 /* handles mobile dynamic bars */
  display: flex;
  flex-direction: column;
  justify-content: center;            /* vertical center */
  align-items: center;                 /* horizontal center */
  padding: 6vh 2rem;                   /* page breathing room */
}

/* Image block */
.art {
  width: clamp(320px, 52vmin, 720px);  /* your chosen size */
  margin: 0 0 20px 0;                  /* <<< spacing to links */
}

.art img {
  display: block;
  width: 100%;
  height: auto;                        /* self.jpg should be square */
}

/* Links: default browser styling, just centered & spaced */
.links {
  text-align: center;
  font-size: 0.8rem;
  margin: 0;                           /* ensure no extra gap */
}

.links a { margin: 0 0.45rem; }        /* spacing between links */

/* Small screens */
@media (max-width: 480px) {
  .wrap { padding: 5vh 1rem; }
  .links { font-size: 0.9rem; }
  .art { margin-bottom: 8px; }         /* slightly tighter on small screens */
}