:root {
    --text-color: #B1B1ED;
    --bg-color: #060608;
    --circulate-size: 30px;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Krona One', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
    letter-spacing: 0em;
    text-align: center;
    ;
}

canvas {
    z-index: -5 !important;
    position: absolute !important;
    top: 0px !important;
    left: 0px !important;

}

.hero {
    width: 100vw;
    height: 100vh;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-color);
    z-index: -3;
}

.hero_main {
    width: 665px;
    height: 665px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero__hidden-circle {
    position: absolute;
    background-color: var(--bg-color);
    width: 665px;
    height: 665px;
    border-radius: 100%;
    z-index: -1;
}

.hero__color-circle-1 {
    position: absolute;
    background-color: #8FFFD0;
    width: 663px;
    height: 663px;
    border-radius: 100%;
    z-index: -2;
    /* transform: translate(0, -16px); */
    opacity: 0;
    transition-duration: 1s;
}

.hero__color-circle-2 {
    position: absolute;
    background-color: #474FFF;
    width: 663px;
    height: 663px;
    border-radius: 100%;
    z-index: -2;
    /* transform: translate(0, -16px); */
    opacity: 0;
    transition-duration: 1s;
}

.transform__wheel {
    animation: circulate 2s linear infinite;
    opacity: 1;

}

.transform__wheel-2 {
    animation: circulate2 3s linear infinite;
    opacity: 1;
}

.hero__upload {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
    transition-duration: 0.2s;
}

.emphasis {
    transform: translateY(-10px);
}

.hero__upload__circle {
    position: absolute;
}

@keyframes circulate {

    0% {
        transform: translate(0, -25px);
    }

    25% {
        transform: translate(25px, 0);
    }

    50% {
        transform: translate(0, 25px);
    }

    75% {
        transform: translate(-25px, 0);
    }

    100% {
        transform: translate(0, -25px);

    }
}

@keyframes circulate2 {
    0% {
        transform: translate(25px, 0);
    }

    25% {
        transform: translate(0, 25px);
    }

    50% {
        transform: translate(-25px, 0);
    }

    75% {
        transform: translate(0, -25px);

    }

    100% {
        transform: translate(25px, 0);
    }
}

.dissapear {
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    transform: scale(2);
    opacity: 0;
}

.remove {
    display: none;
}

.appear {
    animation: appear 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;

}

.rotate {
    animation: rotate 1.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;

}

@keyframes appear {
    from {
        transform: scale(0.7);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes rotate {
    from {
        transform: rotate(40deg);

    }

    to {
        transform: rotate(0deg);

    }
}


.control {
    position: absolute;
    width: 100vw;
    bottom: 0px;
    height: 46px;
    color: var(--text-color);
    /* background-color: var(--bg-color); */
    display: flex;
    align-items: center;
    align-content: center;
    font-size: 16px;
    padding-top: 1px;
    /* border-top: 2.2px solid #B1B1ED; */
    mix-blend-mode: difference;

}

.none {
    display: none;

}

.slideUp {
    animation: slideUp 0.6s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    display: flex;

}

.control:hover {
    opacity: 1;
    transition-duration: 0.4s;
}

.control__arrow {
    margin-left: 20px;
    cursor: pointer;
    transition-duration: 0.2s;
}

.control__arrow:hover {
    margin-top: -8px;
}

.control__line {
    margin-left: 20px;
    width: 2.3px;
    height: 20px;
    background-color: var(--text-color);
}

.control__name__container {
    white-space: nowrap;
    overflow-y: scroll;
    width: 40vw;
}

.control__name {
    margin-left: 20px;
    text-align: left;

}


@keyframes marquee {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-100%, 0);
    }
}



.control__play {
    position: absolute;
    left: calc(100vw/2 - 18px);
    cursor: pointer;
    transition-duration: 0.2s;
}

.control__play:hover {
    margin-top: -8px;
}


@keyframes slideUp {
    from {
        bottom: -46px;
    }

    to {
        bottom: 0px;
    }

}

.fadeOut {
    opacity: 0;
    transition-duration: 0.4s;
}

.fadeIn {
    opacity: 1;
    transition-duration: 0.4s;
}

.fadeOutLong {
    opacity: 0;
    transition-duration: 0.4s;
    transition-delay: 5s;
}

/* @keyframes fadeOut {
    from {
        opacity: 0;
    }

    to {
        opacity: 100%;
    }

} */