body {
    background-color: darkslategray;
    font: normal 10px Verdana, Arial, sans-serif;
    
}

.title{
  color: white;
  font-size: 100px;
  text-align: center;
}

.description{
  color: white;
  font-size: 15px;
  text-align: center;
  margin-bottom: 5px;
}

.uploader {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: fit-content;
  margin: auto;
}

.uploader *{
  margin: 0 auto;
  text-align: center;
}

.preview-container {
  width: 350px;
  height: 400px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;    
  align-items: center;           
  justify-content: center;      
  background: #fafafd;
}

.preview-container.empty-state {
  border: 2px dashed #bbb;
  background: #fafafd;
}

/* When image is uploaded */
.preview-container.has-image {
  border: 2px solid #4CAF50;
  background: #f8fff8;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2);
}

/* Optional: Loading state */
.preview-container.loading {
  border: 2px solid #2196F3;
  background: #f0f8ff;
}

/* Hide title when image is present */
.preview-container.has-image .uploader_title {
  display: none;
}

.preview-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}


.uploader_input {
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  pointer-events: none; /* keeps screen-readers intact[17] */
}

.uploader_label,
.uploader_submit {
  display: inline-block;
  height: 48px;
  line-height: 48px;
  min-width: fit-content;
  padding: 0 1.5rem;
  background: #1e88e5;
  color: #fff;
  border-radius: 0.4rem;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  font-family: inherit;
  transition: filter 0.2s;
  text-align: center;
  margin: 0.5rem 0.25rem 0 0.25rem;
  box-sizing: border-box;
}

.uploader_label:hover,
.uploader_submit:hover {
  filter: brightness(1.1);
}

.uploader_form {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.rating-section{
  width: 100%;
  height: 50px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;    
  align-items: center;           
  justify-content: center;      
  background: #fafafd;
  margin: 0;
  padding: 0;
  margin: 0.5rem 0.25rem 0 0.25rem;
}