body {
      margin: 0;
      font-family: 'Georgia', serif;
      background-color: #1a1a1a;
      color: #f1f1f1;
    }

    .hero {
      text-align: center;
      padding: 4rem 1rem 2rem;
      font-family: 'UnifrakturCook', cursive;
      font-size: 3rem;
      color: #e2c275;
      text-shadow: 2px 2px #000;
    }

    .container {
      max-width: 700px;
      margin: auto;
      text-align: center;
      padding: 2rem;
    }

    .input-box, .output-box {
      background: #292929;
      padding: 1rem;
      margin: 1rem 0;
      border-radius: 10px;
      box-shadow: 0 0 8px #000;
      transition: transform 0.3s ease;
    }

    .input-box:hover, .output-box:hover {
      transform: scale(1.02);
    }

    .input-box input {
      width: 90%;
      padding: 0.5rem;
      font-size: 1rem;
      margin-top: 0.5rem;
      border-radius: 5px;
      border: none;
      outline: none;
    }

    .box-title {
      font-size: 1.2rem;
      margin-bottom: 0.5rem;
      font-style: italic;
    }

    .output-text {
      font-size: 1.1rem;
      margin: 1rem 0;
    }

    button {
      padding: 0.6rem 1.2rem;
      font-size: 1rem;
      background-color: #444;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
    }

    .social-share {
      margin-top: 1rem;
    }

    .social-share i {
      font-size: 1.5rem;
      margin: 0 0.5rem;
      cursor: pointer;
      color: #e2c275;
    }

    .features {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: 3rem;
      gap: 1rem;
    }

    .feature-box {
      background: #222;
      padding: 1.5rem;
      width: 200px;
      border-radius: 10px;
      text-align: center;
      box-shadow: 0 0 6px #000;
    }

    .feature-box h3 {
      color: #e2c275;
      margin-bottom: 0.5rem;
    }