/* Default font & layout */


body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* Dark theme by default */
body.dark-theme {
    background-color: #000; /* Black background */
    color: #fff; /* White text */
}

body.dark-theme header,
body.dark-theme footer {
    background-color: #000; /* Black header/footer */
    color: #fff;
}

body.dark-theme nav a {
    color: #fff;
}

/* Light theme */
body.light-theme {
    background-color: #fff; /* White background */
    color: #000; /* Black text */
}

body.light-theme header,
body.light-theme footer {
    background-color: #f1f1f1;
    color: #000;
}

body.light-theme nav a {
    color: #000;
}

/* Header & Footer common styles */
header, footer {
    text-align: center;
    padding: 1em 0;
}

header h1, header h3, footer p {
    margin: 0;
}

/* Navigation links */
nav a {
    margin: 0 10px;
    text-decoration: none;
    color: inherit; /* Inherit color from theme */
}

/* Main content */
main {
    padding: 20px;
}

/* Subject block styling */
.subject-block {
    display: inline-block;
    text-align: center;
    margin: 20px;
}

.subject-block img {
    width: 150px;
    height: 150px;
}

.subject-block h2,
.subject-block h3 {
    margin: 10px 0 0 0;
    color: inherit; /* inherits from body text color */
}

/* Smaller blocks in footer or elsewhere */
.subject-blocks {
    display: inline-block;
    text-align: center;
    margin: 5px;
}

.subject-blocks img {
    width: 50px;
    height: 50px;
}

.subject-blocks h2,
.subject-blocks h3 {
    margin: 3px 0 0 0;
    color: inherit; /* inherits from body text color */
}