body {
    background-color: #000000; /* Black background for the whole page */
    font-family: Arial, sans-serif; /* Clean, simple font */
    color: #ffffff; /* Ensuring main font color is white for contrast */
    margin: 0;
    padding: 20px;
}

a, .details-container a,
a:visited, .details-container a:visited { /* Updated to include visited links */
    color: #ffffff; /* White color for all links, including visited */
    text-decoration: none; /* No underlines on links to keep it clean */
}

a:hover, .details-container a:hover {
    text-decoration: underline; /* Underline on hover for clarity */
	color: #f7d101;
}

#main-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 20px;
}

.video-container {
    flex: 1; /* Allows video container to grow */
    padding: 10px;
}

.details-container {
    flex: 1; /* Allows details container to grow equally with video container */
    padding: 10px;
    background-color: #d41c94; /* Dark grey for details area, to differentiate from the black background */
    border-radius: 8px; /* Rounded corners for the details container */
    box-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Stronger shadow for depth, adjusted for dark theme */
    margin-left: 20px; /* Space between video and details containers */
}

.details-container h3, .details-container p {
    color: #ffffff; /* White text for details container for better contrast and readability */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    #main-container {
        flex-direction: column;
        align-items: center;
    }

    .details-container {
        margin-left: 0;
        margin-top: 20px;
    }
}