html, body {
    background-color: pink;
}

#backbutton {
    /* position: absolute; */
    z-index: 999;
    position: fixed;
    /* z-index: 9999999; */
    width: 80px;
    height: 80px;
    left: 23px;
    top: 10px;
}

#vasecontainer-wrapper {
    position: absolute;
    left: 0; 
    top: 20px;
    width: 100vw;
    height: 100vh;
    z-index: 0;
}

#vasecontainer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: relative; 
}

#vasewrapper {
    display: flex;
    justify-content: center;
    align-items: center; 
    position: relative;

}

.vase {
    width: 500px;
    /* width: 30vw; */
    /* position: absolute;
    left: 5px;
    top: 0; */
    /* clip-path: polygon(0% 10%, 30% 25%, 15% 45%, 25% 45%, 0 70%); */
}


#pinkLeftFl {
    width: 500px;
    /* width: 30vw; */
    position: absolute;
    left: 0px;
    top: 0;
    clip-path: polygon(6% 25%, 10% 20%, 15% 18%, 26% 20%, 27% 23%, 23% 24.5%, 21.5% 30%, 20% 35%, 
    17% 40%, 12% 43%, 13% 45%, 15% 47.5%, 17% 48%, 23% 48%, 24% 49%, 19% 50%, 15% 50.5%, 16.5% 53%, 
    16.5% 57%, 14% 63%, 11.5% 61.5%, 12% 58%, 11% 56%, 8% 59%, 6.5% 64%,5% 64%,3% 61%, 4% 57%, 5% 56%,
     5% 54.5%, 4% 55%, 3% 56%,  1% 58%,  0% 58%, -4% 56%, -2% 45%, 2.5% 40%, 3% 37%, 3% 34%, 5% 31%, 3.5% 29%, 4% 27%);
}

.pinkpurple {
    opacity: 0;
    width: 500px;
    /* width: 30vw; */
    position: absolute;
    left: 0px;
    top: 0;
    pointer-events: none;
    
}

/* #pinkpurple:hover {
    display: block;
    visibility: visible;
} */

#pinkLeftFl:hover ~ .pinkpurple {
    opacity: 1;
}

#orchid {
    width: 500px;
    /* width: 30vw; */
    position: absolute;
    background-color: black;
    opacity: 0; 
    left: 0px;
    top: 0;
    clip-path: polygon(80% 13%, 91% 16%, 91% 20%, 95% 19%, 99% 23%, 95% 29%,
     80% 41%, 65% 40%, 62% 47%, 59% 55%, 56% 55%, 59% 46%, 61% 40%, 53% 35%, 
     53% 30%, 59% 24%);
}

.orchidpath {
    opacity: 0;
    width: 500px;
    /* width: 30vw; */
    position: absolute;
    left: 0px;
    top: 0;
    pointer-events: none;
}

#orchid:hover ~ .orchidpath {
    opacity: 1;
}

#yellowfl {
    width: 500px;
    /* width: 30vw; */
    position: absolute;
    background-color: black;
    opacity: 0; 
    left: 0px;
    top: 0;
    clip-path: polygon(37% 14%, 49% 14%, 47% 25%, 50% 27%, 49% 30%, 44% 34%, 
    45% 45%, 44% 48%, 45% 56%, 42% 56%, 39% 47%, 37% 45%, 37% 40%, 40% 37%,
     37% 34%, 33% 31%, 31% 25%, 36% 21%, 34% 17%);
}

.yellowpath {
    opacity: 0;
    width: 500px;
    /* width: 30vw; */
    position: absolute;
    left: 0px;
    top: 0;
    pointer-events: none;
}

#yellowfl:hover ~ .yellowpath {
    opacity: 1;
}

#purplefl {
    width: 500px;
    /* width: 30vw; */
    position: absolute;
    background-color: black;
    opacity: 0; 
    left: 0px;
    top: 0;
    clip-path: polygon(57% 4%, 62% 5%, 64% 12%, 61% 16%, 67% 12.5%, 72% 14%, 
    73% 20%, 66% 22%, 66% 24%, 57% 30%, 56% 34%, 55% 47%, 54% 55%, 54% 56%, 
    52% 56%, 52% 49%, 53% 36%, 50% 27%, 44% 24.5%, 43% 20%, 44% 16%, 50% 14%,
     56% 16%, 56% 13%,  52% 12%, 53% 5%);
}

.purplepath {
    opacity: 0;
    width: 500px;
    /* width: 30vw; */
    position: absolute;
    left: 0px;
    top: 0;
    pointer-events: none;
}

#purplefl:hover ~ .purplepath {
    opacity: 1;
}





/* .pinkpurple:hover {
    opacity: 1;
} */

/* #pinkLeftFl:hover + .purpleboarder + #pinkpurple {
    display: block; 
    background-color: rgb(200, 29, 57);
    /* mask-image: url(Untitled_Artwork\ 4.png); */
    /* border-color: black; */
    /* left: 20px;
    top: 0px; 
} */

.purpleboarder {
    display: none;
    width: 500px;
    /* width: 30vw; */
    position: absolute;
    left: 5px;
    top: 0;
}

.pinkLeftBorder {
    display: none; 
    background-color: rgb(200, 29, 57);
    opacity: 1;
    width: 500px;
    /* min-width: 300px; */
    /* width: 30vw; */
    height: 500px;
    clip-path: polygon(6% 25%, 10% 20%, 15% 18%, 26% 20%, 27% 23%, 23% 24.5%, 21.5% 30%, 20% 35%, 
    17% 40%, 12% 43%, 13% 45%, 15% 47.5%, 17% 48%, 23% 48%, 24% 49%, 19% 50%, 15% 50.5%, 16.5% 53%, 
    16.5% 57%, 14% 63%, 11.5% 61.5%, 12% 58%, 11% 56%, 8% 59%, 6.5% 64%,5% 64%,3% 61%, 4% 57%, 5% 56%,
     5% 54.5%, 4% 55%, 3% 56%,  1% 58%,  0% 58%, -4% 56%, -2% 45%, 2.5% 40%, 3% 37%, 3% 34%, 5% 31%, 3.5% 29%, 4% 27%);
    position: absolute;
    left: 25px;
    top: 35px;
}



/* #pinkLeft{
    background-color: rgb(200, 29, 57);
    opacity: 0;
    width: 500px;
    height: 500px;
    clip-path: polygon(6% 25%, 10% 20%, 15% 18%, 26% 20%, 27% 23%, 23% 24.5%, 21.5% 30%, 20% 35%, 
    17% 40%, 12% 43%, 13% 45%, 15% 47.5%, 17% 48%, 23% 48%, 24% 49%, 19% 50%, 15% 50.5%, 16.5% 53%, 
    16.5% 57%, 14% 63%, 11.5% 61.5%, 12% 58%, 11% 56%, 8% 59%, 6.5% 64%,5% 64%,3% 61%, 4% 57%, 5% 56%,
     5% 54.5%, 4% 55%, 3% 56%,  1% 58%,  0% 58%, -4% 56%, -2% 45%, 2.5% 40%, 3% 37%, 3% 34%, 5% 31%, 3.5% 29%, 4% 27%);
    position: absolute;
    border-radius: 30px;
    left: 25px;
    top: 35px;
}

#pinkLeft:hover {
    opacity: 0.3;
} */

/* 
#styledtable {
    border-collapse: collapse;
} */