/* Reset default styles */
body, h1, p, ul, li {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    background-color: #36393e; /* Main background color */
    color: #ffffff; /* Default text color */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Minimum height of viewport */
}

.site-content {
    flex: 1; /* Flex grow to push the footer down */
}

header {
    background-color: #1e2124; /* Header background color */
    padding: 1em 0;
    text-align: center;
}

/* Logo size and placement styles */
#logo {
    height: 80px; /* Adjusted height based on the image provided */
    width: auto; /* Maintain aspect ratio */
    display: block; /* Change to block to center the logo */
    margin: 0 auto; /* Center the logo horizontally */
}

/* Navigation styling */
nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-left: 20px;
}

/* Navigation link styles, ensuring they are not blue */
nav a {
    color: #ffffff; /* Set the color to white */
    text-decoration: none;
    font-weight: bold;
    font-size: 1em; /* Set font size as needed */
}

/* Main content padding */
main {
    padding: 2em;
    text-align: center; /* Center the content in the main area */
}

/* Section containing the truss image */
.product-display h2 {
    color: #ffffff; /* Title text color */
    margin-bottom: 20px; /* Space below the title */
}

/* The wrapper for the truss image that provides the colored background */
.product-display .truss-image {
    display: block; /* Ensures no extra space below the image */
    margin: 20px auto; /* Centers the image and adds vertical spacing */
    background-color: #424549; /* The rectangle color behind the image */
    padding: 20px; /* Padding around the image to create the rectangle effect */
    max-width: calc(100% - 40px); /* Adjusts the width of the image taking padding into account */
    box-sizing: border-box; /* Includes padding in the width */
}

footer {
    background-color: #1e2124; /* Footer background color */
    color: #ffffff;
    text-align: center;
    padding: 1em 0;
    position: relative;
}

footer p {
    font-size: 16px;
}