body, html {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  justify-content: center; /* Center vertically */
  align-items: center; /* Center items horizontally */
  background-color: #fe45e1;
}

header {
  width: 100%;
  padding: 10px 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center; /* Center header content */
  align-items: center;
}

header .logo-container {
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  align-items: center; /* Center items horizontally */
  text-align: center; /* Center text for smaller elements */
}

#logo {
  width: 200px; /* Adjust width as needed */
  height: auto; /* Maintain aspect ratio */
  margin: 0.5em 0 0em; /* Adjust space between logo and title */
}

header .logo-title {
  font-size: 4rem;
  margin: 0em 0 0;
}

header .tool-title {
  font-size: 2rem;
  margin: 0.5em 0;
}

main.content, .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%; /* Take the full width */
  flex: 1; /* Grow to use available space */
  padding: 20px;
  border: 2px solid #000;
}

.tip-container {
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  align-items: center; /* Center items horizontally */
  text-align: center; /* Center text for smaller elements */
}

.tip-container p, .tip-container h1 {
  margin-top: 5px; /* Reduces top margin */
  margin-bottom: 5px; /* Reduces bottom margin */
}

footer {
  width: 100%;
  padding: 10px 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center; /* Center footer content */
  gap: 20px; /* Space between items */
}

footer a {
  margin: 0 10px; /* Additional control over spacing, if needed */
  /* Style links as needed */
}

#imageContainer {
  width: 600px;
  height: 400px;
  position: relative;
  margin-top: 20px;
  overflow: hidden;
  border: 3px dashed #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}

#baseImage, #hatImage {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
}

#hatImage {
  transform-origin: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block; /* Makes the hat visible from the start */
}

input[type="file"], input[type="range"], button {
  margin: 10px 0;
  cursor: pointer;
}

label {
  margin-top: 20px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  header .logo-title, header .tool-title {
    font-size: 2rem; /* Smaller font sizes for mobile */
  }

  #imageContainer {
    width: 90%; /* More flexible width for smaller screens */
    height: auto; /* Adjust height automatically */
  }

  input[type="file"], input[type="range"], button {
    margin: 15px 0; /* Larger touch targets */
    padding: 10px; /* Larger touch targets */
  }

  #logo {
    width: 150px; /* Smaller logo on small screens */
  }

  #baseImage, #hatImage {
    max-width: 100%; /* Ensure images don't exceed container width */
    height: auto; /* Maintain aspect ratio */
  }
}