.post-preview .video-thumbnail {
    max-width: 300px; /* Increase the width of the thumbnail */
    height: auto;
    display: block;
    margin-bottom: 10px;
    float: left; /* Left-align the thumbnail */
    margin-right: 15px; /* Add some space between the thumbnail and the text */
}

.post-preview .post-content-preview {
    overflow: hidden; /* Ensure the text wraps properly */
    clear: both; /* Ensure the text starts below the floated image */
    margin-top: 10px; /* Add some space above the text */
    font-size: 18px; /* Adjust this value as needed */
    line-height: 1.6; /* Optional: improve readability */
}

.site-heading h1 {
    color: yellow; /* The color of your text */
    -webkit-text-stroke: 1px black; /* The width and color of the stroke */
    -webkit-text-fill-color: yellow; /* Ensures the fill color remains yellow */
}

.site-heading .subheading {
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black background */
    color: #FFFFFF; /* White text color */
    padding: 1px; /* Padding around the text */
    border-radius: 5px; /* Optional: Rounded corners */
    display: inline-block; /* Ensures the background only covers the text */
    text-shadow: none; /* Remove text shadow for better clarity */
    font-weight: bold; /* Makes the text bold */
    font-size: 1.2em; /* Adjust the font size as needed */
}

.header-background {
    background-color: black;
    position: relative;
}

.header-background .intro-header {
    background-color: transparent; /* Ensures the header itself is transparent */
    background-blend-mode: overlay; /* Ensures the image overlays on the black background */
    background-size: cover; /* Ensures the image covers the header area */
    opacity: 0.8; /* Optional: Set this if you want a slightly transparent image */
}

.intro-header {
    background-size: contain; /* Ensures the image fits within the container */
    background-repeat: no-repeat;
    background-position: center;
    width: 50%; /* Adjust the width as needed */
    padding-top: 50.25%; /* Aspect ratio for a 16:9 image. Adjust this as needed */
    position: relative;
    margin: 0 auto; /* Centers the header image */
    display: block; /* Ensures the header image is treated as a block element */
}

.intro-header .container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.text-with-outline {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

.post-image {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.video-thumbnail-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 20px 0;
  }
  
  .video-thumbnail-container {
    display: inline-block;
  }
  
  .video-thumbnail {
    max-width: 100%;
    height: auto;
  }

.custom-list {
    list-style-type: none; /* Removes the bullet markers */
    padding: 0; /* Removes default padding */
}

.custom-list li {
    margin-bottom: 20px; /* Adds space between items, optional */
}