<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>nepo.pl</title>
  <style>
    /* ---------- Global ---------- */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      margin: 0;
      font-family: "Georgia", "Times New Roman", serif;
      background-color: #151a27; /* dark navy */
      color: #384045;            /* body text */
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    /* ---------- Layout ---------- */
    .page-wrapper {
      max-width: 600px;
      margin: 20px auto 40px;
      padding: 40px 45px 60px;
      background-color: #151a27; /* same as body to look like one panel */
    }

    /* ---------- Typography ---------- */
    .site-title {
      text-align: center;
      font-size: 3rem;
      letter-spacing: 1px;
      color: #8d9b8b; /* pale green */
      margin-bottom: 26px;
    }

    .lead {
      font-size: 0.98rem;
      line-height: 1.6;
      margin-bottom: 30px;
      color: #d9dfd8;
    }

    .author {
      font-size: 0.9rem;
      color: #d9dfd8;
      margin-bottom: 40px;
    }

    .author a {
      text-decoration: underline;
    }

    .section-title {
      text-align: center;
      font-weight: normal;
      font-style: small-caps;
      /*text-transform: uppercase;*/
      letter-spacing: 4px;
      word-spacing: 8px;
      font-size: 1.2rem;
      color: #9dab9b;
      margin-bottom: 18px;
    }

    /* ---------- Lists of links ---------- */
    .link-group {
      margin-bottom: 40px;
    }

    .link-row {
      padding: 16px 12px 18px;
      border-top: 1px dotted #4c5660;
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .link-row:hover {
      background-color: #363c43;
    }

    .link-row:last-of-type {
      border-bottom: 1px dotted #4c5660;
    }

    .thumb {
      width: 86px;
      height: 86px;
      flex-shrink: 0;
      background-color: #363c43;
      object-fit: cover;
      display: block;
    }

    .link-text {
      flex: 1;
    }

    .link-title {
      font-size: 1.5rem;
      font-variant: small-caps;
      letter-spacing: 0.04em;
      color: #f0f4ed;
      margin-bottom: 4px;
    }

    .link-subtitle {
      font-size: 1rem;
      color: #d0d5cf;
      margin-bottom: 6px;
    }

    .link-subsubtitle {
      font-size: 0.9rem;
      color: #d0d5cf;
      font-style: italic;
    }

    /* Small tweak for spacing between sections */
    .section-spacing {
      margin-top: 40px;
    }
  </style>
</head>
<body>
  <div class="page-wrapper">

    <h1 class="site-title">nepo.pl</h1>

    <p class="lead">
      Witam na nepo.pl. Ta domena jest obecnie zarządzana przez Jacka Juniora i zawiera materiały stworzone przez Jacka oraz jego ś.p. ojca, Również Jacka:
    </p>

    <p class="lead">
      <i>Welcome to nepo.pl. This domain is currently managed by Jacek Junior and contains materials created by Jacek and his late father, Also Jacek:</i>
    </p>

    <!-- Strony Jacka juniora -->
    <section class="link-group">
      <h2 class="section-title">Jacek Junior</h2>

      <a href="https://sites.google.com/view/jdobrzyniecki/">
      <div class="link-row">
        <img class="thumb" src="img/icon_academic.jpg" alt="">
        <div class="link-text">
          <div class="link-title">Academic profile</div>
          <div class="link-subtitle">&mdash; summary of my scientific work</div>
          <div class="link-subsubtitle">(English only) (External host)</div>
        </div>
      </div>
      </a>

      <a href="https://wiki.nepo.pl">
      <div class="link-row">
        <img class="thumb" src="img/icon_wiki.jpg" alt="">
        <div class="link-text">
          <div class="link-title">wiki.nepo.pl</div>
          <div class="link-subtitle">&mdash; where I dump writings about whatever</div>
          <div class="link-subsubtitle">(English only)</div>
        </div>
      </div>
      </a>

      <a href="https://nepo.pl/prk/">
      <div class="link-row">
        <img class="thumb" src="img/icon_prk.jpg" alt="">
        <div class="link-text">
          <div class="link-title">Konkursy pl.rec.ksiazki</div>
          <div class="link-subtitle">&mdash; skąd znamy te fragmenty?</div>
          <div class="link-subsubtitle">(Polish only)</div>
        </div>
      </div>
      </a>

     <!-- jeszcze nie ma

      <div class="link-row">
        <img class="thumb" src="img/icon_memorial.jpg" alt="">
        <div class="link-text">
          <div class="link-title">Ojciec memorial</div>
          <div class="link-subtitle">smutny emotikon</div>
        </div>
      </div>
    </section> -->

    <!-- Strony Jacka seniora -->
    <section class="link-group section-spacing">
      <h2 class="section-title">Jacek Senior</h2>

      <a href="https://herrmannelig.com.pl">
      <div class="link-row">
        <img class="thumb" src="img/icon_herrmann.png" alt="">
        <div class="link-text">
          <div class="link-title">Herr Mannelig</div>
          <div class="link-subtitle">&mdash; poezje i piosenki</div>
          <div class="link-subsubtitle">(Polish only)</div>
        </div>
      </div>
      </a>

      <a href="https://mojeminiatury.nepo.pl">
      <div class="link-row">
        <img class="thumb" src="img/icon_miniatury.jpg" alt="">
        <div class="link-text">
          <div class="link-title">Moje miniatury</div>
          <div class="link-subtitle">&mdash; dom z papieru</div>
          <div class="link-subsubtitle">(Polish only)</div>
        </div>
      </div>
      </a>

    </section>
    <!-- end of TOC -->

    <p class="author">
      Kontakt: <a href="mailto:dobrzyniecki.jacek@gmail.com">Jacek Junior Dobrzyniecki</a>
    </p>

  </div> <!-- end of page wrapper -->
</body>
</html>
```