<!DOCTYPE html>
<html>
  <head>
    <title>Momo IT</title>

    <style>
      * {
        box-sizing: border-box;
      }

      html {
        font-size: 24px;
        font-weight: 400;
        line-height: 1.4;
      }

      @media (min-width: 1000px) {
        html {
          font-size: 36px;
        }
      }

      @media (min-width: 1800px) {
        html {
          font-size: 48px;
        }
      }

      body {
        margin: 0;
        padding: 0;
        font-family: Source Sans Pro, Open Sans, sans-serif;
        color: white;
        display: flex;
        flex-direction: column;
      }

      main {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        min-height: 100vh;
        background: radial-gradient(farthest-corner at -5% -5%, rgb(255, 0, 200) 0%, rgb(230, 0, 67) 100%);
      }

      .logo {
        font-weight: 800;
        font-style: italic;
      }

      .realness {
        display: block;
        margin-left: 2rem;
        font-style: italic;
      }

      h1 {
        font-size: 2rem;
        font-weight: 800;
        font-style: normal;
        line-height: 1.25;
      }

      @media (min-width: 1000px) {
        h1 {
          margin-bottom: 2rem;
        }
      }

      footer {
        margin-top: 1rem;
        font-weight: 600;
      }

      a {
        display: inline-block;
        word-wrap: break-word;
        line-break: normal;
        color: white;
        text-decoration: none;
        margin-left: 2rem;
      }

      a:hover {
        text-decoration: underline;
      }

      .feather {
        display: inline-block;
        vertical-align: sub;
        margin-right: 0.5rem;
        width: 1rem;
        height: 1rem;
      }
    </style>
  </head>
  <body>
    <main>
      <div class="logo">
        Momo IT
      </div>
      <h1>&lt;&gt; <span class="realness">We engineer and operate.</span> &lt;/&gt;</h1>
      <p>
        We have experience running large-scale, performant, linux-based infrastructures,
        and follow projects from planning to development into operations.
      </p>
      <footer>
        <p>
          Find us in Cologne, Germany.
          <a href="mailto:mail@momo.koeln">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="feather feather-mail"
            >
              <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
              <polyline points="22,6 12,13 2,6"></polyline>
            </svg>mail@momo.koeln
          </a>
        </p>
      </footer>
    </main>
  </body>
</html>