/* All images are created by Femke Schaap using Adobe Illustrator */
body {
    display: flex;
    justify-content: center;
    background-color: #eff7fa;
}

h1 {
    margin: 15px;
    width: 750px;
    transform: translateX(-150px);
    font-size: 1.75em;
}

/* The drop area is referred to as "Your bouquet" to make it clear for the user that this is where they need to drag the flower to */
h2 {
    align-self: last baseline;
    width: 300px;
    margin-left: 150px;
    margin-bottom: 20px;
    margin-top: 20px;
    transform: translateX(20px);
    font-size: 1em;
}

/* An additional explanation is give to communicate the purpose and instructions of the interaction */
p {
    height: 65px;
    width: 650px;
    align-content: space-around;
    align-self: center;
    background-color: lightcoral;
    border-radius: 50px;
    padding: 30px;
    font-size: .8em;
}

#balloon {
    height: 25px;
    width: 60px;
    background-color: lightcoral;
    border-radius: 100%;
    align-self: center;
    margin-right: 7px;
    margin-left: 2px;
    transform: translateY(40px);
}

/* In the future, the flowers could be arranged as soon as they have been picked and more flowers could be added to make it more appealing */
.dropArea {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    border-radius: 700px;
    border: solid rgb(240, 156, 156) 4px;
    height: 200px;
    width: 800px;
    position: relative; 
    right: 320px;
    padding: 30px;
    margin: 50px;
}

/* The area to drop the flowers back is extended to outside the soil so that is more logical and intuitive for the user.  */
.soilDropBack {
    width: 600px;
    height: 250px;
    border-radius: 20%;
    z-index: 1;
    display: flex;
    flex-direction: row;
    position: absolute;
    justify-content: center;
    margin-top: 20%;
}

.soil {
    display: flex;
    flex-direction: row;
    position: absolute;
    align-self: center;
    margin-top: 50%;
    height: 30%;
    width: auto;
    z-index: 0;
}

/* In the future, displaying the name of the flower as soon as the drag starts would be a good implementation. Also, an animation of the 
flower being picked would be a good addition to make the design more visually appealing */
.flowerWrapper {
    display: flex;
    flex-direction: row;
    align-self: center;
    justify-content: space-evenly;
    cursor: pointer;
    position: absolute;
    top: 335px;
    z-index: 2;
}

/* When the user hovers over the flower, an additional instruction appears */
.flowerWrapper .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
  }

.flowerWrapper:hover .tooltiptext {
    visibility: visible;
  }

  .highlight {
    border: solid lightcoral 6px;
  }