<!DOCTYPE html>
<html>

<head>
  <title>cybton.com</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div class="outer-ring">
    <div class="middle-ring">
      <div class="inner-ring">
        <div class="text">
          <h1>Liebe Cybton Community,</h1>
          <p>
            nach 15 Jahren endet hier die Laufbahn von Cybton. Gestartet hat Cybton 2003 bis 2006 damit, neben einer aktiven Entwickler-Community,
            kostenfrei Webspace für über 60.000 Nutzerinnen und Nutzer zur Verfügung zu stellen. Damit landeten wir unter
            den Top 3 der Free-Webhoster am deutschsprachigen Markt. Auch nach dem Ende der Webspace Ära konnte sich Cybton
            weiterhin – bis zum heutigen Tag – als Entwickler-Community positionieren.
            <br>
            <br> Wir bedanken uns bei allen Nutzerinnen und Nutzern, Moderatorinnen und Moderatoren sowie Mithelferinnen und
            Mithelfern, die uns über die letzten Jahre so aktiv unterstützt haben. Ohne euch wäre eine solche Plattform nie
            möglich gewesen. Für viele war Cybton ein wichtiger und vor allem prägender Lebensabschnitt und ausschlaggebend
            für die weitere Karriere.
            <br>
            <br> Gerne würden wir uns noch einmal namentlich bei unseren aktivsten Nutzer/innen und Moderator/innen bedanken:
            pFT, Notrace, Tenta, Boandlkramer, Bmk, Borner, HangMan, Wundertuete, SammysHP, Nexus, Tkdteam, Adi, Phackh,
            kordian10, ximish Moderatoren im Forum waren bis zum Schluss: awindbichler, brott, Xeco, bmk, Borner, Tenta,
            geeko, ximish, Xaron, Wundertuete, sim4000, wieschoo, GottZ, notrace
            <br>
            <br>Und natürlich ein großes Dankeschön an alle anderen Nutzerinnen und Nutzer über die ganzen Jahre.


            <br>
            <br>
            <b>Liebe Grüße und Danke für eure Unterstützung
              <br> Alex (Windbichler) und Benno (Rott).</b>
            <div class="img">
              <img src="logo_cybton.png" alt="logoCybton" />
            </div>
          </p>
        </div>
      </div>
    </div>
  </div>
  <script>
    window.addEventListener("load", function () {
      var outerRing = document.getElementsByClassName("outer-ring")[0];
      var middleRing = document.getElementsByClassName("middle-ring")[0];
      var innerRing = document.getElementsByClassName("inner-ring")[0];
      var text = document.getElementsByClassName("text")[0];


      window.addEventListener("resize", checkOverflow);
      checkOverflow();

      function checkOverflow() {
        if (innerRing.style.position !== "absolute") {
          if (text.getBoundingClientRect().bottom <= innerRing.getBoundingClientRect().bottom) {
            outerRing.style.position = "absolute";
            middleRing.style.position = "absolute";
            innerRing.style.position = "absolute";
          }
        }
        if (innerRing.style.position !== "relative") {
          if (text.getBoundingClientRect().bottom > innerRing.getBoundingClientRect().bottom) {
            outerRing.style.position = "relative";
            middleRing.style.position = "relative";
            innerRing.style.position = "relative";
          }
        }
      }
    });
  </script>
  <style type="text/css">
    html,
    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      text-align: center;
    }

    div.outer-ring,
    div.middle-ring,
    div.inner-ring {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
    }

    div.text {
      padding: 25px;
      max-width: 650px;
      margin: 0 auto;
    }

    div.outer-ring {
      border: 10px solid #FCBC5A;
    }

    div.middle-ring {
      border: 10px solid #FEB444;
    }

    div.inner-ring {
      border: 10px solid #FFA51C;
    }


    /*@media screen and (max-width: 520px) {
      div.outer-ring,
      div.middle-ring,
      div.inner-ring {
        position: relative;
      }
    }*/

    h1 {
      color: #FF9803;
      font-size: 28px;
    }

    p {
      font-size: 1rem;
      line-height: 21px;
    }

    .img {
      margin-top: 50px;
    }
  </style>
</body>

</html>
