.container {
  width: 220px;
  height: 310px;
  transition: all 0.1s;
  position: relative;
}
.overlay {
  position: absolute;
  width: 220px;
  height: 310px;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 219, 112, 0.8) 45%,
    rgba(132, 50, 255, 0.6) 50%,
    transparent 54%
  );
  filter: brightness(1.1) opacity(0.8);
  mix-blend-mode: color-dodge;
  background-size: 150% 150%;
  background-position: 100%;
  transition: all 0.1s;
}
.card {
  width: 220px;
  height: 310px;
  background-image: url("bharvest.jpg"); /* Set the default background image */
  background-size: cover;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Default shadow */
}

/* Style for the file input button */
#imageInput {
  display: block;
  margin: 20px auto; /* Adds space around the button */
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#imageInput:hover {
  background-color: #0056b3;
}

/* Responsive design for mobile devices */
@media (max-width: 600px) {
  .container {
    width: 100%; /* Adjust the width for mobile devices */
    height: auto;
  }

  .overlay,
  .card {
    width: 100%;
    height: auto;
  }

  #imageInput {
    font-size: 14px; /* Adjust the font size for better readability on smaller screens */
  }
}

/* Styles for body to set up Flexbox */
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* Full viewport height */
  margin: 0; /* Remove default margin */
  background: #f0f0f0; /* Optional: background color */
}