/* Universal styles */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Root font size variables */
:root {
    --fs-1: .75rem;
    --fs-2: .875rem;
}

/* Basic styling */
body {
    display: flex;
    justify-content: center;
    align-items: stretch;
    min-height: 100vh;
    margin: 0;
    font-family: helvetica, sans-serif;
}

/* Link styling */
a { 
    color: #0CCCF3;
    text-decoration: none; 
}

/* Headings */
h1 { 
    font-weight: bold;
    border-bottom: 1px solid #bbb;
    padding: 0 0 10px 0;
}

h2 {
    font-weight: normal;
    margin: 30px 0 0;
}

/* Paragraph styling */
p.date { 
    color: #ccc;
    font-family: georgia, serif;
    font-size: var(--fs-1);
    font-style: italic; 
}

/* Pagination */
.pagination { 
    margin: 40px 0; 
    font-weight: bold;
}

/* Error list */
.errorlist { 
    color: #cc0033;
    float: left;
    clear: both;
    padding-left: 10px; 
}

/* Sidebar */
.sidebar {
    background: #11cf8c;
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid #ddd; /* Default mobile border */
    height: 100%;
}

/* Main container layout for mobile */
.container {
    display: flex;
    flex-direction: column; /* Stack sidebar and content vertically on mobile */
    width: 100%;
}

/* Content */
.content {
    flex: 1;
    padding: 15px; /* Adjusted padding for mobile */
    margin-right: 0;
}

/* Title link */
.post_title_link {
    font-weight: bold;
}

/* Media queries for larger screens */
@media screen and (min-width: 768px) {
    .container {
        flex-direction: row;  /* Change to row layout on larger screens */
    }

    .sidebar {
        flex: 0 0 10vw;
        border-bottom: none;
        border-right: 1px solid #ddd; /* Right border for larger screens */
        text-align: left;  /* Left align sidebar content */
    }

    .content {
        padding: 20px;     /* Adjust content padding for larger screens */
        margin-right: 20vw;
    }
}