/* 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 {
            color: steelblue;
            
                /* Sets the path to your image file #301A1A */
    background-image: url('images/homesword.jpeg'); 
    
    /* Prevents the image from repeating/tiling */
    background-repeat: no-repeat; 
    
    /* Scales the image to completely cover the screen */
    background-size: cover; 
    
    /* Centers the image vertically and horizontally */
    background-position: center; 
    
    /* Keeps the image fixed in place while scrolling */
    background-attachment: fixed; 
    
    /* Fallback color if the image fails to load */
    background-color: steelblue; 
        }
          /* Desktop-first base layout */
        .flex-wrapper {
            display: flex;
            flex-direction: row; /* Arranges columns horizontally by default */
            gap: 20px;
            
            max-width: 1000px;
            margin: 40px auto;
            border: 8px solid #301A1A;
            padding: 20px;
            box-sizing: border-box;
            background-color: rgba(255, 255, 255, 0.5);
        }

        .column {
            flex: 1; /* Assigns equal width to both desktop columns */
        }

        .column img {
            max-width: 100%;
            height: auto;
            display: block;
        }
       

        /* 📱 RESPONSIVE MOBILE STACKING RULES */
        /* Targets any screen that is 768px wide or narrower */
        @media (max-width: 768px) {
            .flex-wrapper {
                /* Flips the alignment from side-by-side to a vertical stack */
                flex-direction: column; 
                
                /* Trims the outer margin so it fits better on tiny touch screens */
                margin: 15px; 
                padding: 15px;
            }
            /* 🛠️ MOBILE VIDEO FIXES */
  .column {
    min-width: 0;          /* Prevents the column from locking at desktop width */
    width: 100%;           /* Forces column to take up full mobile width */
  }

  /* 1. Target the box holding the iframe to force a 16:9 ratio */
  .column-video-box {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Creates a perfect 16:9 box ratio (9 / 16 = 0.5625) */
    height: 0;
    overflow: hidden;
  }

  /* 2. Lock the iframe inside that responsive box padding */
  .column-video-box iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}