.button{
    fill:#d4baae;
}

.button:hover{
    fill: #874f9f;
}

.hover-object{
    cursor: pointer;
    pointer-events: fill; 
    /* transition: all ease 0.3s; */
}

.quad{
    fill: #d6c5de;
}
.quad:hover{
    fill: url(#grad-quad)
}

.quad-one{
    fill:#1d1d1b;
}
.quad-one:hover{
    fill:url(#grad-quad-one)
}

.quad-two{
    fill: #c6d3e7;
}
.quad-two:hover{
    fill:url(#grad-quad-two)
}

.quad-three{
    fill:  #982c3a;
}
.quad-three:hover{
    fill:url(#grad-quad-three)
}

.quad-four{
    fill: #e8385b;
}
.quad-four:hover{
    fill: url(#grad-quad-four);
}

body {
    height: 235vh;
    width: 270vw;
    margin: 0;
    place-items: center center;
    overflow:visible
}

.click-content{
    position:absolute;
    top: 8vh;
    left: 0;
    height: 200vh;
}

.floating-image{
    position:absolute;
    height: 240vh;
    top: -15.5vh;
    left: -35vh;
    pointer-events: none;
}

#loader {
    background: #000 url(asset/loader.gif);
    background-size: 60%;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    position:relative;
    z-index: 100;
}