/* 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: system-ui, "Liberation Serif", sans-serif;
    font-size: 1.1em;
    line-height: 1.6;
    color: #DCDCCC;
    background-color: #3F3F3F;
    margin: 0;
    padding: 0;
}

/* Centered layout */
body {
    justify-content: center;
    min-height: 90vh;
    padding: 1em;
}

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

#button {
    margin: 1em;
}

/* 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 {
    font-size: 160%;
    font-weight: bold;
    margin: 0 auto 0.25em auto;
    text-align: center;
}


h2 {
    font-size: 140%;
    margin: 1em 0 0 0;
    padding: 0 0 0.25em 0;
}

p {
    margin-bottom: 1em;
}


p#fortune {
    font-size: 1.25em;
    font-style: italic;
}

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

/* Font fallback */
body {
    font-family: 'Georgia', sans-serif;
    padding: 0;
    margin: auto;
}

/* added from original css, then tweaked */

p.subtitle {
    margin-bottom: 0.5em;
    margin-top: 0;
    text-indent: 0;
    font-size: 90%;
    font-style: italic;
}



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

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

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

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

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