/* The animations created 3 css errors due to the features being too new for the validators?
 Sorry! We found the following errors (3)
URI : TextArea
25		Unrecognized at-rule @property
43	.github-button::after, .github-button::before	Value Error : background-image var(--angle) is not a conic-gradient value )
63		Unrecognized at-rule @property */ 




/* github button animations  */ 
.github-button {
    background-color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .5rem;
    align-items: center;
    position: relative;
    border-radius: 5px;
    width: fit-content;
    padding: .5rem 1rem;
    color: white;
}

.github-button:hover {
    box-shadow: 0 0 1.25rem rgba(200, 100, 255, 0.6);
}

.neptune:hover {
    text-shadow: 0 0 .625rem rgba(190, 100, 255, 0.7);
}

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.github-button::after,
.github-button::before {
    content: '';
    position: absolute;
    height: calc(100% + .125rem);
    width: calc(100% + .125rem);
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: -1;
    border-radius: 5px;
    background-image: conic-gradient(from var(--angle), #7700ff, #bcbab3, #7700ff,
     #d7d6d2, #7700ff);
    animation: 4s rotate-button linear infinite;
}

.github-button::before {
    filter: blur(.35rem);
    opacity: 1;
}

@keyframes rotate-button {
    from {
        --angle: 0deg;
    }

    to {
        --angle: 360deg;
    }
}

/* chatbox radiant glow animations */
@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.section-one::after,
.section-one::before {
    content: '';
    position: absolute;
    height: calc(100% + .5rem);
    width: calc(100% + .5rem);
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: -1;
    border-radius: 2rem;
    background-image: conic-gradient(from var(--angle), #c2b1e7, #03f695, #0268f5, #f60290, #c2b1e7);
    animation: 4s rotate linear infinite;
}

/*white  purple/pink green  white
#dcd8e6,  #981aae, #03f695, #dcd8e6
*/

.section-one::before {
    filter: blur(2.5rem);
    opacity: .5;
}

@keyframes rotate {
    from {
        --angle: 0deg;
    }

    to {
        --angle: 360deg;
    }
}

/* hi i'm neptune sliding text  */
.animation {
    animation:
        typewriter 4s steps(150) .25s 1 normal both;
}

@keyframes typewriter {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

/* text sliding animations "your friendly self-hosted llm" */
.locally-hosted {
    position: relative;
    margin: 0 auto;
    font-size: 1.875rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);
}

/* text sliding animations "your friendly self-hosted llm" */
.locally-hosted {
    animation:
        typewriter2 3s steps(150) 2.25s 1 normal both;
}

@keyframes typewriter2 {
    from {
        width: 0;
    }

    to {
        width: 50ch;
    }
}

/* type a prompt blinker  */
.type-a-prompt {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    /* width: 0; */
    border-right: 1px solid rgba(20, 16, 16, 0.75);
    animation:
        type-loop 8s steps(50) 6s infinite,
        blinking-cursor .75s step-end infinite;
}

/* "start typing a prompt" button repeat animation  */
@keyframes type-loop {
    0% {
        width: 0;
    }

    30% {
        width: 16.5ch;
    }

    100% {
        width: 16.5ch;
    }
}

/* "start typing a prompt" button blink animation  */
@keyframes blinking-cursor {

    from,
    to {
        border-right-color: transparent;
    }

    50% {
        border-right-color: rgba(176, 173, 179, 0.75);
    }
}

/* start chatting animation */
.start-chatting {
    color: #ffffff;
    animation: glowing-animation 8s linear infinite;
}

@keyframes glowing-animation {
    0% {
        text-shadow: 
            0 0 .375rem rgba(255, 120, 60, 0.50),
            0 0 .875rem rgba(255, 150, 90, 0.50);
    }

    20% {
        text-shadow: 
            0 0 .375rem rgba(80, 180, 255, 0.50),
            0 0 .875rem rgba(110, 200, 255, 0.50);
    }

    45% {
        text-shadow: 
            0 0 .4375rem rgba(120, 70, 220, 0.50),
            0 0 .9375rem rgba(150, 90, 240, 0.50);
    }

    70% {
        text-shadow: 
            0 0 .4375rem rgba(60, 255, 150, 0.50),
            0 0 .9375rem rgba(90, 255, 180, 0.50);
    }

    100% {
        text-shadow: 
            0 0 .375rem rgba(255, 90, 140, 0.50),
            0 0 .875rem rgba(255, 120, 170, 0.50);
    }
}