body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
}

.container {
    display: flex;
    height: 100vh;
}

.left-bar {
    background-color: #ffffff;
    width: 20%;
    max-width: 165px; /* Set a maximum width for the left bar */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Center contents vertically */
    padding-top: 20px;
}

.logo-container {
    width: 100%; /* Set the width of the container to 90% of the blue bar's width */
    padding-top: 100%; /* This ensures the container's height is proportional to its width, making it square */
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* Use position relative for aspect ratio padding trick */
}

.logo {
    width: 90%; /* Adjust this value if you need to make the logo itself larger or smaller */
    height: auto;
    position: absolute; /* Absolute positioning to center the logo inside the container */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 20px; /* Adjust as needed to fine-tune spacing */
}

.button-container a {
    display: block; /* Make anchor tags behave like block elements */
    width: 100%; /* Ensure the width matches the buttons */
    text-align: center; /* Center-align text if needed */
    padding: 0; /* Remove any default padding */
    margin: 0; /* Remove any default margin */
}

.nav-button {
    width: 80%; /* Adjust the size of the buttons */
    margin: 10px 0; /* Space between buttons */
}

.main-content {
    width: 80%;
    padding: 20px;
    background-color: #f5f5f5;
    position: relative;
}

.header-container {
    width: 100%;
    display: flex;
    align-items: center;
    padding-left: 1%; /* Keep this for horizontal spacing */
    transform: translateY(calc(50% - 16%)); /* Adjust to center the header */
}

.header {
    width: 50%;
    max-width: 330px; /* Set a maximum width for the header */
    height: auto; /* Set the height to be half of the logo container's height */
}

.introduction {
    margin-top: 10%; /* Adjust spacing as needed */
    line-height: 1.6; /* Adjust line height for better readability */
    font-size: 1rem; /* Adjust the font size */
}

.introduction h1 {
    font-size: 1.5rem; /* Adjust the font size for the heading */
    color: #333333; /* Change color if needed */
    margin-bottom: 15px; /* Adjust spacing */
}

.introduction p {
    margin-bottom: 10px; /* Add spacing between paragraphs */
    color: #000000; /* Change color if needed */
}

.species-images {
    display: block;
    margin-top: 20px;
}

.species-images img {
    width: 100%; /* Set the width to 100% to make images equal in width */
    height: auto; /* Maintain the aspect ratio */
    max-width: 800px; /* Set the maximum width for the image */
    max-height: 600px; /* Set the maximum height for the image */
    margin-bottom: 20px; /* Space between the two images */
    border-radius: 8px; /* Optional: Adds rounded corners to the images */
}