:root {
    --line-fill-color: #54c3ea;  
    --line-color: #fff;  
    --marker-icon-color: #54c3ea; 
    --title-color: #54c3ea; 
    --time-color: #f6f7f8;
    --post-background: #000;
    --post-description: #f6f7f8;
}

.timeline-container {
    width: 100%;
    position: relative;
}

.timeline-line, .timeline-segment {
    position: absolute;
    width: 4px;
    background-color: red;
    left: 50%;
    margin-left: -2px;
    visibility: visible;
    z-index: 5;
}

.timeline-marker {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: transparent;
    z-index: 5;
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    border-radius: 50%;
    border: none;
}

.rotating-path {
    animation: rotate 2s linear infinite;  
    transform-origin: 50% 50%;  
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);  
    }
    100% {
        transform: rotate(360deg);  
    }
}

.scp_post_content {
    position: relative;
    width: 45%;
    padding: 20px;
    background-color: var(--post-background);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.scp_post_desc {
    color: var(--post-description);
}

.scp_post_title {
    color: var(--title-color);
    font-weight: 700; 
}

.scp_post_time {
    color: var(--time-color); 
}

.scp_post_content.left {
    left: 0;
}

.scp_post_content.right {
    left: 55%;
}

.scp_post_content.right .scp_post_content_inner {
    text-align: left;  
}

.scp_post_content.left .scp_post_content_inner {
    text-align: right;  
    direction: rtl;  
}

.scp_post_content.left .scp_post_desc img {
    float: none;  
    display: inline-block;  
    margin-left: 10px; 
}

.scp_post_content.right .scp_post_desc img {
    float: none;  
    display: inline-block;  
    margin-right: 10px; 
}

@media (max-width: 768px) {
    .scp_post_content {
        width: 75%;  
        margin-left: 20px;
        margin-right: 0;
        text-align: left;  
        float: none;  
        margin-bottom: 20px;  
    }

    .scp_post_content.left .scp_post_content_inner {
        text-align: left;
        direction: rtl;
    }
	
    .scp_post_content.right {
        text-align: left;  
        left: 0;
    }
	
    .scp_post_content.right .scp_post_desc img { 
        margin-left: 5px; 
    }
	
    .scp_post_content.left .scp_post_desc img { 
        margin-left: 5px; 
    }

    .timeline-line {
        left: 90%;
    }
}