/* Basic reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, button, input, textarea {
    font-family: 'Montserrat', sans-serif;
    color: #333;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

.container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin: 0 auto;
    padding: 20px;
}

aside.sidebar {
    width: 200px;
    padding: 20px;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    height: 100vh;
    position: fixed;
    overflow-y: auto;
}

main {
    flex-grow: 1;
    margin-left: 220px;
    padding: 20px;
}

.profile img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: block;
    margin: 0 auto 20px; /* Spacing below the image */
}

.profile h3 {
    font-size: 1.5rem; /* Increase the font-size as desired */
    text-align: left; /* Align the text to the left */
    margin: 10px 0; /* Adjust top and bottom margin as needed */
}

nav ul {
    list-style: none;
    padding: 0;
    margin-bottom: 20px; /* Spacing below the nav */
}

nav ul li {
    margin-bottom: 10px;
}

nav ul li a {
    text-decoration: none;
    color: #333;
    display: block;
}

/* .social-links { */
    /* display: flex; */
    /* justify-content: center; Center icons horizontally */
    /* gap: 20px; Spacing between icons */
    /* margin-bottom: 20px; Spacing below the icons */
/* } */

.social-links {
    display: flex;
    align-items: center; /* Align the icons vertically in the center */
    gap: 10px; /* Space between the icons */
}

.social-links a {
    color: #333;
    font-size: 1.5rem;
}

aside.sidebar {
    /* ... other styles ... */
    text-align: left; /* Aligns everything in the sidebar to the left */
}

.section-heading {
    font-size: 1.5rem;
    margin-bottom: 20px; /* Spacing below section heading */
    display: block; /* Use block to allow the full width line */
    padding-bottom: 5px; /* Space above the line */
    border-bottom: 1px solid #e1e1e1; /* Consistent line styling with entries */
    width: calc(100% - 40px); /* Adjusts width based on parent padding */
    box-sizing: border-box; /* Includes padding and border in the element's width */
}

#projectResearch {
    margin-top: 30px; /* 1.5 times the margin-bottom of .entry */
}

#aboutText a {
    color: #0066cc;
}

.section-content {
    margin-bottom: 30px; /* Spacing below section content */
}

.filter-controls {
    margin: 20px 0 30px; /* Spacing above and below the filter controls */
    display: flex;
    gap: 10px; /* Spacing between filter tags */
}

.filter {
    padding: 5px 10px;
    border: 1px solid #ccc;
    background-color: #f4f4f9;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}

.filter:hover, .filter.active {
    background-color: #e1e1e1;
    color: #333;
}

.entry {
    display: flex;
    align-items: flex-start; /* Aligns the thumbnail and text at their top edges */
    margin-bottom: 30px; /* Margin-bottom is now 1.5 times larger than the margin between two adjacent entries */
    padding-bottom: 20px; /* Space above the horizontal line */
    border-bottom: 1px solid #e1e1e1; /* Horizontal line below the entry */
}

.entry-thumbnail {
    height: 150px; /* Fixed height for the thumbnail */
    width: auto; /* Width is set to auto to preserve aspect ratio */
    margin-right: 20px; /* Spacing between the thumbnail and the text */
}

.entry-text {
    flex-grow: 1;
}

.entry-title {
    font-weight: bold;
    margin-bottom: 5px; /* Spacing below the title */
}

.entry-description {
    color: #555; /* Dark grey or choose your preferred color */
}

.entry-links {
    margin-top: 5px; /* Space above the links */
}

.entry-links a {
    text-decoration: none; /* No underline by default */
    color: #0066cc; /* Color for the link */
    margin-right: 10px; /* Spacing between the links */
    border-bottom: 1px dashed #0066cc; /* Optional dashed underline for links */
    padding-bottom: 1px; /* Small padding to offset the dashed line slightly */
}

.entry-links a:hover {
    border-bottom: 1px solid #0066cc; /* Solid underline on hover */
}

/* Additional entry details styling goes here */