:root{
  --kuromi_width: 90%;
  --buttons_width: 90%;
}

body {
  color: white;
  background-color: purple;
}

header {
  background-color: #000;
  margin: 5px;
  text-align: center;
  padding: 5px;
}

.kuromi_dressup {
  width: 100%;
}

#image {
  position: relative; /* Allows child images to be positioned absolutely */
  width: var(--kuromi_width); /* Set the width for the image container */
  height: 1000px; /* Set a height (you can adjust this based on your needs) */
  margin: 0 auto; /* Centers the container horizontally */
  overflow: hidden; /* Hides any content that goes outside the container */
}

#image img {
  position: absolute; /* Allows layering of images */
  top: 0; /* Adjust the position as needed */
  left: 0; /* Adjust the position as needed */
  width: 100%; /* Or set the width based on the size you want */
  height: auto; /* Maintain the image aspect ratio */
}

#buttons {
  width: var(--buttons_width);
  margin: 20px auto; /* Centers the buttons and adds space below the image */
}

.kuromi_dressup .check_group {
  width: var(--buttons_width);
  border-radius: 15px;
  background-color: grey;
  margin: 10px;
  padding: 10px;
}

label {
  display: block;
  font-size: 3.5rem; /* Increase font size of labels */
  padding: 10px; /* Add padding to make it easier to tap */
  cursor: pointer; /* Make it clear it's clickable */
  user-select: none; /* Prevent text selection on labels */
}

input[type="checkbox"] {
  width: 30px; /* Make the checkbox larger */
  height: 30px; /* Make the checkbox larger */
  margin-right: 10px; /* Space between checkbox and label text */
  vertical-align: middle; /* Align checkbox with label text */
}

/* Add a hover effect to make the labels feel interactive */
label:hover {
  background-color: #555;
  border-radius: 5px;
}

input[type="checkbox"]:checked + label {
  color: #f0f0f0; /* Change color when checked */
}