/* This theme was based on work spit out by ChatGPT. I asked for */
/* something Zenburn-like with an emphasis on accessibility */
/* that would work well on different devices */
/* I tweaked several elements but a good 70% is still */
/* vanilla ChatGPT output */

/* Thus, this CSS file is "published" into the public domain. */

/* Questions or comments, please contact me at */
/* chris [at] osugisakae DOT com */

/* Basic structure */
html {
    font-family: "Liberation Serif", system-ui, sans-serif;
    font-size: 105%;
    line-height: 1.6;
    color: #DCDCCC;
    background-color: #3F3F3F;
    margin: 0;
    padding: 0;
}

/* Centered layout */
body {
    font-size: 1.1rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 90vh;
    padding: 1rem;
}

/* Content block with max width */
.container {
    max-width: 70ch;
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem;
    background-color: #2B2B2B;
    border-radius: 0.3em;
    box-shadow: 0 0 0.3em rgba(0, 0, 0, 0.5);
}

/* Accessibility and contrast */
a {
    color: #F0DFAF;
    text-decoration: underline;
}

a:visited {
    color: #7F9F7F;
}

a:focus, a:hover {
    color: #CC9393;
    outline: 2px solid #DFAF8F;
}

h1, h2, h3, h4, h5, h6 {
    color: #F0E68C;
}

h1.title {
    font-size: 1.2em;
    margin: 1em auto 0.25em auto;
    text-align: center;
}

p {
    margin-bottom: 1em;
    text-indent: 1em;
}

/* Ensuring text contrast for accessibility */
body, a, h1, h2, h3, p {
    color-scheme: dark;
}

/* Font fallback */
body {
    font-family: 'Liberation Serif', 'Georgia', serif;
}

/* added from original css, then tweaked */

p.subtitle {
    margin: 0 auto 0.5rem auto;
    text-align: center;
    text-indent: 0;
    font-size: 100%;
    font-style: italic;
}

p.author {
    margin: 0.5rem auto 0.5rem auto;
    text-align: center;
    font-size: 100%;
}


header.masthead {
    max-width: 70ch;
    margin: 1rem auto 1rem auto;
    padding: 0;
}

div.info {
    border-style: solid;
    border-size: 0.2rem;
    border-color: #DCDCCC;
    padding: 1em 0.5em;
    margin: 1em 0.5em;
}

div.info p {
    text-indent: 0;
}

div.info p.ccl {
    margin: 1rem auto;
    text-align: center;
}


/* Wrapper for the menu */
nav.menu {
    max-width: 70ch; /* Limit the container width to 70 characters */
    margin: 0 auto; /* Center the container horizontally */
    padding: 0; /* Remove extra padding */
}

/* Styling for the horizontal .menuigation menu */
nav.menu ul {
    list-style: none; /* Remove bullet points */
    padding: 0;
    margin: 0;
    display: flex; /* Use flexbox for horizontal layout */
    justify-content: space-between; /* Spread out items evenly */
    flex-wrap: wrap; /* Allow items to wrap if necessary */
}

/* Styling for individual list items */
nav.menu ul li {
    display: inline; /* Ensure list items are inline */
    margin-right: 1rem; /* Add spacing between the items */
    margin-bottom: 0;
    margin-top: 0;
    font-family: "Liberation Sans", system-ui, sans;
    font-size: 90%;
}

nav.menu ul li:last-child {
    margin-right: 0; /* Remove the margin from the last item */
}

/* Styling for links inside the .menuigation */
nav.menu ul li a {
    text-decoration: none; /* Remove underline from links */
    color: #DCDCCC; /* Zenburn-like link color */
    padding: 0.5rem 1rem;
    display: inline-block; /* Ensure padding applies to the clickable area */
}

nav.menu ul li a:hover {
    background-color: #3F3F3F; /* Zenburn hover background */
    color: #F0DFAF; /* Change link color on hover */
}



/* part of the original, for accessibility, esp. on phones */

/* Responsive adjustments */
@media (max-width: 600px) {
    html {
        font-size: 1.2rem; /* Slightly larger base font size for readability */
    }
    
    .container {
        padding: 1rem;
        max-width: 100%; /* Ensure it takes full width on small screens */
    }
}