:root {
    /* Light theme colors */
    --text-color: #000;
    --background-color: #f7f7f7
    --link-color: #000;
    --link-hover-color: #4dd1ae;
    --header-font-size: 35px;
    --sub-header-font-size: 14px;
    /* Default font families */
    --main-font-family: 'courier', serif;
    --accessible-font-family: 'verdana', sans-serif;
    --font-family-used: var(--main-font-family);
}

[data-theme="dark"] {
    /* Dark theme colors */
    --text-color: #ebf7f7;
    --background-color: #240e09;
    --link-color: #ebf7f7;
    --link-hover-color: #ED8B97;
}

/* Toggle to accessible font family */
[data-font="accessible"] {
    --font-family-used: var(--accessible-font-family);
}
.blog-links {
    margin-top: 10px;
    text-align: left; /* Ensure the links are aligned to the left */
    padding-left: 60px; /* Adjust this value as needed to align with your layout */
}

.blog-links a {
    display: block; /* Makes each link appear on a new line, forming a vertical list */
    font-weight: 200;
    color: var(--link-color);
    transition: color 0.1s;
    text-decoration: none; /* Optional: Removes underline from links */
    margin-bottom: 10px; /* Adds space between each link */
}

.blog-links a:hover {
    color: var(--link-hover-color);
    text-decoration: underline; /* Re-introduces underline on hover for visual feedback */
}

body, h1, h2, nav, nav a, .blog-links a {
font-family: var(--font-family-used);
    color: var(--text-color);
}

body {
    background-color: var(--background-color);
    margin: 5px;
    padding: 30px;
}

.header {
    text-align: center;
    padding: 3px;
}

.header h1, .header h2 {
    margin: 0;
    font-size: var(--header-font-size);
    font-weight: 300;
}

.header h2 {
    font-size: var(--sub-header-font-size);
    font-weight: 200;
}

.nav, .nav li {
    display: flex;
    justify-content: center;
    list-style-type: none;
    padding: 0;
    margin: 0;
    padding: 5px 15px;
}

.nav li a {
    text-decoration: none;
    color: var(--link-color);
    font-weight: 200;
    font-size: 14px;
    transition: color 0.1s;
}

.nav li a:hover, .nav li a:focus, .nav li a.active, 
.footer a:hover, .blog-links a:hover {
    color: var(--link-hover-color);
}

.main, .footer {
    text-align: left;
    font-weight: 200;
    padding: 20px;
    text-decoration: none;
    text-align: center;
    font-size: small;
}

#theme-toggle, #font-toggle {
    background: none;
    color: inherit;
    border: none;
    padding: 10px;
    cursor: pointer;
    font: inherit;
    outline: none;
}

#theme-toggle:hover, #font-toggle:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

a { color: inherit; }