.blossom-button {
    position: relative;
    width:60px;
    height: 30px;
    background-color: #ffe4e1;
    border-radius: 30px;
    scale: 0.8;
    border: none;
    cursor: url('../static/cursor.cur'), auto; /* Custom cursor */
    transition: background-color 0.3s ease;
    margin-left: 0px; /* Add margin to the left for spacing */
}

.blossom-button i {
    color: #ff729f;
    font-size: 1em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    transition: transform 0.3s ease;
}

.blossom-button.active i {
    color: white; /* Change icon color when active */
}

.blossom-button::before {
    content: '';
    position: absolute;
    width: 30px; /* Adjust width to make it smaller */
    height: 30px; /* Adjust height to make it smaller */
    background-color: white;
    border-radius: 50%;
    top: 0px;
    left: 0px;
    transition: transform 0.3s ease;
}

.blossom-button.active {
    background-color: #ff729f;
}

.blossom-button.active::before {
    transform: translateX(30px);
}

#blossom_canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Ensure it doesn't interfere with other interactions */
    display: none; /* Hide by default */
}