body {
    font-family: 'Open Sans', sans-serif;
    background: #ffeaea;
    color: #333;
    text-align: center;
    padding: 20px;
  }
  
  h1 {
    color: #c2185b;
    font-size: 32px;
    margin-bottom: 20px;
  }
  
  .container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 30px;
  }
  
  .form {
    flex: 1;
    max-width: 300px;
    margin: 10px;
  }
  
  .form input, .form textarea, .form button {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border-radius: 8px;
    border: 1px solid #aaa;
    font-family: 'Open Sans', sans-serif;
  }
  
  .form button {
    background-color: #d63384;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .form button:hover {
    background-color: #c2185b;
  }
  
  /* Fonts for card */
  .title {
    font-family: 'Great Vibes', cursive;
    font-size: 32px;
    color: #d63384;
    margin-bottom: 20px;
  }
  
  .message {
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    color: #333;
    margin: 20px 0;
  }
  
  .signature {
    font-family: 'Great Vibes', cursive;
    font-size: 24px;
    color: #555;
  }
  
  /* Improved card preview */
  #cardPreview {
    flex: 1;
    max-width: 400px;
    background: linear-gradient(145deg, #fff0f6, #ffe6f0);
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    text-align: center;
    transition: all 0.3s ease-in-out;
  }
  
  #cardPreview:hover {
    transform: scale(1.02);
  }
  
  /* Image styling */
  .photo-frame {
    width: 180px;
    height: 180px;
    margin: 0 auto;
    border: 5px solid #d63384;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 20px;
  }
  
  #cardPreview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  

  /*responsiveness*/

  @media (max-width: 768px) {
    .container {
      flex-direction: column;
      align-items: center;
    }
  
    .form, #cardPreview {
      max-width: 90%;
      margin: 20px 0;
    }
  
    #cardPreview {
      padding: 20px;
    }
  
    .photo-frame {
      width: 150px;
      height: 150px;
    }
  
    .title {
      font-size: 28px;
    }
  
    .message {
      font-size: 16px;
    }
  
    .signature {
      font-size: 20px;
    }
  
    .form input,
    .form textarea,
    .form button {
      font-size: 16px;
    }
  }