/* Tested and installed 2/20/2025*/
/*-START stewcrossen.css -------------------------------------------------------*/
/* -Original design: 1024px (v3.0 - Apr 24, 2008) ----------------- */
/* A free xhtml/css website template by Andreas Viklund and stylishtemplate.com */
/* For more information, see http://andreasviklund.com/templates/1024px/ ------ */

/* ---------- GENERAL ------------------------ */
body {
    background: #FFF;
    font: 1rem 'Roboto', Verdana, Tahoma, Arial, sans-serif; /* Changed from 76% */
    line-height: 1.3em;
    margin: 0 auto;
    padding: 0;
}

a {
    color: #4088b8;
    font-weight: 700;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a img {
    border: 0;
}

p {
    margin: 0 0 18px 0; /* Removed 10px left margin for better alignment */
}

ul, ol, dl {
    font-size: 0.9em;
    margin: 2px 0 16px 35px;
}

blockquote {
    border: 1px solid #dadada;
    font-size: 0.9em;
    margin: 20px 10px;
    padding: 8px;
}

blockquote p {
    margin: 0;
}
/* ---------- GENERAL END -------------------- */

/* ---------- HEADER ------------------------- */
h1 {
    color: #4088b8;
    font-size: 3.6em;
    letter-spacing: -2px; /* Reduced negative letter-spacing */
    text-align: center; /* Centered for better balance */
    margin: 20px auto; /* Adjusted for better centering */
    width: 80%; /* Ensures it aligns well with the video container */
}

h2 {
    color: #4088b8;
    font-size: 1.4em;
    letter-spacing: -1px;
    text-align: center; /* Centered for better balance */
    margin: 20px 0 10px 15px;
}

h3 {
    color: #4088b8;
    font-size: 1.3em;
    font-weight: 700;
    margin: 10px 0 8px;
    padding: 1px 2px 2px 3px;
}
/* ---------- HEADER END --------------------- */

/* ---------- TEXT CLASSES ------------------- */
.text {
    color: #000000;
    font-size: 1.15em;
    text-align: center; 
    margin: 20px 0;
    padding: 20px 30px;
    line-height: 1.4em;
}

.textbold {
    color: #000000; /* Redundant but kept for explicit styling */
    font-size: 1.25em;
    font-weight: 700;
    margin: 45px 0 0 0; /* Removed large left margin */
    padding: 0 0 0 10px;
    line-height: 1.1em;
}

.copyright {
   color: #4088b8;
    font-size: 1.2em;
    text-align: center; /* Centered for better balance */
    margin: 20px 0 10px 15px
}

/* ---------- TEXT CLASSES END --------------- */

/* ---------- MAIN WRAP ---------------------- */
#wrap {
    color: #4088b8;
    margin: 10px auto;
    padding: 0;
    width: 90%;
    max-width: 1200px; /* Added max-width for better large screen readability */
}

#header {
    padding-top: 40px;
}

#content h3, #contentalt h3 {
    margin: 10px 0 8px;
}
/* ---------- MAIN WRAP END ------------------ */

/* ---------- ADDITIONAL CLASSES ------------- */
.fade {
    color: #c8c8c8;
}

.gray {
    color: gray;
}

.justify {
    text-align: justify;
}
/* ---------- ADDITIONAL CLASSES END --------- */

/* ---------- VIDEO CONTAINER --------------- */
.video-container {
    margin: 20px auto;
    width: 80%; /* Retained but may change in media queries */
    position: relative;
    overflow: hidden;
}

.video-container iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; /* Maintains proper aspect ratio */
    display: block;
}
/* ---------- VIDEO CONTAINER END ------------ */

/* ---------- RESPONSIVE LAYOUT -------------- */
/* Group all media queries for easy management */

@media (max-width: 768px) {
    /* Adjust the header and text for smaller screens */
    h1 {
        font-size: 2.5em;
        text-align: center; /* Centered header for smaller screens */
        margin: 0 auto; 
        width: 80%; /* Ensure the width matches the video container */
    }

    h2 {
        font-size: 1.2em;
        text-align: center; /* Centered header for smaller screens */
    }

    h3 {
        font-size: 1.1em;
    }

    .text {
        padding: 15px;
        font-size: 1em;
    }

   /* Make video container take full width on mobile */
    .video-container {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding-bottom: 56.25%;
    }
    
    .video-container iframe {
        height: 100%;
        position: absolute; /* Ensures proper scaling */
        top: 0;
        left: 0;
    }

}
/* ---------- RESPONSIVE LAYOUT END ---------- */

/* ---------- CSS END ------------------------ */