/* Light Mode */
:root {
--header-background-color: #f8f9fa;
--header-text-color: #333333;
--link-color: #007bff;
--body-background-color: #ffffff;
--body-text-color: #333333;
--blog-font-size: 20px; /* Increase the font size for the blog list */
--link-color-dark: #ffcc00; /* Dark mode link color */
--link-color-dark-active: #ffa500; /* Dark mode link color when clicked */
--blog-list-background-color-light: #f0f0f0; /* Light mode blog list background */
--blog-list-text-color-light: #333333; /* Light mode blog list text color */
--blog-list-background-color-dark: #444444; /* Dark mode blog list background */
--blog-list-text-color-dark: #ffffff; /* Dark mode blog list text color */
}

/* Dark Mode */
body.dark-mode {
--header-background-color: #212529;
--header-text-color: #ffffff;
--link-color: var(--link-color-dark); /* Use the new dark mode link color */
--body-background-color: #333333;
--body-text-color: #ffffff;
--blog-font-size: 20px; /* Ensure the font size is consistent in dark mode */
}

body {
margin: 20px; /* or any other value you prefer */
padding: 20px; /* or any other value you prefer */
font-family: Arial, sans-serif;
background-color: var(--body-background-color);
color: var(--body-text-color);
transition: background-color 0.3s ease, color 0.3s ease;
}

header {
background-color: var(--header-background-color);
color: var(--header-text-color);
padding: 10px;
text-align: center;
transition: background-color 0.3s ease, color 0.3s ease;
}

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}

nav li {
display: inline;
margin-right: 10px;
}

nav a {
text-decoration: none;
color: var(--link-color);
}

nav a:hover {
text-decoration: underline;
}

/* Checkbox Hack for Toggle */
.toggle-checkbox {
display: none;
}

.toggle-labels {
display: flex;
justify-content: center;
margin: 10px auto;
}

.toggle-label {
padding: 5px 10px;
background-color: #007bff;
color: #ffffff;
cursor: pointer;
border: 1px solid #007bff;
}

.toggle-label-left {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

.toggle-label-right {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}

body.dark-mode .toggle-labels .toggle-label-left {
background-color: #333;
color: #ffffff;
}

body.dark-mode .toggle-labels .toggle-label-right {
background-color: #007bff;
color: #ffffff;
}

/* Blog list font size and light/dark mode styles */
.blog-list li {
font-size: var(--blog-font-size);
background-color: var(--blog-list-background-color-light);
color: var(--blog-list-text-color-light);
padding: 10px;
margin-bottom: 5px;
border-radius: 5px;
}

body.dark-mode .blog-list li {
background-color: var(--blog-list-background-color-dark);
color: var(--blog-list-text-color-dark);
}

.blog-list li a {
color: var(--link-color);
}

body.dark-mode .blog-list li a {
color: var(--link-color-dark);
}

body.dark-mode .blog-list li a:active {
color: var(--link-color-dark-active);
}
  

/* Blog list sort */
.sort-options {
margin-bottom: 10px;
text-align: right;
}

.sort-options label {
margin-right: 5px;
}

.sort-options select {
padding: 5px;
font-size: 14px;
}