span.gradiant-color-text {
    fill: transparent;
    background: radial-gradient(circle, #01c324, #013db9, #01c324, #013db9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}
 
 
 
 
 


    .drop-zone {
      padding: 40px;
      border: 4px solid transparent;
      border-radius: 10px;
      background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(270deg, #01c324, #013db9, #01c324, #013db9) border-box;
      background-origin: border-box;
      background-clip: padding-box, border-box;
      background-size: 300% 300%;
      animation: borderAnimation 6s linear infinite;
    }

    @keyframes borderAnimation {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    } 
 
 
 
 
        
        
.drop-zone {
    padding: 40px;
    text-align: center;
    cursor: pointer;
    transition: all  0.5s ease-in-out;
    max-width: 600px;
    margin: 0px auto;
}
body .drop-zone:hover {
   border-style: solid;

}
        
        .drop-zone--over {
            background-color: #f0f8ff;
        }
        
        .drop-zone p {
            margin: 0;
            color: #7f8c8d;
        }
        
        .drop-zone strong {
            color: #3498db;
        }
        
        #fileInput {
            display: none;
        }
        
        img {
            max-width: 100%;
            height: auto;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-top: 10px;
        }
        
        .hidden {
            display: none;
        }
        
        .file-info {
            margin: 10px 0;
            padding: 10px;
            background-color: #f9f9f9;
            border-radius: 4px;
        }
        
        .control-group {
            margin-bottom: 15px;
        }
                h1 {
            text-align: center;
            color: #2c3e50;
        }
        

        .control-group {
    margin-bottom: 15px;
}

#qualityControl, #sizeControl {
    transition: all 0.3s ease;
}

#targetSize {
    width: 100px;
    padding: 5px;
}
        
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        
        input[type="range"], input[type="number"], select {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-right: 10px;
            transition: background-color 0.3s;
        }
        
        button:hover {
            background-color: #2980b9;
        }
        
        button:disabled {
            background-color: #95a5a6;
            cursor: not-allowed;
        }
        
        .file-list {
            margin: 20px 0;
            max-height: 500px;
            overflow-y: auto;
        }

        .file-item {
            border: 1px solid #ddd;
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
        }

        .preview-container {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }

        .image-preview {
            width: 150px;
            height: 150px;
            border: 1px solid #ddd;
            padding: 5px;
        }

        .preview-image {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        .file-status {
            font-size: 0.9em;
            margin-top: 5px;
        }