/* Reset default margin and padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Ensures padding and border are included in element's total width and height */
}

/* Center content and limit width */
.container {
    max-width: 1000px;
    margin: 0 auto; /* Center align the container */
    padding: 20px; /* Add some padding around the content */
    position: relative; /* Position relative for footer positioning */
    min-height: 100vh; /* Minimum height of container to occupy full viewport height */
}

/* Default styles */
BODY {
    FONT-SIZE: 10pt;
    COLOR: #202020;
    FONT-FAMILY: Verdana, Arial, Helvetica;
    BACKGROUND-COLOR: #ffffff;
    line-height: 1.5; /* Improve readability */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

TD {
    FONT-SIZE: 10pt;
    COLOR: #202020;
    FONT-FAMILY: Verdana, Arial, Helvetica;
}

/* Heading text styles */
.HeadingText {
    FONT-WEIGHT: bold;
    FONT-SIZE: 20pt; /* Example larger font size for headings */
    COLOR: #202020;
    margin-bottom: 10px; /* Add some space below headings */
}

/* Body text styles */
.BodyText {
    FONT-SIZE: 12pt; /* Example smaller font size for body text */
    COLOR: #202020;
    margin-bottom: 15px; /* Add space between paragraphs */
}

/* Large statement text styles */
.LargeStatementText {
    FONT-SIZE: 16pt; /* Example larger font size for large statements */
    COLOR: #202020;
    margin-bottom: 20px; /* Add more space below large statements */
}


.contact-info {
    margin-bottom: 20px; /* Optional: Add margin to bottom for spacing */
}

.info-row {
    clear: both; /* Clear float */
    margin-bottom: 3px; /* Spacing between rows */
}

.info-label {
    float: left; /* Float left */
    width: 110px; /* Fixed width for label column */
}

.info-value {
    float: left; /* Float left */
}

/* Spacer styles */
.spacer {
    display: block;
    width: 100%;
    background: transparent;
}

/* Links styles */
A:link,
A:visited,
A:active {
    COLOR: #202020;
    FONT-FAMILY: Verdana, Arial, Helvetica;
    TEXT-DECORATION: none;
}

A:hover {
    COLOR: #202020;
    FONT-FAMILY: Verdana, Arial, Helvetica;
    TEXT-DECORATION: underline;
}

/* Responsive adjustments */
@media screen and (max-width: 800px) {
    .container {
        padding: 10px; /* Adjust padding for smaller screens */
    }

    .HeadingText {
        FONT-SIZE: 18pt; /* Adjust heading font size for smaller screens */
    }

    .BodyText {
        FONT-SIZE: 10pt; /* Adjust body text font size for smaller screens */
    }

    .LargeStatementText {
        FONT-SIZE: 14pt; /* Adjust large statement font size for smaller screens */
    }

    /* Center aside below main on smaller screens */
    main {
        display: flex; /* Use flexbox for layout */
        flex-direction: column; /* Arrange items vertically */
        align-items: center; /* Center items horizontally */
    }

    aside {
        width: 100%; /* Take full width */
        margin-top: 20px; /* Add space above aside */
        text-align: center; /* Center contents horizontally */
        align-self: flex-end; /* Align aside to the bottom */
    }
    

    /* Remove fixed positioning on footer */
    footer {
        position: static; /* Reset to default position */
    }
    
    .spacer {
        display: none;
    }
    
}

/* Float aside to the right on larger screens */
@media screen and (min-width: 801px) {
    main {
        float: left; /* Float main content to the left */
        width: 70%; /* Set main content width */
    }

    aside {
        float: right; /* Float aside content to the right */
        width: 30%; /* Set aside content width */
        text-align: center; /* Center contents horizontally */
        align-self: flex-end; /* Align aside to the bottom */
    }

    /* Fixed footer on large screens */
    footer {
        position: fixed;
        top: 450px; /* Distance from top */
        max-width: 1000px;
        text-align: left;
    }
}

/* Override for the special page aside */
@media screen and (min-width: 801px) {
    .special-aside {
        width: 50%; /* Override aside width to 45% */
    }

    .special-main {
        width: 50%; /* Override main width to 55% */
    }
}