:root {
  --main-font: 'Inter', sans-serif;
  --max-width: 900px;
  --paragraph-padding: 0.5rem;
  --primary-color: #222;
  --background-color: #f4f4f4;
  --accent-red: #aa0000;
  --accent-green: #28A745;
  --accent-blue: #007BFF;
  --accent-darkblue: #0056b3;
}
 
.banner{
   position:fixed;
   background-color:var(--background-color);
   width:100%;
   top:-10px;
   z-index:100;
}
 * {
   box-sizing: border-box;
 }
 
 html{
    overflow-x: hidden;
 }
 
 body {
   margin: 0;
   font-family: var(--main-font);
   background: var(--background-color);
   color: var(--primary-color);
   line-height: 1.6;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: clamp(0.5rem, 2vw, 1rem);
   width: 100%;
   overflow-x: hidden;
 }
 
 h1 {
   font-size: clamp(1.4rem, 3vw, 1.8rem);
   text-align: center;
   margin: 1.5rem 0 0.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: 0.5rem;
   width: 100%;
 }
 
 h3 {
   font-size: clamp(1rem, 2vw, 1.2rem);
   margin-top: 0;
   color: darkred;
   text-align: center;
 }
 
 .logo {
   height: clamp(30px, 5vw, 40px);
 }

 .paragraph {
   width: 100%;
   max-width: var(--max-width);
   padding: var(--paragraph-padding);
   font-size: clamp(0.9rem, 2vw, 1.1rem);
   text-align: justify;
 }
 

 .emph {
   font-weight: bold;
   color: var(--primary-color);
 }
 
 .emph-red {
   font-weight: bold;
   color: var(--accent-red);
 }
 
 .emph-green {
   font-weight: bold;
   color: var(--accent-green);
 }
 
 .emph-blue {
   font-weight: bold;
   color: var(--accent-blue);
 }

.holder {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
}

.uploadText {
   font-size: 18px;
   text-align: center;
   font-weight: bold;
   font-family: Arial, Helvetica, sans-serif;
   margin:0;
}

.upload input[type="file"] {
   display: block;
   margin: 10px auto;
}

.progressContainer {
   text-align: center;
   width: 100%;
}


.uploadBox {
   position: relative;
   width: 250px; /* Adjust as needed */
   height: 250px; /* Adjust as needed */
   border: 2px dashed #ccc;
   background: white;
   text-align: center;
   display:inline-block;
}

.uploadBox > * {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%); /* Center horizontally and vertically */
}

.holder, 
.uploadText, 
.upload, 
.filereader, 
.formdata, 
.progress, 
.progressContainer, 
canvas {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%); /* Overlapping centered elements */
}