a#colorpicker-btn:hover{
    transform: scale(0.9) rotate(60deg);
}
a#colorpicker-btn:hover path{
    fill: url(#Gradient2)!important;
    stroke-opacity : 1; 
}


#colorpicker-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9998;
    background: linear-gradient(-90deg, var(--black), #000000);
    align-items: center;
    opacity: 0;
    pointer-events: none;
}
.thumb {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 80vh;
    width: 80vh;
    filter: blur(30px);
    pointer-events: none;
    
}
.thumb img{
    height: 80vh;
    width: 80vh;
    transform: rotate(-45deg) scale(2);
    opacity: 0;
    pointer-events: none;
    
}
.colorVal {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(0px, -50%);
    display: flex;
    padding: calc((var(--global-space)) * 0.2) calc((var(--global-space)) * 1);
    width: 100%;
    flex-direction: revert;
    justify-content: space-between;
    font-size: 0.7rem;
    opacity: 0.4;
    text-transform: uppercase;
    letter-spacing: 0.6rem;
}
#canv{ 
    display:none;
  }

.color-selected {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(3) rotate(45deg);
    /* background-color: var(--tonic); */
    height: 30%;
    width: 20%;
    pointer-events: none;
    opacity: 0;
    z-index: 9;
}

div#close-colorpicker-btn {
    position: fixed;
    right: calc((var(--global-space)) * 1);
    top: calc((var(--global-space)) * 1);
    opacity: 0.4;
    cursor: pointer;
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
}