html,
        body {
            height: 100%;
            margin: 0;
        }

        body {
            display: flex;
            flex-direction: column;
            min-height: 85vh;
            font-family: sans-serif;
            font-size: 1.1em;
            line-height: 1.6;
            max-width: 800px;
            margin: 40px auto;
            padding: 0 20px;
            color: #333;
        }

        main {
            flex: 1;
        }

        nav {
            display: flex;
            align-items: center;

            a {
                margin-right: 15px;
                text-decoration: none;
                color: #007bff;
            }
        }

        header {
            border-bottom: 1px solid #eee;
            margin-bottom: 2rem;
            padding-bottom: 1rem;
        }

        footer {
            border-top: 1px solid #eee;
            padding-top: 1rem;
            margin-top: 3rem;
            font-size: 0.8em;
            color: #777;
        }

        .tag {
            background: #eee;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.9em;
            margin-right: 5px;
        }

        div.highlight {
            border-radius: 8px;
        }

        pre {
            padding: 1em;
        }

        img {
            max-width: 100%;
            height: auto;
            max-height: 70vh;
            display: block;
            margin: 2rem auto;
            border-radius: 8px;
        }

        article .description {
            font-weight: bold;
            color: #555;
            margin: 10px 0;
            letter-spacing: 0.2px;
        }

        article img {
            cursor: zoom-in;
        }


        aside.link {
            position: relative;
            box-sizing: border-box;
            display: flex;
            padding: 1.5rem;
            margin-top: 1rem;
            margin-bottom: 2rem;
            border: 1px solid green;
            border-radius: 8px;

            .icon {
                position: absolute;
                top: -1rem;
                padding: 5px;
                background-color: white;


            }

            a {
                font-size: .9rem;
                font-weight: bold;
            }
        }

        #lightbox {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.8);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            cursor: zoom-out;
        }

        #lightbox.open {
            display: flex;
            place-items: center;
        }


        #lightbox img {
            max-width: calc(100vw - 32px);
            max-height: calc(100vh - 32px);
            object-fit: contain;
            cursor: zoom-out;
        }

        /* Base Callout Style */
        .admonition {
            margin: 1.5rem 0;
            padding: 0.8rem 1rem;
            border-left: 0.25rem solid;
            border-radius: 0.3rem;
            background-color: #f8f9fa;
            /* Default light gray */
            font-size: 0.95rem;
        }

        /* Title Styling */
        .admonition-title {
            font-weight: 700;
            margin-top: 0;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        /* Paragraph inside callout */
        .admonition p:last-child {
            margin-bottom: 0;
        }

        /* Color Variants */
        .admonition.note {
            border-color: #0969da;
            /* GitHub Blue */
            background-color: #f0f7ff;
        }

        .admonition.note .admonition-title {
            color: #0969da;
        }

        /* Optional: Add an "Important" variant */
        .admonition.important {
            border-color: #8250df;
            /* Purple */
            background-color: #fbefff;
        }