body {
    background-color:rgba(88, 19, 19, 0.751);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0; }

.navbar {
    background-color: #501214 !important; /* Texas State Maroon */
    border-bottom: 3px solid #AC9155; /* Texas State Gold border at the bottom */
}

/* Navbar text color (Gold) */
.navbar a {
    color: #AC9155 !important; /* Texas State Gold */
}

/* Change color when hovering over the nav links */
.navbar a:hover {
    color: #fefcfc !important; /* Maroon on hover */
    background-color: #AC9155; /* Gold background on hover */
}

/* Ensure active nav link is also gold */
.navbar .nav-link.active {
    color: #faf9f8 !important; /* Texas State Gold */
    font-weight: bold; /* Optional: Make it bold for emphasis */
}

/* Optional: Styling for heading */
h2 {
    color: #7A0F33; /* Texas State Maroon */
    font-size: 2.5rem;
    font-weight: bold;
}

.ratio {
    border: 5px solid #F2C13B; /* Texas State Gold border around the video */
    border-radius: 10px; /* Rounded corners for the video container */
}

/* Style for the Track & Field Stories heading box */
.heading-box {
    background-color: #F8F9FA; /* Light gray background */
    border: 2px solid #7A0F33; /* Maroon border */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
    padding: 20px;
    margin-bottom: 40px; /* Add space below the heading box */
}

/* Style for the container of each story */
.story-container {
    margin-bottom: 30px; /* Space between each story container */
}

    .heading-box {
        background-color: #F8F9FA; /* Light gray background */
        border: 2px solid #7A0F33; /* Maroon border */
        border-radius: 10px; /* Rounded corners */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
        padding: 20px;
        margin-bottom: 40px; /* Add space below the heading box */
        margin-top: 80px; /* Add space above the heading box (adjust as needed) */
}

/* Style for each story container (individual box for each story) */
.story-container {
    margin-bottom: 30px; /* Space between each story container */
}

/* Style for each story box */
.story-box {
    background-color: #ffffff; /* White background for individual stories */
    border: 2px solid #7A0F33; /* Maroon border for each story box */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
    padding: 20px;
    margin-bottom: 30px; /* Space between stories */
}

/* Style for the images inside the story box */
.story-box img {
    margin-right: 20px;
    margin-bottom: 20px;
    max-width: 100%;
    height: auto;
}

/* Text styles within story boxes */
.story-box p {
    font-size: 1rem;
    line-height: 1.6;
}

/* Ensure the body background does not affect story boxes */
.container.my-6 {
    background-color: transparent; /* Make sure the background is transparent for the container */
    padding: 40px;
}

h2 {
    font-family: 'Arial', sans-serif;
    color: #7A0F33; /* Texas State Maroon */
}

/* Optional: Customize the description */
p.lead {
    font-family: 'Arial', sans-serif;
    color: #333;
    font-size: 1.2rem; }
    #home {
        position: relative;
        background-image: url('Track1.jpg'); /* Replace with your image path */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding: 6rem 2rem;
        color: #f8f9fa; /* Lighter gray for text */
        text-align: left; /* Left-aligned text */
        overflow: hidden; }
        
        #home .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3); /* Darker overlay */
            z-index: 1;
        }
        
        #home .content {
            position: relative;
            z-index: 2;
            padding-left: 2rem;
            max-width: 700px;
            color: white; /* Change text color to white */
        }
        
        #home h1 {
            font-size: 2.5rem;
            font-weight: bold;
            margin: 0;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Shadow effect */
            color: white; /* Make the heading white */
        }
        
        #home p {
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); /* Light shadow */
            color: white; /* Make the paragraph text white */
        }