body {
    margin: 0;
    font-family: 'Arial Narrow', sans-serif;
	background-color: #0c0c0c; /* Set your desired background color here */
}

.timestamp-text {
    color: #9b8f88; /* Set your desired color for the timestamp here */
}

.video-container {
	
    display: flex;
    justify-content: center;
    align-items: center;
 	height: 100vh; /* Full viewport height */
    /*height: 250px; /* Adjust the height as needed */
    /*width: 250px; /* Adjust the width as needed */
}

.animation-container {
    position: fixed;
    bottom: 50px;
    left: 50px;
border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: rgba(255, 255, 255, 0.05);
    width: 350px;
    height: 150px;
    padding-left: 20px;
    overflow-y: auto;
}

.animation-container::-webkit-scrollbar {
    width: 12px; /* Set a width for the scrollbar */
}

.animation-container::-webkit-scrollbar-thumb {
    background-color: transparent; /* Make the thumb transparent */
}

.animation-container::-webkit-scrollbar-track {
    background-color: transparent; /* Make the track transparent */
}


.fade-in-text {
    font-size: 20px;
    color: #deea4c;
    opacity: 0; /* Start with zero opacity, making the text invisible */
    animation: fade-in 2s ease forwards;
}

.blinking-cursor {
    animation: blink 1s infinite;
}

.fade-out-text {
    animation: fade-out 1s ease forwards;
}

@keyframes fade-in {
    from {
        opacity: 0; /* Start with zero opacity */
    }
    to {
        opacity: 1; /* Fully reveal the text */
    }
}


@keyframes blink {
    50% {
        opacity: 0;
    }

}

@keyframes fade-out-delayed {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Update the animation property to use the delayed fade-out */
.fade-in-text.delayed-fade-out {
    animation: fade-out-delayed 2s ease forwards;
}

@keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}