#drop-area {
          position: relative;
          border: 2px dashed #ccc;
          border-radius: 10px;
          width: 100%;
          height: 200px;
          text-align: center;
          cursor: pointer;
          margin-bottom: 20px;
      }
      .font{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
      }
      #preview {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
      }
      .preview-item {
          position: relative;
      }
      .preview-item img {
          max-width: 150px;
          height: auto;
          display: block;
      }
      .remove-btn {
          position: absolute;
          top: 0;
          right: 0;
          background: rgb(184, 87, 151);
          color: white;
          border: none;
          cursor: pointer;
          font-size: 14px;
          padding: 2px 6px;
          border-radius: 0 0 0 5px;
      }
      .controls {
          margin-bottom: 20px;
          font-size: 1.3em;
      }
      .controls label {
          display: block;
          margin: 8px 0;
      }
      .radio-container {
          display: flex;
          flex-direction: column;
          gap: 10px;
          margin-bottom: 10px;
      }
      .radio-option {
          display: flex;
          align-items: center;
          gap: 10px;
      }
      .controls input[type="number"] {
          width: 100px;
          padding: 5px;
      }
      button{
        padding: 20px;
        font-size: 1.2em;
        font-weight: bold;
        border-radius: 10px;
      }