/* style.css */

* {
  box-sizing: border-box;
}

body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background-color: #222; /* Dark background */
    color: #eee; /* Light text color */
    float: left;
}
a {
    color: blue; /* Light blue link color */
    text-decoration: none; /* Remove underlines */
}
a:hover {
    text-decoration: underline; /* Add underline on hover */
}
.page-title {
    text-align: center;
    color: #fff; /* White page title */
}

.container {
    background-color: #333; /* Darker container background */
    margin: 20px;
    margin-bottom: 20px;
    float: left;

}

.video-story {
    width: 33.33%;
    display: flex; /* Use flexbox to position video and text side by side */
    float: left;
    margin: 10px auto;
    padding: 10px;
}
.video-container {
}
.story-summary {
    width: 100%;
    color: #bbb;
    background-color: #aaa;
}

iframe {
    border-color: #aaa;
    width: 100%;
    height: 100%;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .video-story {
        flex-direction: column; /* Stack video and text vertically */
        align-items: stretch; /* Allow items to take full width */
    }
    .video-container,
    .story-summary {
        max-width: 100%; /* Allow video and text to take full width on mobile */
    }
}


.notUsed {
    margin: 0;
    max-width: 50%; /* Limit the text's width on larger screens */
    width: 33.33%;
    line-height: 1.6;
    flex: 1; /* Allow the text to take up available space */
    flex: 1; /* Allow the text to take up available space */
    flex: 1; /* Allow the text to take up available space */

}