@import url('https://fonts.googleapis.com/css2?family=Gochi+Hand&display=swap');

* {
    font-family: "Gochi Hand", cursive;
  font-weight: 400;
  font-style: normal;
}
body {
     background: #cc2b5e; /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #cc2b5e, #753a88); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #cc2b5e, #753a88); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

   /* Zusätzliche Styles für liebevollen Look */
    #login-box {
      text-align: center;
      padding: 25px;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.85);
      box-shadow: 0 8px 20px rgba(0,0,0,0.2);
      max-width: 300px;
      margin: auto;
    }
    input {
      padding: 10px;
      border-radius: 12px;
      border: 1px solid #ffb6c1;
      margin-top: 10px;
      width: 180px;
      text-align: center;
      font-size: 16px;
      outline: none;
    }
    input:focus {
      border-color: #ff69b4;
      box-shadow: 0 0 10px #ff69b4;
    }
    button {
      margin-top: 15px;
      padding: 10px 25px;
      border: none;
      border-radius: 12px;
      background: #ff69b4;
      color: white;
      cursor: pointer;
      font-size: 18px;
      transition: 0.3s;
    }
    button:hover {
      background: #ff85c1;
      transform: scale(1.05);
    }
    #content {
      display: none;
      text-align: center;
      margin-top: 40px;
      color: #fff;
      animation: fadeIn 1.5s ease-in;
    }
    #content h1 {
      font-size: 3em;
      text-shadow: 2px 2px 8px rgba(0,0,0,0.3);
    }
    #content img {
      max-width: 350px;
      border-radius: 20px;
      margin-top: 20px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }