.header_buttonsurround.active {
    background-color: rgb(60,60,60);
}

.header_buttonsurround.active span{
    font-weight: 600;
    color: white;
}

/* idk what that does up there*/

.about_header::after {
    position: absolute;

    content: '';
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;

    background: linear-gradient(
        90deg,
        rgba(66, 66, 66, 0) 0%, 
        rgba(173, 218, 255, 0.13) 50%, 
        rgba(255, 255, 255, 0) 100%
    );

    transform: skewX(-25deg);
    animation: shine 5s infinite ease-in-out;
}

.project_content_project_history_within_history_text::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-left: 5px solid rgb(20,20,20);
}

.project_content_project_history_within_history_text:first-child::before {
    top: 50%;
}

.project_content_project_history_within_history_text:last-child::before {
    bottom: 50%;
}

.project_content_project_history_within_history_text::after {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-color: rgb(60,60,60);
    border: 2px solid rgb(20,20,20);
    border-radius: 50%;
    z-index: 1;
}


@keyframes shine {
    0% {
        left: -150%;
    }
    50% {
        left: 150%;
    }
    100% {
        left: 150%;
    }
}