<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>m01n</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body {
    height: 100%;
    overflow: hidden;
  }
  body {
    display: flex;
    flex-direction: column;
    background: #003e53;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }
  .gif-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 1rem;
  }
  .gif-container img {
    max-width: 80vw;
    max-height: calc(100vh - 4rem);
    object-fit: contain;
  }
  footer {
    padding: 0.75rem;
    text-align: center;
    font-size: 0.8rem;
    color: #005d7d;
    flex-shrink: 0;
  }
  footer a {
    color: #39b398;
    text-decoration: none;
  }
  footer a:hover {
    color: #4edfbf;
  }
</style>
</head>
<body>
  <div class="gif-container">
    <img id="gif" alt="" />
  </div>
  <footer>
    <a href="https://m01n.com">m01n.com</a> · <a href="https://m01n.com/kontakt/#impressum">Impressum</a> · <a href="https://m01n.com/kontakt/#datenschutz">Datenschutz</a>
  </footer>
  <script>
    const gifs = [
      "gifs/allo.gif", "gifs/gehirn.gif", "gifs/hahn-klein.gif", "gifs/kuh.gif",
      "gifs/kuhformer.gif", "gifs/liegestuhl.gif", "gifs/m01nzilla.gif",
      "gifs/sirmaunzalot.gif", "gifs/teekanne.gif", "gifs/wachsen-gedeihen.gif",
      "gifs/wackelmoewe.gif", "gifs/zuhoeren.gif"
    ];
    document.getElementById("gif").src = gifs[Math.floor(Math.random() * gifs.length)];
  </script>
</body>
</html>
