html,
body {
  display: flex;
  justify-content: center; /* Horizontally center children */
  align-items: center; /* Vertically center children */
  font-family: Arial, sans-serif; /* A more modern default font */
  background-color: #f4f4f4; /* A light background color */

  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}

#appContainer {
  display: none;
  flex-direction: column;
  height: 100%;
}

#imageContainer {
  flex: 2; /* 2/3 of the screen */
  position: relative;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

#pickerCircle {
  position: absolute;
  pointer-events: none;
  width: 50px;
  height: 50px;
  display: none;
}

#uploadedImage {
  cursor: crosshair;
  max-width: 100%;
  display: block;
  transform-origin: top left;
}

#resultColor {
  flex: 1; /* 1/3 of the screen */
  border: 2px solid black;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

button {
  padding: 5px 20px;
  font-size: 48px;
  cursor: pointer;
  background: #888;
  color: white;
  touch-action: manipulation;
}

#imageUploader {
  padding: 15px 30px; /* Increase padding for a larger button */
  font-size: 24px; /* Bigger font size */
  cursor: pointer;
  border: none; /* Remove default borders */
  border-radius: 8px; /* Rounded corners */
  background-color: #007bff; /* Nice blue color */
  color: white; /* White text */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* A subtle shadow */
  transition: transform 0.1s, box-shadow 0.1s; /* Smooth hover transition */
  margin: 0px 20px; /* Center the button */
}

#imageUploader:hover {
  transform: translateY(-2px); /* Slight upward movement on hover */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1); /* Increased shadow on hover */
}

#imageUploader:active {
  transform: translateY(0); /* Reset position on active click */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Reset shadow on active click */
}