/* Farmer container */
.farmer-container {
  position: relative;
  width: 400px;
  height: 400px;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Farmer image container */
.farmer-image-container {
  position: relative;
}

/* Farmer image */
.farmer-image-container img {
  max-width: 100%;
  max-height: 100%;
  height: auto; /* Maintain aspect ratio */
  z-index: 1; /* Farmer -> Selected Garments -> Bullseyes */
}

.bullseye {
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #fff;
  border: 2px solid #333;
  border-radius: 50%; /* Make it circular */
  transition: box-shadow 0.3s ease; /* Add transition for hover effect */
  z-index: 3; /* Farmer -> Selected Garments -> Bullseyes */
}

.farmer-container .bullseye:hover {
  box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.8); /* Glow effect */
}

/* Horizontal and vertical lines in the bullseye */
.bullseye::before,
.bullseye::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #333;
  top: 50%;
  left: 0;
}

/* Rotate one of the lines from horizontal to vertical, creating a '+' */
.farmer-container .bullseye::before {
  transform: rotate(90deg);
}

/* Headwear */
.farmer-container .bullseye.head {
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
}

/* Tops */
.farmer-container .bullseye.upper {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Bottoms */
.farmer-container .bullseye.lower {
  bottom: 25%;
  left: 50%;
  transform: translateX(-50%);
}

.farmer-container .bullseye.hidden {
  display: none;
}

.switches {
  position: absolute;
  bottom: 20px;
  left: 50;
  display: flex;
  align-items: center;
  margin-bottom: -50px;
}

.gender-switch-container,
.bullseye-switch-container {
  display: flex;
  align-items: center;
  margin-right: 3rem; /* Spacing between switch containers */
}

.gender-label,
.bullseye-label {
  margin: 0 5px; /* Spacing between the labels and the switch */
}

/* Media Query for Smaller Desktops */
@media screen and (max-width: 1366px) {
  .content-container {
    flex-direction: column; /* Set flex-direction to column on tablets */
  }

  .farmer-container {
    width: 300px; /* Set a fixed width for the farmer model */
    margin: 0 auto;
  }

  /* Head/Hats position */
  .farmer-container .bullseye.head {
    width: 1.3rem;
    height: 1.3rem;
    top: 15%;
  }

  .farmer-container .bullseye.upper {
    width: 1.3rem;
    height: 1.3rem;
    top: 50%;
  }

  .farmer-container .bullseye.lower {
    width: 1.3rem;
    height: 1.3rem;
    top: 62%;
  }

  .switches {
    bottom: 80px;
  }
}

/* Media Query for Mobile */
@media screen and (max-width: 480px) {
  /* Head/Hats position */
  .farmer-container .bullseye.head {
    width: 1rem;
    height: 1rem;
    top: 20%;
  }

  .farmer-container .bullseye.upper {
    width: 1rem;
    height: 1rem;
    top: 50%;
  }

  .farmer-container .bullseye.lower {
    width: 1rem;
    height: 1rem;
    top: 60%;
  }
}

/* Media Query for Extra Small Mobile */
@media screen and (max-width: 320px) {
  .wardrobe {
    grid-template-columns: repeat(1, 1fr);
    margin: 0 0 1rem 0;
  }

  .farmer-container {
    width: 100%;
    max-width: 250px;
    margin: 0 auto;
  }

  .gender-switch-container,
  .bullseye-switch-container {
    margin: 0 1rem; /* Spacing between switch containers */
  }
}