/* General body styles */
body {
    font-family: 'Helvetica', 'Arial', sans-serif;
    background-color: #333; /* Dark grey background */
    color: #f5f5f5; /* Off-white text */
    margin: 0;
    padding: 0;
    display: flex;
    min-height: 100vh;
    width: 100%; /* Ensure full width */
    align-items: flex-start; /* Align items at the start of the cross axis */
}

/* Container styles */
#container {
    display: flex;
    flex-direction: row;
    width: 100%; /* Ensures the container takes full width */
    align-items: flex-start; /* Aligns items at the top */
}

/* Sidebar styles */
#sidebar {
    width: 150px; /* Fixed width */
    background-color: #555;
    padding: 20px;
    height: 100vh;
}

#main-content {
    flex-grow: 1;
    display: flex;
    justify-content: flex-start; /* Aligns content at the top vertically within main-content */
    flex-direction: column; /* Stacks children vertically */
    align-items: center; /* Aligns children center horizontally within main-content */
    min-height: 100vh; /* Optional, for full height */
    padding: 50px;
    max-width: 600px; /* Limits the width of the main content for narrower paragraphs */
    margin: 0 auto; /* Centers the main content horizontally */
    line-height: 1.6; /* Improves readability with increased line spacing */
}

/* Navigation styles */
ul.navigation {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

ul.navigation li a {
    color: #f5f5f5;
    text-decoration: none;
    display: block;
    margin: 10px 0;
}

ul.navigation li a:hover {
    text-decoration: underline;
}

/* Hyperlink styles */
a {
    color: #FFD700; /* Gold color for links */
    text-decoration: none;
}

a:hover {
    text-decoration: underline; /* Adds underline on hover */
}

/* Button-like link styles */
.button {
    padding: 10px 15px;
    background-color: #555;
    color: white;
    border-radius: 5px;
    display: inline-block;
}

/* Post styles */
.post {
    margin: 20px auto;
    width: 80%;
    padding: 20px;
    border-bottom: 1px solid #444; /* Subtle line between posts */
}

h2 {
    color: #FFD700; /* Different color for headings */
}

/* Paragraph styles for blog readability */
#main-content p {
    margin-bottom: 1em !important;
    text-align: justify; /* Aligns text for better paragraph flow */
}