/* Modern CSS Reset & Layout Utilities */


body {
    margin: 0;
    padding: 0;
    border: 0;
    /* Adding this helps prevent horizontal scrollbars on mobile */
    overflow-x: hidden; 
    -webkit-text-size-adjust: 100%;
}

#container, #framecontainer, #masthead, #sidebar, #content, #footer {
    margin: 0;
    padding: 0;
    border: 0;
    /* Ensures padding doesn't increase the width of the box */
    box-sizing: border-box; 
}

#masthead {
    padding: 5px;
}

/* --- Responsive Float Utilities --- */

.float_right {
    float: right;
    margin-left: 15px;
    margin-bottom: 10px;
    max-width: 100%; /* Prevents image from being wider than the screen */
    height: auto;
    display: block;
}

.float_left {
    float: left;
    margin-right: 15px;
    margin-bottom: 10px;
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- Mobile Fix for Floats --- */
@media screen and (max-width: 600px) {
    /* On small screens, we stop floating and center images instead */
    .float_right, .float_left {
        float: none;
        margin: 10px auto;
        display: block;
        max-width: 90%; /* Leaves a little breathing room on the sides */
    }
}

/* Clearfix: Use this on parent divs that contain floated elements */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}