/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image:url('black bg.gif');
  text-align: center;
  
  color: white;
  font-family: Verdana;
}

.video-container {
    display: flex; /* Activates Flexbox on the container */
    justify-content: space-around; /* Distributes items evenly with space around them */
    align-items: center; /* Aligns items vertically in the center */
    flex-wrap: wrap; /* Allows items to wrap to the next line on smaller screens (optional, but good for responsiveness) */
}

.video-item {
    width: 30%; /* Adjust width based on the number of videos (e.g., 30% for three videos, leaving space for margins/padding) */
    padding: 10px; /* Adds space around each video */
    box-sizing: border-box; /* Ensures padding/border are included in the 30% width */
}

/* Ensure the iframe itself is responsive within its container */
.video-item iframe {
    width: 100%;
    height: auto; /* Maintain aspect ratio */