/* .main {
      padding: 40px 20px;
    } */

    /* .container {
      width: 340px;
      text-align: center;
      background: #f8f8f8;
      padding: 30px 20px;
      border-radius: 16px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
      border: 1px solid #ddd;
    } */

    h1 {
      font-size: 24px;
      margin-bottom: 20px;
      color: #333;
      text-align: center;
    }

    .upload-box{
      width: 340px;
      height:400px;
      aspect-ratio: 1/1;
      border: 2px dashed #00aaff;
      border-radius: 12px;
      position: relative;
      overflow: hidden;
      background: #fff;
      margin: 20px auto;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.3s ease;
    }

    .image-preview-container {
      height: 400px;
      position: relative;
      overflow: hidden;
      margin: 20px auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .upload-box:hover {
      border-color: #0077cc;
    }

    .upload-box input[type="file"] {
      display: none;
    }

    .upload-box span {
      color: #666;
      cursor: pointer;
      font-size: 16px;
      transition: color 0.3s ease;
    }

    .upload-box:hover span {
      color: #000;
    }

    #previewImage {
      width: auto;
      height: 400px;
      object-fit: cover;
      display: none;
      border-radius: 12px;

    }

    .preview-wrapper {
      position: relative;
      display: inline-block;

    }

    /* .preview-wrapper img {
      display: block;
      width: 100%;
      height: auto;
    } */

    .stars-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: none;
      pointer-events: none;
      z-index: 2;
    }

    .star {
      font-family: sans-serif;
      opacity: 0;
      animation: blink 2s ease-in-out infinite;
    }

    .s1 { font-size: 44px; animation-delay: 0s;  fill: #FFD700; }
    .s2 { font-size: 52px; animation-delay: 0.3s; fill: #00BFFF; }
    .s3 { font-size: 68px; animation-delay: 0.6s; fill: #FF69B4; }
    .s4 { font-size: 56px; animation-delay: 0.9s; fill: #BFFF00; }
    .s5 { font-size: 48px; animation-delay: 1.2s; fill: #222; }
    .s6 { font-size: 64px; animation-delay: 1.5s; fill: #FFA500; }

    @keyframes blink {
      0%, 100% { opacity: 0; }
      50% { opacity: 1; }
    }

    button {
      background: linear-gradient(145deg, #00aaff, #0077cc);
      border: none;
      color: #fff;
      padding: 12px 24px;
      font-size: 16px;
      font-weight: 600;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.3s ease;
      /* margin-left: 10px;
      margin-left: 10px; */
    }

    button:hover {
      background: linear-gradient(145deg, #0099dd, #006bb3);
    }

    .buttons{
      text-align: center;
      margin-top: 10px;
    }