/** COLORS **/

* {
    color: var(--ephemeral-textcolor);
}

textPath {
    fill: var(--ephemeral-textcolor);
    /* font-style: italic; */
    cursor: ew-resize;
}


main {
    background-color:var(--ephemeral-bg);
    overflow: hidden;
}

.circle-cover-left {  
    background: rgb(255, 192, 203);
    /* background: linear-gradient(90deg, rgba(255, 192, 203, 1) 70%, rgba(255, 192, 203, 0) 100%); */
}

.circle-cover-right {
    background: rgb(255, 192, 203);
    /* background: linear-gradient(90deg, rgba(255, 192, 203, 0) 0%, rgba(255, 192, 203,1) 30%);  */
}

.circle-cover-left {  
    background: rgb(230, 230, 250);
    /* background: linear-gradient(90deg, rgba(230, 230, 250, 1) 70%, rgba(230, 230, 250, 0) 100%); */
}

.circle-cover-right {
    background: rgb(230, 230, 250);
    /* background: linear-gradient(90deg, rgba(230, 230, 250, 0) 0%, rgba(230, 230, 250,1) 30%);  */
}

/*** EPHEMERAL ****/

body {
    height: 100svh;
    width: 100vw;
    overflow: hidden;
}

/*** BIG ***/

.circle {
    width: 200%;
    overflow: visible;
    position: absolute;
    bottom: 0;
    left: 50%;
    pointer-events: none;
}

.circle-1 {

    transform: translate(-50%, 70%);
}

.circle-2 {
    transform: translate(-50%, 74%);
}

.circle-3 {
    transform: translate(-50%, 78%);
}

.circle-4 {
    transform: translate(-50%, 82%);
}


#circle-text textPath {
    font-size: 0.14rem;
    pointer-events: all;
}

.circle-cover {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.circle-cover-left,
.circle-cover-right {
    width: 25%;
}


/* CURSOR */

#cursorElement {
    position: absolute;
    z-index: 10;
    pointer-events: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 1;
    animation: fade 1s linear;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes fade {
    to {
        opacity: 0;
    }
}