:root {
    /* Default light theme colors */
    --text-color: #000; /* Black text color */
    --background-color: #fff; /* White background */
    --link-color: #0000EE; /* Default link color (blue) */
    --link-hover-color: #00008B; /* Dark blue for hover */
    --header-font-size: 35px; /* Font size for main headers */
    --sub-header-font-size: 14px; /* Font size for sub-headers */
    --main-font-family: times new roman, serif; /* Default font family */
    --font-family-used: var(--main-font-family); /* Sets the font-family */
}

/* Dark theme settings */
[data-theme="dark"] {
    --text-color: #ffffff; /* White text for dark theme */
    --background-color: #333333; /* Dark background */
    --link-color: #ffffff; /* White link color */
    --link-hover-color: #aaaaaa; /* Light gray hover color */
}

/* Base styles for body and headings */
body, h1, h2, nav, nav a, .blog-links a {
    font-family: var(--font-family-used); /* Apply chosen font family */
    color: var(--text-color); /* Apply text color based on theme */
}

body {
    background-color: var(--background-color); /* Set background color */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

/* Header section */
.header {
    text-align: center; /* align the header how you want */
    padding: 20px; /* Add padding to the header */
}

.header h1, .header h2 {
    margin: 0; /* Remove margin for header elements */
    font-size: var(--header-font-size); /* Apply font size from variable */
    font-weight: 400; /* Light font weight */
}

.header h2 {
    font-size: var(--sub-header-font-size); /* Smaller font for sub-header */
    font-weight: 100; /* Even lighter font weight */
}

/* Navigation menu styles */
.nav {
    display: flex; /* Flexbox layout for nav items */
    justify-content: center; /* align the nav items how you want */
    list-style-type: none; /* Remove bullet points */
    padding: 0px;
    margin: 0;
}

.nav li {
    margin: 20px; /* Add space between menu items (15px on each side) */
}

.nav li a {
    text-decoration: underline; /* you can put none to remove underlines */
    color: var(--link-color); /* Set link color */
    font-weight: 200; /* Light font weight */
    font-size: 14px; /* Set font size */
    transition: color 0.1s; /* Smooth hover transition */
}

.nav li a:hover {
    color: var(--link-hover-color); /* Change link color on hover */
}

/* Main content and footer styles */
.main, .footer {
    padding: 40px; /* Add padding */
    text-align: center; /* Center the text */
    font-size: small; /* Small font size */
}

.blog-links {
    margin-top: 20px;
    text-align: left; /* Align the blog links to the left */
    padding-left: 50px;
    list-style-type: none; /* Ensure no bullet points are displayed */
}

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

.blog-links a:hover {
    color: var(--link-hover-color);
    text-decoration: underline; /* Adds underline on hover */
}

/* In case blog links are inside a list, ensure no bullets */
.blog-links ul, .blog-links ol {
    list-style-type: none; /* Remove bullets from unordered/ordered lists */
    padding: 0; /* Remove any default padding */
    margin: 0; /* Remove any default margin */
}

/* Button styles for theme and font toggles */
#theme-toggle, #font-toggle {
    background: none; /* No background */
    color: inherit; /* Inherit the text color */
    border: none; /* No border */
    padding: 10px; /* Add some padding */
    cursor: pointer; /* Show pointer cursor */
    font: inherit; /* Inherit font style */
}

#theme-toggle:hover, #font-toggle:hover {
    color: var(--link-hover-color); /* Change color on hover */
    text-decoration: underline; /* Underline text on hover */
}

/* Style for all links (inherit from theme colors) */
a {
    color: inherit; /* Inherit the text color */
}