:root {
    --theme-purple: #a172a6;
    --theme-black: #171717;
    --theme-blue: #b0f6ff;
    --theme-purple-invis: #a172a69a;
    --theme-black-invis: #1717179a;
    --theme-blue-invis: #b0f6ff9a;
}

@keyframes shine {
    to {
        background-position: 200% center;
    }
}

@keyframes dropdown-title {
    from {transform: translateY(-100vh);}
    to {transform: translateY(0);}
}

.shiny {
    background: linear-gradient(to right, var(--theme-purple) 20%, var(--theme-black) 35%, var(--theme-black) 35%, var(--theme-purple) 50%, var(--theme-purple) 50%, var(--theme-blue) 75%, var(--theme-purple) 90%);
    background-size: 200% auto;
    animation: /*dropdown-title 1.5s ease-in-out, */shine 2.5s linear infinite;
    @apply overflow-hidden bg-clip-text max-w-min text-transparent;
}

.title {
    @apply md:text-7xl lg:text-8xl text-6xl h-fit max-h-fit mx-auto m-0 p-0 text-center;
}

#avatar-border {
    --angle: 0deg;
    animation: rotate 5s cubic-bezier(.13,.82,.87,.18) infinite;
    background-image: linear-gradient(var(--angle), #a172a6 20%, #d0faeb 60%, #a172a6 100%);

}
#bg-gradient {
    background: linear-gradient(to bottom, #00000000 0%, #00000000 5%, #171717cc 35%, #171717ea 55%, #171717ff 85%);
}



.arrow {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    border-style: solid;
    border-color: white;
    border-width: 0px 1px 1px 0px;
    transform: rotate(45deg);
    transition: border-width 150ms ease-in-out; 
}

.arrow:hover {
    border-bottom-width: 4px;
    border-right-width: 4px; 
}

.blurred {
    filter: blur(10px);
}


@keyframes rotate {
    to {
        --angle: 360deg;
    }
}
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}