:root {
    --link: rgba(0, 0, 0, 0.2);
    --link-hover: rgb(0, 0, 0);
    --dark-link: rgba(144, 238, 144, 0.2);
    --dark-link-hover: rgb(144, 238, 144);
}

body {
    /* https://ruivieira.dev/58-bytes-of-css-to-look-great-nearly-everywhere.html */
    max-width: 38rem;
    padding: 2rem;
    margin: auto;

    /* https://github.com/cssobral2013/acari-sans */

    /* font-family: "Work Sans", sans-serif; */
    /* font-family: Roboto; */
    /* font-family: 'Acari Sans', sans-serif; */
    font-family: Verdana, sans-serif;

    font-optical-sizing: auto;
    font-style: normal;
    background: radial-gradient(circle, rgba(234,255,229,1) 0%, rgba(228,232,255,1) 100%);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
}

footer.site-footer {
    text-align: center;
}

footer.site-footer *{
    color: lightgray;
}

article img {
    max-width: 100%;
}

ul.index {
    list-style: none;
    padding-left: 0;
}

.tag {
    border-radius: 2px;
    padding: 2px;
}


a {
    color: black;
    text-decoration: underline;
    text-decoration: underline;
    text-decoration-color: var(--link);
    /* text-decoration-skip-ink: none; */
    text-underline-offset: .2em;
    text-decoration-thickness: .1em;
}

a:hover {
    text-decoration-color: var(--link-hover);
}

#nav-ul {
    display: flex;
    justify-content: space-between;
    list-style-type: none;
    padding: 0px;
}

pre {
    padding: 10px;
    border: 1px solid black;
    border-radius: 5px;
    overflow: scroll;
}


/* Dark theme styles */
@media (prefers-color-scheme: dark) {
    body {
        background: radial-gradient(circle, rgb(11, 47, 26) 20%, rgb(51 51 98) 100%);
        color: white; /* Light text color for better readability on dark background */
    }
    a {
        color: var(--dark-link-hover);
        text-decoration-color: var(--dark-link);
    }
    a:hover {
        text-decoration-color: var(--dark-link-hover);
    }
    footer.site-footer {
        color: darkslategrey;
    }
    pre {
        border: 1px solid white;
    }
}