h1 {
    text-align: center;
    color: #E21C67;
	font-size:3em;
}
.hidden {
	display: none!important;
}
.visible {
	display:block;
}
		#dropzone {
		  	width:50%;
            padding: 40px;
            border: 2px dashed #888;
            text-align: center;
            color: #E21C67;
			font-size:3em;
			cursor-pointer;
			border-radius:.5rem;
			cursor: pointer;
        }
		#dropzone:hover {
			border:2px dashed #E21C67;
		}
        #dropzone.dragover {
            border-color: green;
            color: green;
        }
		.container {
		  height: 100vh;
		  width: 100vw;
		  display: flex;
		  flex-wrap: wrap;
		  align-items: center;
		  justify-content: center;
		  flex-direction: column;
		  
		}
		@media (min-width: 1025px) {
		.background-image {
			background-image:url('./images/background-web.png');
			background-size:     cover;                    
			background-repeat:   no-repeat;
			background-position: start center;  
			overflow:hidden;
		}
		}
		@media (min-width: 320px) and (max-width: 1024px) {
			.background-image {
				background-image:url('./images/background-mob.png');
				background-size:     cover;                    
				background-repeat:   no-repeat;
				background-position: start center;  
				overflow:hidden;
			}
		}
		#previewContainer {
		    display: flex;
		    flex-wrap: wrap;
		    gap: 10px;
		    margin-top: 20px;
		}

		.preview {
		    width: 120px;
		    border: 1px solid #ccc;
		    padding: 5px;
		    font-size: 12px;
		}

		.preview img {
		    width: 100%;
		    height: 80px;
		    object-fit: cover;
		}

		.progressBar {
		    height: 6px;
		    background: #eee;
		    margin-top: 5px;
		}

		.progress {
		    height: 100%;
		    width: 0%;
		    background: green;
		}