/* General styling */
html {
    height: 100%;
    margin: 0;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure body takes up full height of the viewport */
    position: relative;
}

/* Sidebar styling */
.sidebar {
    background-color: #FF6400;
    width: 10px; /* Sidebar width matches the header height */
    position: fixed;
    top: 0;
    bottom: 0; /* Extend sidebar to bottom */
    left: 0;
    height: 100%; /* Extend height dynamically with the content */
}

/* Content styling */
.content {
    margin-left: 10px;
    padding: 20px;
    flex-grow: 1; /* Ensures the content takes up available space */
    box-sizing: border-box;
}

/* Style for the figure container element */
.figure-container {
    margin: 20px 0; /* Adds spacing above and below the figure */
    text-align: center; /* Centers the figure content */
    padding-bottom: 20px; /* Adds 20pt padding below the caption (between images) */
}

/* Style for the image inside the figure container */
.figure-container img {
    max-width: 70%; /* Ensures the image is responsive */
    max-height: 500px; /* Constrains the image to a maximum height */
    height: auto; /* Maintains the image's aspect ratio */
    border: 0px solid #ccc; /* Optional: Adds a border around the image */
    padding: 5px; /* Adds some padding around the image */
    border-radius: 5px; /* Optional: Rounds the corners */
}

/* Style for the figcaption inside the figure container */
.figure-container figcaption {
    font-style: italic; /* Italicizes the caption */
    color: #555; /* Light grey text for the caption */
    margin-top: 10px; /* Adds space between the image and caption */
    font-size: 0.9em; /* Makes the caption slightly smaller */
    text-align: center; /* Center-justifies the caption */
    padding-bottom: 20px; /* Adds padding below the caption */
}

/* Header styling */
/* Left-align the logo */
.header {
    background-color: #FF6400; /* Keep your chosen orange */
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Change to flex-start for left alignment */
    padding-left: 5px; /* Optional: add some padding if needed */
    width: 100%; /* Ensure header is full width */
    box-sizing: border-box;
}

.logo {
    height: 100px;
}

/* Menu styling */
ul.menu {
    list-style-type: none;
    padding: 0;
}

ul.menu li::before {
    content: '\f1b2'; /* Unicode for the checkmark icon */
    font-family: 'FontAwesome';
    color: #FF6400;
    list-style-type: none;
    margin: 10px 0;
    margin-right: 10px;
}

ul.menu li a {
    text-decoration: none;
    color: #333;
    font-size: 18px;
    font-weight: bold; /* This will make the text bold */
}

ul.menu li a:hover {
    color: #FF6400;
}

/* Footer styling */
    .footer {
        background-color: #FF6400;
        height: 100px;
        width: 100%; /* Ensure the footer takes the full width */
        display: flex; /* Enable Flexbox */
        align-items: center; /* Vertically center the content */
        justify-content: center; /* Horizontally center the content */
        box-sizing: border-box;
        position: relative;
        bottom: 0;
        left: 0;
    }

    /* Ensure the image scales properly */
    .footer img {
        max-height: 100%; /* Ensure the image fits within the footer height */
        width: auto; /* Maintain aspect ratio */
        height: auto; /* Ensure proper scaling */
    }

    /* Optional styling for the figure container */
    .figure-container {
        margin: 0; /* Remove default figure margins */
        padding: 0;
    }

/* CSS to achieve the three-column layout */
.three-column-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal-width columns */
    gap: 10px; /* Optional: Adjust spacing between columns */
    list-style-type: none;
    padding-left: 0;
}

.three-column-grid li {
    margin-bottom: 5px;
    display: flex; /* Use flexbox for proper alignment */
    align-items: center; /* Vertically center the icon, text, and thumbnail */
    padding-left: 25px; /* Add space for the icon */
    position: relative;
}

.three-column-grid li::before {
    content: '\f03e'; /* Replace this with the Unicode of your chosen icon */
    font-family: 'FontAwesome'; /* Specifies the FontAwesome font */
    color: #FF6400; /* Optional: Change icon color */
    font-size: 16px; /* Optional: Adjust icon size */
    margin-right: 10px; /* Add space between icon and text */
}

.three-column-grid a {
    text-decoration: none;
    text-align: left;
    display: flex; /* Use flexbox to horizontally align the text and thumbnail */
    align-items: center; /* Vertically align text with the thumbnail */
}

.three-column-grid a:hover {
    color: #FF6400;
}

.three-column-grid img.thumbnail {
    width: 50px; /* Set thumbnail width */
    height: auto; /* Keep aspect ratio */
    margin-left: 10px; /* Add space between the text and the thumbnail */
    border: 2px solid #ddd; /* Optional border around thumbnail */
    border-radius: 5px; /* Optional rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional shadow */
}