body {
  font-family: "Playpen Sans Hebrew", cursive;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700'%3E%3Cdefs%3E%3ClinearGradient gradientTransform='rotate(-132, 0.5, 0.5)' x1='50%25' y1='0%25' x2='50%25' y2='100%25' id='gggrain-gradient2'%3E%3Cstop stop-color='hsla(231, 83%25, 49%25, 1.00)' stop-opacity='1' offset='-0%25'%3E%3C/stop%3E%3Cstop stop-color='rgba(255,255,255,0)' stop-opacity='0' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient gradientTransform='rotate(132, 0.5, 0.5)' x1='50%25' y1='0%25' x2='50%25' y2='100%25' id='gggrain-gradient3'%3E%3Cstop stop-color='hsl(55, 94%25, 54%25)' stop-opacity='1'%3E%3C/stop%3E%3Cstop stop-color='rgba(255,255,255,0)' stop-opacity='0' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3Cfilter id='gggrain-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.06' numOctaves='2' seed='2' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeColorMatrix type='saturate' values='0' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='colormatrix'%3E%3C/feColorMatrix%3E%3CfeComponentTransfer x='0%25' y='0%25' width='100%25' height='100%25' in='colormatrix' result='componentTransfer'%3E%3CfeFuncR type='linear' slope='3'%3E%3C/feFuncR%3E%3CfeFuncG type='linear' slope='3'%3E%3C/feFuncG%3E%3CfeFuncB type='linear' slope='3'%3E%3C/feFuncB%3E%3C/feComponentTransfer%3E%3CfeColorMatrix x='0%25' y='0%25' width='100%25' height='100%25' in='componentTransfer' result='colormatrix2' type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 23 -15'%3E%3C/feColorMatrix%3E%3C/filter%3E%3C/defs%3E%3Cg%3E%3Crect width='100%25' height='100%25' fill='hsl(286, 100%25, 50%25)'%3E%3C/rect%3E%3Crect width='100%25' height='100%25' fill='url(%23gggrain-gradient3)'%3E%3C/rect%3E%3Crect width='100%25' height='100%25' fill='url(%23gggrain-gradient2)'%3E%3C/rect%3E%3Crect width='100%25' height='100%25' fill='transparent' filter='url(%23gggrain-filter)' opacity='0.41' style='mix-blend-mode: exclusion'%3E%3C/rect%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  position: relative;
  max-width: 600px;
}

.green-box {
  position: relative;
  background-color: #ddfb65;
  border-radius: 30px;
  padding: 30px;
  /* width: 100%; */
  height: 100%;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.box-title {
  background-color: #2d0be5;
  color: #fff;
  text-align: center;
  padding: 10px 0px;
  font-weight: bold;
  border-radius: 15px;
  margin-bottom: 10px;
  width: 95%;
}

.icon {
  position: absolute;
  width: 60px;
  height: auto;
  z-index: 10;
}

.question-icon {
  top: -30px;
  right: -10px;
  transform: rotate(-10deg)
}

.star-icon {
  top: 250px;
  left: -30px;
  width: 12%;
}

.heart-icon {
  bottom: -15px;
  right: 10px;
  width: 12%;
  transform: rotate(10deg)
}

textarea {
  width: 90%;
  height: 120px;
  padding: 0.75rem;
  font-size: 1rem;
  margin-top: 1rem;
  background-color: #fff;
  border-radius: 8px;
  border: 1.5px solid #cddc39;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

button {
  all: unset;
  margin-top: 0.5rem;
  padding: 0.75rem 1.5rem;
  height: 4rem;
  width: 4rem;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s ease;
}
button :hover {
  transform: scale(1.05);
}
button :active {
  transform: scale(0.95);
}
button img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
#imageGallery {
  margin-top: 1rem;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
#imageGallery img {
  width: 100px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.hidden {
  display: none;
}
h1 {
  font-family: "Delius Swash Caps", cursive;
  font-size: 2.5rem;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  color: #2c3e50;
}
h2 {
  font-family: "Playpen Sans Hebrew", cursive;
  color: #2c3e50;
  font-weight: 350;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

#questionSelect {
  width: 30rem;
  padding: 0.6rem 1.8rem 0.6rem 1rem;
  font-size: 1rem;
  border: 1.5px solid #cddc39;
  border-radius: 10px;
  background-color: #fff;
  color: #2c3e50;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="%23333"><path d="M2 4l4 4 4-4z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  width: 95%;
}
li {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
ul {
  padding-right: 2.5rem;
  padding-left: 1rem;
  margin-top: 0;
}
h4 {
  margin-bottom: 0.5rem;
}
.clusterResult {
  width: 34rem;
  padding: 0.2rem 1rem 0.2rem;
  border: 2px solid #cddc39;
  border-style: dashed;
  text-align: center;
}

#result h4 {
text-align: center;
}

li { 
   margin-bottom: 30px;  
}