body {
        margin: 0;
        font-family: Literata;
        /* Terminal-like font */
        background-color: #1e1e1e;
        /* Dark gray */
        color: #dcdcdc;
        /* Light gray text */
    }/* Header bar styles */

    header {
        background-color: #303030;
        /* Slightly lighter gray */
        color: #dcdcdc;
        /* Light gray text */
        padding: 10px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: sticky;
        /* Sticks to the top of the viewport */
        top: 0;
        z-index: 1000;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        /* Subtle shadow */
    }

    footer {
        text-align: center;
    }/* Site title styles */

    .site-title {
        font-size: 1.5em;
        font-weight: bold;
    }

    .meta-info {
        font-size: 0.9em;
        /* Slightly smaller font */
        color: #b0b0b0;
        /* Slightly darker gray */
        margin-bottom: 10px;
        /* Space below the meta-info */
    }

    a {
        color: #ffcc00;
    }

    a:visited {
        color: #00ffff;
    }/* Navigation styles */

    nav {
        display: flex;
        gap: 15px;
    }

    nav a {
        color: #00ffff;
        /* Cyan link color */
        text-decoration: none;
    }

    nav a:hover {
        color: #ff6600;
        /* Orange on hover */
    }/* Content area */

    .text-block {
        font-size: 1.2em;
        background-color: #282828;
        /* Slightly lighter gray */
        padding: 20px;
        margin: 20px auto;
        width: 80%;
        max-width: 800px;
        border-radius: 5px;
    }

    .text-block img {
	max-width: 100%;
	height: auto;
}

    .tags {
        margin-top: 1em;
        /* Adds a bit of space above the tags section */
        font-family: sans-serif;
        /* Pick a font that suits your site */
        font-size: 0.9rem;
        /* Adjust if you want bigger or smaller tags */
    }

    .tags ul {
        list-style-type: none;
        /* Remove bullet points for a cleaner look */
        margin: 0;
        /* Remove default margin */
        padding: 0;
        /* Remove default padding */
    }

    .tags li {
        display: inline-block;
        /* Put each tag inline so they line up horizontally */
        background-color: #f0f0f0;
        /* Light gray background */
        margin: 0 0.3em 0.3em 0;
        /* Some spacing between tags */
        padding: 0.3em 0.6em;
        /* Padding around the text */
        border-radius: 1em;
        /* Rounded corners for a pill look */
        transition: background-color 0.2s, color 0.2s;
    }

    .tags li:hover {
        background-color: #dcdcdc;
        /* Slightly darker hover effect */
    }

    .tags a {
        text-decoration: none;
        /* Remove underline from tag links */
        color: #555;
        /* Medium gray text color */
    }

    .tags a:hover {
        color: #000;
        /* Darker text on hover for emphasis */
    }

    .archive-title {
        font-family: 'Literata', serif;
        /* Consistent with the main font */
        font-size: 24px;
        /* Prominent size but not overly large */
        color: #ffcc00;
        /* Bright, attention-catching color */
        background-color: #282828;
        /* Slightly lighter dark gray to distinguish from body */
        padding: 15px 20px;
        /* Generous padding for visual space */
        margin: 20px auto;
        /* Centers the title and adds space around it */
        text-align: center;
        /* Centers the text for prominence */
        border-top: 1px solid #303030;
        /* Subtle top border */
        border-bottom: 1px solid #303030;
        /* Subtle bottom border for visual structure */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        /* Subtle shadow for depth */
        width: 80%;
        /* Matches the content width for consistency */
        max-width: 800px;
        /* Limits maximum width for large displays */
        border-radius: 5px;
        /* Slightly rounded corners to soften the edges */
    }

    .image-container {
    position: relative; /* Necessary for positioning the tooltip */
    cursor: pointer; /* Indicate that the image is interactive */
}

.image-container img {
    vertical-align: top;
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease;
}

.image-container img:hover {
    transform: scale(1.05); /* Slight zoom effect on hover */
}

.tooltip {
    display: none; /* Hidden by default */
    position: absolute;
    top: 110%; /* Position below the image */
    left: 50%; /* Center-align the tooltip */
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8); /* Dark background */
    color: #fff; /* White text for contrast */
    padding: 8px 12px; /* Padding around the text */
    border-radius: 5px; /* Rounded corners */
    font-size: 0.9rem; /* Adjusted font size */
    white-space: nowrap; /* Prevent text wrapping */
    z-index: 10; /* Ensures the tooltip is on top */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Soft shadow */
}

.image-container:hover .tooltip {
    display: block; /* Show the tooltip on hover */
}

.float-left {
    float: left;
    margin-right: 15px;
    margin-bottom: 10px;
}
.giscus-content {
    padding: 20px;
    margin: 20px auto;
    width: 80%;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}