@charset "UTF-8";
/* ==========================================================================
   Styling and layout for all media
   ========================================================================== */
/* Reset
   ========================================================================== */
/**
 * Add the correct display in IE 11 and Firefox.
 */
details,
main {
    display: block;
}

/**
 * Add the correct vertical alignment in Chrome, Edge, Firefox, and Opera.
 */
progress {
    vertical-align: baseline;
}

/**
 * Add the correct display in all browsers.
 */
summary {
    display: list-item;
}

/* Clearfix
   ========================================================================== */
header::after,
footer::after,
nav ul::after,
nav ol::after,
.container::after {
    content: "";
    display: table;
    clear: both;
}

/* ==========================================================================
   Styling and layout for screen media (mobile first)
   ========================================================================== */
@media screen {
    /* Layout
       ========================================================================== */
    /**
     * 1. Prevent adjustments of font size after orientation changes in
     *    IE on Windows Phone and in iOS.
     */
    html {
        /* 1 */
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /**
     * 1. Set `body` to `relative` to allow positioning of absolute elements.
     * 2. Remove default margin.
     */
    body {
        /* 1 */
        position: relative;
        /* 2 */
        margin: 0;
        background: #330000; /* Dark, dark red background */
        color: #fff7f7; /* Lighter red text color */
        font-family: Arial, sans-serif;
    }

    /**
     * Outer wrapper for main layouts.
     *
     * Example HTML:
     *
     * <div class="wrapper">
     *     <div class="container">
     *         Content
     *     </div>
     * </div>
     */
    .wrapper {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }

    /**
     * Wrapper for layouts, and for site header/footer.
     *
     * Example HTML:
     *
     * <div class="wrapper">
     *     <div class="container">
     *         Content
     *     </div>
     * </div>
     */
    .site-header,
    .site-footer,
    .container {
        width: 88%;
        max-width: 54em;
        margin: 0 auto;
        background-color: #440000; /* Dark red for container */
        padding: 20px;
        border-radius: 5px;
        color: #fff7f7; /* Lighter red text color */
    }

    /**
     * Additional styling for child content within site header.
     */
    .site-header {
        padding: 1em 0;
    }
    .site-header h2 {
        margin: 0;
    }
    .site-header h3 {
        margin: 0.5em 0 0;
        font-family: "PT Serif", Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
        font-size: 1.25rem;
        font-style: italic;
        font-weight: normal;
        line-height: 1.4;
    }

    /**
     * Additional styling for child content within site footer.
     */
    .site-footer {
        padding: 0.5em 0;
        background-color: #330000; /* Dark, dark red for footer */
    }

    /**
     * Styling for articles.
     *
     * 1. Prevent really, really long words in article from breaking layout.
     */
    .article {
        margin-bottom: 2em;
        /* 1 */
        word-wrap: break-word;
    }

    /**
     * Styling for complementary content.
     *
     * Initially the sidebar appears under main content, it is then repositioned
     * with media queries at 2nd breakpoint.
     *
     * 1. Prevent really, really long words in article from breaking layout.
     */
    .complementary-content {
        margin: 2em -6% 0;
        padding: 0 6%;
        border-top: 2px dashed #cccccc;
        /* 1 */
        word-wrap: break-word;
    }

    /**
     * Hide text but still allow screen reader access.
     *
     * Example HTML:
     *
     * <p class="accessibility">
     */
    .accessibility {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        border: 0;
        white-space: nowrap;
    }

    /* Navigation
       ========================================================================== */
    /**
     * Style mobile first version of the navigation menu. Desktop version will
     * override some rules with extra styling at 1st breakpoint.
     *
     * Example HTML:
     *
     * <nav class="site-navigation">
     *     <div>
     *         <ul>
     *             <li class="active"><a></li>
     *             <li><a></li>
     *             <li><a></li>
     *         </ul>
     *         <div class="search">
     *             <form>
     *                 <input type="search">
     *             </form>
     *        </div>
     *    </div>
     * </nav>
     */
    .site-navigation {
        background-color: #550000; /* Slightly darker red for navigation */
        padding: 10px;
        border-radius: 5px;
    }
    .site-navigation > div {
        position: relative;
        max-width: 54em;
        margin: 0 auto;
    }
    .site-navigation ul {
        margin: 0;
        padding: 0;
        border: solid #cccccc;
        border-width: 1px 0;
        list-style: none;
    }
    .site-navigation li {
        border: solid #cccccc;
        border-width: 1px 0;
        background-color: #440000; /* Dark red for container */
    }
    .site-navigation li:hover {
        background-color: #550000; /* Slightly darker red for navigation */
    }
    .site-navigation li:active {
        background-color: #660000; /* Slightly darker red for active navigation */
        box-shadow: inset 0 0.2em 0.25em rgba(0, 0, 0, 0.15);
    }
    .site-navigation li.active {
        background-color: #550000; /* Slightly darker red for active navigation */
        box-shadow: none;
    }
    .site-navigation a {
        display: block;
        padding: 0.5em 6%;
        color: #F5E6E6; /* Light pink text color for navigation links */
        background-color: #5C1A1B; /* Deep red background */
        border: 1px solid #D9A5A6; /* Soft pink border */
        border-radius: 0.5em;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .site-navigation a:hover,
    .site-navigation a:visited {
        color: #E3B1B1; /* Brighter pink text color for hover/visited links */
        background-color: #742424; /* Slightly brighter red for hover */
        text-decoration: none;
    }

    .site-navigation a:active {
        color: #D3A5A5; /* Soft pink text color for active links */
        background-color: #4A0D0E; /* Darker red for active background */
        text-decoration: none;
    }


    /**
     * Search field in navigation.
     */
    .search {
        padding: 1em 6% 0.5em;
        background: #550000; /* Slightly darker red for navigation */
    }
    .search input[type=search] {
        width: 16em;
        height: 2.125em;
        padding-right: 0.1875em;
        padding-left: 2em;
        border-radius: 0.5em;
        background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2732%27 height=%2732%27 viewBox=%270 0 32 32%27%3E%3Cg fill=%27%23333%27%3E%3Cpath d=%27M4,13c0-5,4-9,9-9c5,0,9,4,9,9c0,5-4,9-9,9C8,22,4,18,4,13z M13,19c3.3,0,6-2.7,6-6s-2.7-6-6-6s-6,2.7-6,6S9.7,19,13,19z%27/%3E%3Cpath d=%27M17.5,19l1.5-1.5l4.5,3L28,25c0,0,0,1.5-0.75,2.25S25,28,25,28l-4.5-4.5L17.5,19z%27/%3E%3C/g%3E%3C/svg%3E") no-repeat left center;
        background-size: 2em 2em;
    }

    /* Links
       ========================================================================== */
    /**
     * 1. Specify link colour.
     * 2. Remove default underline style from non-hover state links.
     * 3. Interrupt the decoration line to let the shape of the text show through
     *    in supported browsers.
     * 4. Remove tap delay in modern browsers.
     */
    a {
        /* 1 */
        color: #FF6666; /* Light red for links */
        /* 2 */
        text-decoration: none;
        /* 3 */
        -webkit-text-decoration-skip: ink;
        text-decoration-skip-ink: auto;
        /* 4 */
        touch-action: manipulation;
    }
    a:hover, a:active {
        outline: 0;
        color: #e7e1e1; /* Slightly lighter red for hover links */
        text-decoration: underline;
    }
    a:focus {
        outline: 1px solid #FF9999; /* Slightly lighter red for hover links */
    }

    /**
     * Additional styling for `h1`-`h3` heading links.
     *
     * 1. Expanded CSS level 3 `text-decoration-color` property in supported
     *    browsers, older browsers ignore this addition.
     */
    h1 a,
    h2 a,
    h3 a,
    h4 a,
    h5 a,
    h6 a {
        color: #e7e1e1; /* Slightly lighter red for headings */
    }
    h1 a:hover, h1 a:active,
    h2 a:hover,
    h2 a:active,
    h3 a:hover,
    h3 a:active,
    h4 a:hover,
    h4 a:active,
    h5 a:hover,
    h5 a:active,
    h6 a:hover,
    h6 a:active {
        color: #e7e1e1; /* Slightly lighter red for headings */
        /* 1 */
        -webkit-text-decoration-color: rgba(255, 153, 153, 0.5);
        text-decoration-color: rgba(255, 153, 153, 0.5);
    }

    /**
     * Paginator (prev/next) navigation links on articles/article lists.
     *
     * Example HTML:
     *
     * <nav class="paginator">
     *     <a rel="prev">
     *     <a rel="next">
     */
    /* General pagination styling */
    .paginator {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
    }

    .paginator a {
        text-decoration: none;
        color: #b22222; /* Firebrick red */
        padding: 8px 12px;
        border: 1px solid #8b0000; /* Dark red */
        margin: 0 5px;
        border-radius: 4px;
        transition: background-color 0.3s, color 0.3s;
    }

    /* Remove dots from the list items */
    .pagination {
        list-style: none;
        display: flex;
        padding: 0;
        margin: 0;
    }

    .pagination li {
        margin: 0 5px;
    }

    .pagination li a {
        color: #b22222; /* Firebrick red */
        padding: 8px 12px;
        border: 1px solid #8b0000; /* Dark red */
        border-radius: 4px;
        transition: background-color 0.3s, color 0.3s;
    }

    /* Style for the current page */
    .pagination li.current b {
        color: #ffffff;
        background-color: #8b0000; /* Dark red */
        padding: 8px 12px;
        border-radius: 4px;
    }

    /* Hover effects */
    .paginator a:hover,
    .pagination li a:hover {
        background-color: #b22222; /* Firebrick red on hover */
        color: #ffffff;
    }

    /* Style for the dots */
    .pagination li[role="separator"] {
        padding: 8px 12px;
        border: none;
        background: none;
        color: #666; /* Change this to your preferred separator color */
    }


    /**
     * Visually hide unfocussed/inactive ‘skip links’.
     *
     * Example HTML:
     *
     * <a class="skip-link">
     */
    .skip-link {
        position: absolute;
        z-index: 2;
        top: 1px;
        left: 1px;
        padding: 0.25em 0.5em;
        transform: translateY(-5em);
        transition: transform 0.25s ease-in-out;
        background-color: #550000; /* Slightly darker red for skip link */
        color: #FFCCCC; /* Lighter red text color */
        font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }
    .skip-link:focus, .skip-link:active {
        transform: translateY(0);
    }

    /* Typography
       ========================================================================== */
    /**
     * Establish baseline.
     */
    html {
        font-size: 16px;
        line-height: 1.5;
    }

    /**
     * Global font and text colour.
     */
    body {
        color: #fff7f7; /* Lighter red text color */
        font-family: "PT Serif", Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
    }

    /**
     * Sans-serif font for main navigation menu.
     */
    .site-navigation {
        font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        font-weight: bold;
    }

    /**
     * Harmonize size, style and vertical margin of headings.
     */
    /* Headers
   ========================================================================== */
    h1, h2, h3, h4, h5, h6 {
        clear: both;
        color: #ffeded; /* Light red for headings */
        font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }

    h1 {
        margin: 0.6315789em 0;
        font-size: 2.375rem;
        letter-spacing: -0.25px;
        line-height: 1.1842105;
    }

    h2 {
        margin: 0.75em 0;
        font-size: 2rem;
        letter-spacing: -0.25px;
        line-height: 1.25;
    }

    h3 {
        margin: 1em 0;
        font-size: 1.5rem;
        letter-spacing: -0.25px;
        line-height: 1.3333333;
    }

    h4 {
        margin: 1em 0;
        font-size: 1.25rem;
        line-height: 1.4;
    }

    h5 {
        margin: 1em 0;
        font-size: 1.125rem;
        line-height: 1.4444444;
    }

    h6 {
        margin: 1em 0;
        font-size: 1rem;
        line-height: 1.5;
    }


    /**
     * Add the correct font weight in Chrome, Edge, and Safari.
     */
    b,
    strong {
        font-weight: bolder;
    }

    /**
     * Add vertical margin to addresses.
     */
    address {
        margin: 1em 0;
    }

    /**
     * Additional styling for blockquotes.
     */
    blockquote {
        margin: 0.8em 0;
        font-size: 1.25rem;
        font-style: italic;
        line-height: 1.4;
        text-align: center;
    }

    /**
     * 1. Remove the bottom border in Chrome 57+.
     * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
     */
    abbr[title] {
        /* 1 */
        border-bottom: 0;
        /* 2 */
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted;
    }

    /**
     * Consistent styling for `mark` and `var` tags.
     */
    mark,
    var {
        padding: 0 0.25em;
        border-radius: 0.25em;
        background: #fff9e1;
        color: #333333;
    }

    /**
     * Harmonize size and style of computer text.
     */
    pre,
    code,
    kbd,
    samp {
        border: 1px solid #e3e3e3;
        border-radius: 0.2857143em;
        background-color: #550000; /* Slightly darker red for main content area */
        color: #FFCCCC; /* Lighter red text color */
        font-family: Menlo, Consolas, Monaco, monospace;
        font-size: 0.875rem;
        line-height: 1.5;
    }

    code,
    kbd,
    samp {
        padding: 1px 0.21429em;
    }

    /**
     * Additional stylng for preformatted text/code.
     *
     * 1. Contain overflow in all browsers.
     * 2. Don't wrap long words.
     * 3. Set tab size to 4 spaces.
     */
    pre {
        padding: 0.5714286em 1.1428571em;
        /* 1 */
        overflow-x: auto;
        /* 2 */
        word-wrap: normal;
        /* 3 */
        -moz-tab-size: 4;
        -o-tab-size: 4;
        tab-size: 4;
    }
    pre code {
        padding: 0;
        border: 0;
        background-color: transparent;
        direction: ltr;
        font-size: 1em;
        -webkit-hyphens: none;
        -ms-hyphens: none;
        hyphens: none;
        text-align: left;
        word-wrap: normal;
        word-break: normal;
        word-spacing: normal;
        white-space: pre;
    }

    /**
     * Prevent `sub` and `sup` elements from affecting the line height in all
     * browsers.
     */
    sub,
    sup.footnote,
    sup {
        position: relative;
        font-size: 0.75em;
        line-height: 0;
        vertical-align: baseline;
    }

    sup {
        top: -0.5em;
    }

    sub {
        bottom: -0.25em;
    }

    /**
     * Harmonize size and style of small text.
     */
    small,
    figcaption,
    tfoot,
    .footnote {
        font-size: 0.8125rem;
        line-height: 1.5;
    }

    figcaption,
    tfoot,
    .footnote {
        color: #585858;
    }

    figcaption {
        margin-top: 0.5em;
        font-style: italic;
    }

    /**
     * 1. Add the correct box sizing in Firefox.
     * 2. Show the overflow in Edge and IE.
     */
    hr {
        /* 1 */
        box-sizing: content-box;
        height: 24px;
        margin: 1em 0;
        /* 2 */
        overflow: visible;
        border: 0;
        background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 240 24%27%3E%3Cpath fill=%27%23333%27 d=%27M0,0c1.742,13.61,54.74,20.912,119.995,15.279C184.922,9.679,238.594,13.024,240,24c-1.744-13.613-54.742-20.913-120.005-15.284C55.078,14.32,1.405,10.973,0,0z%27/%3E%3C/svg%3E") 50% 50% no-repeat;
        background-size: 240px 24px;
    }

    /* Support for non-latin languages (can be removed if not required)
       ========================================================================== */
    /**
     * Bidirectional (bidi) text support.
     * See: https://www.w3.org/International/articles/inline-bidi-markup/#cssshim
     */
    [dir=ltr],
    [dir=rtl] {
        unicode-bidi: -webkit-isolate;
        unicode-bidi: isolate;
    }

    bdo[dir=ltr],
    bdo[dir=rtl] {
        unicode-bidi: isolate-override;
    }

    /**
     * Preferred font for Japanese language.
     */
    :lang(ja) {
        font-family: "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Meiryo UI", sans-serif;
        font-weight: 300;
    }

    /**
     * Preferred font for Korean language.
     */
    :lang(ko) {
        font-family: GulimChe, Gulim, sans-serif;
    }

    /**
     * Preferred font for simplified Chinese (PRC) language.
     */
    :lang(zh-cn) {
        font-family: "PingFang SC", SimHei, sans-serif;
    }

    /**
     * Preferred font for traditional Chinese (Taiwan, Hong Kong) language.
     */
    :lang(zh-tw) {
        font-family: "PingFang TC", PMingLiU, sans-serif;
    }

    /**
     * Suppress `text-decoration` in some RTL languages for better legibility.
     */
    [lang|=ar] a:hover,
    [lang|=fa] a:hover,
    [lang|=ur] a:hover {
        text-decoration: none;
    }

    /**
     * Computer code should be LTR.
     */
    [dir=rtl] code {
        direction: ltr;
    }

    /**
     * Swap image alignment right/left positions in RTL languages.
     */
    [dir=rtl] img.align-left {
        margin: 1em 0 1em 1em;
        float: right;
    }
    [dir=rtl] img.align-right {
        margin: 1em 1em 1em 0;
        float: left;
    }

    /**
     * Swap table caption alignment in RTL languages.
     */
    [dir=rtl] caption {
        text-align: right;
    }

    /**
     * Swap table cell text alignments in RTL languages.
     */
    [dir=rtl] th,
    [dir=rtl] td {
        text-align: right;
    }

    /**
     * Swap menu/list padding positions in RTL languages.
     */
    [dir=rtl] menu,
    [dir=rtl] ol,
    [dir=rtl] ul {
        padding: 0 2em 0 0;
    }

    [dir=rtl] .site-navigation ul,
    [dir=rtl] .article-list {
        padding: 0;
    }

    /**
     * Swap definition description margin positions in RTL languages.
     */
    [dir=rtl] dd {
        margin: 0 2em 0 0;
    }

    /**
     * Swap checkbox/radio margin positions in RTL languages.
     */
    [dir=rtl] input[type=checkbox] + label,
    [dir=rtl] input[type=radio] + label {
        margin: 0 0 0 0.5em;
    }
    [dir=rtl] input[type=checkbox] + label:last-of-type,
    [dir=rtl] input[type=radio] + label:last-of-type {
        margin: 0;
    }

    /**
     * Swap `select` icon position in RTL languages.
     */
    [dir=rtl] select {
        padding-right: 0.1875em;
        padding-left: 1.5em;
        background-position: 0.5em center;
    }

    /**
     * Swap ‘skip links’ position in RTL languages.
     */
    [dir=rtl] .skip-link {
        right: 1px;
        left: auto;
    }

    /**
     * Swap anchor float position on comments.
     */
    [dir=rtl] .comments h4 .comment-anchor {
        float: left;
    }

    /* Embedded content
       ========================================================================== */
    /**
     * Add the correct display in IE 11.
     */
    video {
        display: inline-block;
    }

    /**
     * Make embedded elements responsive.
     */
    img,
    video {
        max-width: 100%;
        height: auto;
    }

    /**
     * Images.
     *
     * 1. Remove the gap between images and the bottom of their containers.
     *
     * Image alignment (compatible with Textile markup syntax).
     *
     * Example HTML:
     *
     * <img class="align-left">
     * <img class="align-right">
     * <img class="align-center">
     */
    img {
        /* 1 */
        vertical-align: middle;
    }
    img.align-left {
        margin: 1em 1em 1em 0;
        float: left;
    }
    img.align-right {
        margin: 1em 0 1em 1em;
        float: right;
    }
    img.align-center {
        display: block;
        margin: 1em auto;
    }

    /**
     * Consistent margins on `figure`.
     */
    figure {
        margin: 1em 0;
    }

    /* Tables
       ========================================================================== */
    /**
     * Consistent tables.
     */
    table {
        width: 100%;
        margin-bottom: 1em;
        border-spacing: 0;
        border-collapse: collapse;
    }

    /**
     * Styling of table captions.
     */
    caption {
        margin-bottom: 0.5em;
        font-style: italic;
        text-align: left;
    }

    /**
     * Make table cells align top and left by default.
     */
    th,
    td {
        padding: 0.5em;
        border: 1px solid #d4d4d4;
        vertical-align: top;
        text-align: left;
    }

    /**
     * Emphasize table header.
     */
    thead tr {
        background-color: #550000; /* Slightly darker red for main content area */
    }
    thead th,
    thead td {
        border: 1px solid #440000; /* Dark red for container */
    }

    /**
     * 'Zebra striping' of `tbody` rows.
     */
    tbody tr:nth-child(even) {
        background-color: #440000; /* Dark red for container */
    }

    /**
     * Adjust padding of table footer due to smaller font size.
     */
    tfoot th,
    tfoot td {
        padding: 0.6666667em;
    }

    /**
     * Multi-row span vertical cell alignments.
     */
    [rowspan] {
        vertical-align: middle;
    }

    /* Lists
       ========================================================================== */
    /**
     * Address paddings set differently.
     */
    menu,
    ol,
    ul {
        padding: 0 0 0 2em;
    }

    /**
     * Remove margins from nested lists.
     */
    li > ul,
    li > ol {
        margin: 0;
    }

    /**
     * CSS Lists and Counters Module Level 3 list marker styling.
     */
    li::marker {
        color: color-text-heading;
    }

    /**
     * Address margins set differently.
     */
    dd {
        margin: 0 0 0 2em;
    }

    /**
     * Additional styling for article lists.
     *
     * Example HTML:
     *
     * <ul class="article-list">
     */
    .article-list {
        margin: 0 0 2em;
        padding: 0;
        border-top: 1px solid #cccccc;
        list-style: none;
    }
    .article-list li {
        margin-bottom: 0;
        border-bottom: 1px solid #cccccc;
    }

    /* Forms
       ========================================================================== */
    /**
     * 1. Address width being affected by wide descendants in Chrome, Firefox.
     * 2. Define consistent fieldset border, margin, and padding.
     */
    fieldset {
        /* 1 */
        min-width: 0;
        /* 2 */
        margin: 1em 0;
        padding: 1px 1em;
        border: 1px solid #cccccc;
    }

    /**
     * Normalize styling of `legend`.
     *
     * 1. Correct wrapping not present in IE 11 and Edge 12/13.
     * 2. Remove padding so people aren't caught out if they zero out fieldsets.
     * 3. Correct `color` not being inherited from fieldset in IE 11.
     */
    legend {
        /* 1 */
        display: table;
        /* 1 */
        box-sizing: border-box;
        /* 1 */
        max-width: 100%;
        /* 2 */
        padding: 0;
        /* 3 */
        color: inherit;
        /* 1 */
        white-space: normal;
    }

    /**
     * 1. Show the overflow in Edge.
     * 2. Remove tap delay in modern browsers.
     */
    button,
    input {
        /* 1 */
        overflow: visible;
        /* 2 */
        touch-action: manipulation;
    }

    /**
     * 1. Prevent elements from spilling out of their parent.
     * 2. Address margins set differently in Firefox 4+, Safari, and Chrome.
     * 3. Correct font properties not being inherited.
     */
    button,
    input,
    optgroup,
    select,
    textarea {
        box-sizing: border-box;
        /* 1 */
        max-width: 100%;
        /* 2 */
        margin: 0;
        color: #FFCCCC; /* Lighter red text color */
        font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        /* 3 */
        font-size: 1rem;
        line-height: 1.375;
        vertical-align: baseline;
    }

    /**
     * Styling of form input fields.
     *
     * 1. Remove browser-specific default styling.
     */
    [type=color],
    [type=date],
    [type=datetime],
    [type=datetime-local],
    [type=email],
    [type=month],
    [type=number],
    [type=password],
    [type=search],
    [type=tel],
    [type=text],
    [type=time],
    [type=url],
    [type=week],
    select,
    textarea {
        height: 2em;
        padding: 0.25em 0.1875em;
        border: 1px solid #cccccc;
        border-radius: 0;
        background: #440000; /* Dark red for container */
        /* 1 */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    [type=color]:focus,
    [type=date]:focus,
    [type=datetime]:focus,
    [type=datetime-local]:focus,
    [type=email]:focus,
    [type=month]:focus,
    [type=number]:focus,
    [type=password]:focus,
    [type=search]:focus,
    [type=tel]:focus,
    [type=text]:focus,
    [type=time]:focus,
    [type=url]:focus,
    [type=week]:focus,
    select:focus,
    textarea:focus {
        border-color: #FF6666; /* Light red for links */
        outline: 1px solid transparent;
    }

    /**
     * 1. Remove any excess padding.
     * 2. Correct margins for inline checkbox/radio labels.
     */
    [type=checkbox],
    [type=radio] {
        /* 1 */
        padding: 0;
    }
    [type=checkbox] + label,
    [type=radio] + label {
        /* 2 */
        margin: 0 0.5em 0 0;
    }
    [type=checkbox] + label:last-of-type,
    [type=radio] + label:last-of-type {
        /* 2 */
        margin: 0;
    }

    /**
     * Correct the cursor style of increment and decrement buttons in Safari.
     */
    [type=number]::-webkit-inner-spin-button,
    [type=number]::-webkit-outer-spin-button {
        height: auto;
    }

    /**
     * Remove the inner padding in Chrome and Safari on macOS.
     */
    [type=search]::-webkit-search-decoration {
        /* autoprefixer: off */
        appearance: none;
    }

    /**
     * Use indicator icon to signify the drop-down ability of `select`.
     */
    select {
        padding-right: 1.5em;
        background: #440000 url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2717%27 height=%275%27 viewBox=%270 0 17 5%27%3E%3Cpolygon fill=%27%23FFCCCC%27 points=%270,0 5,5 10,0%27/%3E%3C/svg%3E") right center no-repeat;
        background-size: 1.0625em 0.3125em;
        text-transform: none;
    }

    /**
     * Remove browser-specific `select` UI in IE 11.
     */
    select::-ms-expand {
        opacity: 0;
    }

    /**
     * Override height and background set in a previous rule and allow auto height.
     */
    select[size],
    select[multiple] {
        height: auto;
        padding-right: 0.5em;
        background-image: none;
    }

    /**
     * Override height set in rule above and restrict to one line field.
     */
    select[size="0"],
    select[size="1"] {
        height: 2em;
    }

    /**
     * Normalize styling of `optgroup`.
     */
    optgroup {
        font-style: normal;
        font-weight: bold;
    }

    /**
     * 1. Remove default vertical scrollbar in IE 11.
     * 2. Remove unwanted space below `textarea` in Safari, Chrome, Opera.
     * 3. Restrict to vertical resizing to prevent layout breakage.
     */
    textarea {
        width: 100%;
        height: auto;
        min-height: 3em;
        /* 1 */
        overflow: auto;
        /* 2 */
        vertical-align: top;
        /* 3 */
        resize: vertical;
    }

    /**
     * Make sure disabled elements really are disabled and styled appropriately.
     *
     * 1. Override default iOS opacity setting.
     * 2. Re-set default cursor for disabled elements.
     */
    [disabled],
    [disabled] option,
    [disabled] optgroup,
    span.disabled {
        border-color: #d4d4d4 !important;
        /* 1 */
        opacity: 1;
        background: #660000 !important; /* Slightly darker red for disabled */
        box-shadow: none !important;
        color: #aaaaaa !important;
        text-shadow: none !important;
        /* 2 */
        cursor: default !important;
    }

    /**
     * Width display options for `input` fields. Height display options
     * for textareas.
     *
     * Example HTML:
     *
     * <input class="small">
     * <input class="large">
     */
    .small input {
        width: 25%;
        min-width: 151px;
    }
    .small textarea {
        height: 5.5em;
    }

    .large input {
        width: 50%;
        min-width: 302px;
    }
    .large textarea {
        height: 9.75em;
    }

    /**
     * Styling for form field validation.
     */
    input:focus:invalid,
    select:focus:invalid,
    textarea:focus:invalid {
        border-color: #FF6666; /* Light red for links */
        box-shadow: none;
    }

    /**
     * Styling for Firefox-specfic form field validation.
     */
    input:-moz-ui-invalid,
    select:-moz-ui-invalid,
    textarea:-moz-ui-invalid {
        border-color: #FF6666; /* Light red for links */
        box-shadow: none;
    }

    /**
     * Normalize form placeholder style across browsers.
     *
     * 1. Fix placeholder font properties inheritance.
     */
    :-ms-input-placeholder {
        opacity: 1;
        color: #999999;
        /* 1 */
        font: inherit;
    }
    ::placeholder {
        opacity: 1;
        color: #999999;
        /* 1 */
        font: inherit;
    }

    /**
     * Styling for required field indicators.
     *
     * Example HTML:
     *
     * <b class="required" title="Required">*</b>
     */
    .required {
        border: 0;
        color: #FF6666; /* Light red for links */
    }

    /* Buttons
   ========================================================================== */
    /**
     * 1. Address `overflow` set to `hidden` in IE 11.
     * 2. Remove the inheritance of text transform in Edge, Firefox, and IE 11.
     */
    button {
        /* 1 */
        overflow: visible;
        /* 2 */
        text-transform: none;
    }

    /**
     * Remove the inner border and padding in Firefox.
     */
    button::-moz-focus-inner,
    [type=button]::-moz-focus-inner,
    [type=reset]::-moz-focus-inner,
    [type=submit]::-moz-focus-inner {
        padding: 0;
        border-style: none;
    }

    /**
     * 1. Remove browser-specific default styling.
     * 2. Improve usability and consistency of cursor style between image-type
     *    `input` and others.
     */
    button,
    [type=button],
    [type=reset],
    [type=submit] {
        background-color: #660000; /* Dark red for button background */
        display: inline-block;
        position: relative;
        width: auto;
        height: 2em;
        padding: 0.25em 1em;
        border: 1px solid #ffcccc; /* Lighter red border */
        border-radius: 1em;
        background-clip: padding-box;
        box-shadow: 0 2px 0 #440000; /* Darker shadow */
        color: #ffcccc; /* Lighter red text color */
        font-weight: normal;
        text-align: center;
        /* 1 */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        /* 2 */
        cursor: pointer;
    }
    button:hover,
    [type=button]:hover,
    [type=reset]:hover,
    [type=submit]:hover {
        background-color: #770000; /* Slightly lighter dark red */
        border-color: #ff9999; /* Lighter red border on hover */
        color: #ffcccc; /* Lighter red text color */
        text-decoration: none;
    }
    button:active,
    [type=button]:active,
    [type=reset]:active,
    [type=submit]:active {
        top: 2px;
        border-color: #ffc8c8; /* Lighter red border on active */
        box-shadow: none;
        color: #ffcccc; /* Lighter red text color */
        text-decoration: none;
    }
    button:focus,
    [type=button]:focus,
    [type=reset]:focus,
    [type=submit]:focus {
        border-color: #ff6666; /* Light red for focus */
        outline: 1px solid transparent;
    }

    /**
     * Disbaled button additional styling.
     */
    button[disabled],
    [type=button][disabled],
    [type=reset][disabled],
    [type=submit][disabled] {
        top: 2px !important;
    }

    /* Comments
       ========================================================================== */
    /**
     * Styling for user comments.
     *
     * Example HTML:
     *
     * <article class="comments">
     */
    .comments {
        margin-bottom: 1em;
        padding: 1px 1em;
        border-radius: 0.5em;
        background: #440000; /* Dark red for container */
        word-wrap: break-word;
    }
    .comments h4 .is-author {
        font-weight: normal;
    }
    .comments h4 .comment-anchor {
        float: right;
        font-weight: normal;
    }

    /**
     * Additional styling for article author's comments.
     *
     * Example HTML:
     *
     * <article class="comments comments-author">
     */
    .comments-author {
        background: #550000; /* Slightly darker red for navigation */
    }

    /**
     * Styling for user comments preview.
     */
    #cpreview {
        margin-bottom: 2px;
        padding: 1em;
        border-radius: 0.5em;
        background-color: #440000; /* Dark red for container */
    }

    /**
     * Highlight text colour for comment errors.
     */
    .error_message li {
        color: #FF6666; /* Light red for links */
    }

    /**
     * Highlighting for comment form errors.
     */
    .comments_error {
        border-color: #FF6666; /* Light red for links */
    }

    /* Popup comments (can be removed if you don't use popups)
       ========================================================================== */
    /**
     * Restrict maximum width of popup container.
     */
    #popup-page .container {
        max-width: 52em;
    }
}
/* ==========================================================================
   Additional layout for screen media 576px and up
   ========================================================================== */
@media only screen and (min-width: 38em) {
    /**
     * Desktop version of the navigation menu. Overrides mobile first version.
     *
     * Example HTML:
     *
     * <nav class="site-navigation">
     *     <div>
     *         <ul>
     *             <li class="active"><a></li>
     *             <li><a></li>
     *             <li><a></li>
     *         </ul>
     *         <div class="search">
     *             <form>
     *                 <input type="search">
     *             </form>
     *        </div>
     *    </div>
     * </nav>
     */
    .site-navigation {
        border-top: 1px solid #cccccc;
        border-bottom: 1px solid #cccccc;
    }
    .site-navigation > div {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 88%;
    }
    .site-navigation ul {
        display: flex;
        flex-wrap: wrap;
        border: 0;
    }
    .site-navigation li {
        border-width: 0 1px;
    }
    .site-navigation a {
        padding: 0.5em 1em;
    }

    .search {
        margin-top: 0.2em;
        padding: 0;
        background: transparent;
    }
    .search input[type=search] {
        width: 2.125em;
        padding-right: 0;
        transition: width 0.2s ease-in-out, border-color 0.2s ease-in-out;
        background-color: #550000; /* Slightly darker red for navigation */
        cursor: pointer;
    }
    .search input[type=search]:hover {
        background-color: #660000; /* Slightly darker red for navigation */
    }
    .search input[type=search]:focus {
        width: 16em;
        padding-right: 0.1875em;
        background-color: #440000; /* Dark red for container */
        cursor: auto;
    }
}
/* ==========================================================================
   Additional layout for screen media 864px and up
   ========================================================================== */
@media only screen and (min-width: 46em) {
    /**
     * Enlarge baseline text size.
     */
    html {
        font-size: 1.125rem;
    }
}
/* ==========================================================================
   Additional accessibility for screen media
   ========================================================================== */
@media screen and (prefers-reduced-motion: reduce), (update: slow) {
    .search input[type=search] {
        transition-duration: 0;
    }
}
/* ==========================================================================
   Styling and layout for print media
   ========================================================================== */
@media print {
    /**
     * Remove unnecessary global styling from printed media.
     */
    *,
    *::before,
    *::after {
        background: transparent !important;
        box-shadow: none !important;
        color: #000000 !important;
        text-shadow: none !important;
    }

    /**
     * Use a print-friendly font size.
     */
    html {
        font-size: 8pt;
        line-height: 1.5;
    }

    /**
     * Use a print-friendly font family.
     */
    body {
        margin: 0.5cm;
        padding: 2em 5em;
        font-family: "Helvetica Neue", sans-serif;
    }

    /**
     * Make sure links are not underlined.
     */
    a {
        text-decoration: none;
    }

    /**
     * Visually separate header from body.
     */
    .site-header {
        border-bottom: 1pt solid #000000;
    }

    /**
     * Visually separate footer from body.
     */
    .site-footer {
        margin-top: 12pt;
        border-top: 1pt solid #000000;
    }

    /**
     * Hide unnecessary content from print.
     */
    nav,
    audio,
    video,
    form,
    #comments-form,
    .comments h4 a:last-child,
    .complementary-content,
    .paginator,
    .skip-link {
        display: none;
    }

    /**
     * Show long-form for abbreviations in print.
     */
    abbr[title]::after {
        content: " (" attr(title) ")";
    }

    /**
     * Harmonize size, style and vertical margin of headings.
     */
    h1 {
        margin: 16pt 0;
        font-size: 32pt;
        font-weight: normal;
        line-height: 36pt;
    }

    h2 {
        margin: 14pt 0;
        font-size: 24pt;
        line-height: 28pt;
        orphans: 2;
        widows: 2;
        page-break-after: avoid;
    }

    h3 {
        margin: 12pt 0;
        font-size: 18pt;
        line-height: 22pt;
        orphans: 2;
        widows: 2;
        page-break-after: avoid;
    }

    h4 {
        margin: 11pt 0;
        font-size: 14pt;
        line-height: 18pt;
        orphans: 2;
        widows: 2;
        page-break-after: avoid;
    }

    h5 {
        margin: 10pt 0;
        font-size: 12pt;
        line-height: 16pt;
        orphans: 2;
        widows: 2;
        page-break-after: avoid;
    }

    h6 {
        margin: 9pt 0;
        font-size: 10pt;
        line-height: 14pt;
        orphans: 2;
        widows: 2;
        page-break-after: avoid;
    }

    /**
     * Prevent widows (single final paragraph line on next page) and orphans (single
     * first paragraph line on previous page).
     */
    p {
        orphans: 2;
        widows: 2;
    }

    /**
     * Harmonize size and style of small text.
     */
    footer,
    figcaption,
    tfoot,
    small,
    .footnote {
        font-size: 6pt;
    }

    /**
     * Simple blockquote styling.
     *
     * 1. Avoid blockquotes breaking across multiple pages.
     */
    blockquote {
        padding: 0 0 0 8pt;
        border-left: 3pt solid #000000;
        font-size: 16pt;
        /* 1 */
        page-break-inside: avoid;
    }

    [dir=rtl] blockquote {
        padding: 0 8pt 0 0;
        border-right: 3pt solid #000000;
        border-left: 0;
    }

    /**
     * Simple preformatted text styling.
     *
     * 1. Ensure pre blocks are wrapped when printed.
     */
    pre {
        margin-bottom: 8pt;
        padding: 8pt;
        border: 1pt solid #000000;
        /* 1 */
        white-space: pre-wrap !important;
    }

    /**
     * Use a print-friendly monospaced font and size.
     */
    pre,
    code,
    kbd,
    samp,
    var {
        font-family: "Courier New", Courier, monospace;
    }

    /**
     * Images.
     *
     * 1. Avoid images breaking across multiple pages.
     *
     * Image alignment (compatible with Textile markup syntax).
     *
     * Example HTML:
     *
     * <img class="align-left">
     * <img class="align-right">
     * <img class="align-center">
     */
    img {
        /* 1 */
        page-break-inside: avoid;
    }
    img.align-left {
        margin: 1em 1em 1em 0;
        float: left;
    }
    img.align-right {
        margin: 1em 0 1em 1em;
        float: right;
    }
    img.align-center {
        display: block;
        margin: 1em auto;
    }

    /**
     * Swap image alignment right/left positions in RTL languages.
     */
    [dir=rtl] img.align-left {
        margin: 1em 0 1em 1em;
        float: right;
    }
    [dir=rtl] img.align-right {
        margin: 1em 1em 1em 0;
        float: left;
    }

    /**
     * Ensure margin below `figure`.
     */
    figure {
        margin-bottom: 8pt;
    }

    /**
     * Ensure margin above `figcaption`.
     */
    figcaption {
        margin-top: 4pt;
    }

    /**
     * Simple bullet styling for `ul` unordered lists.
     */
    ul {
        padding: 0 0 8pt 1.8em;
        list-style: square;
    }

    [dir=rtl] ul {
        padding: 0 1.8em 8pt 0;
    }

    /**
     * Simple numerical styling for `ol` ordered lists.
     */
    ol {
        padding: 0 0 8pt 1.8em;
        list-style: decimal;
    }

    [dir=rtl] ol {
        padding: 0 1.8em 8pt 0;
    }

    /**
     * Normalize margins on `dl` definition lists.
     */
    dl {
        padding: 0 0 8pt 1.8em;
    }

    [dir=rtl] dl {
        padding: 0 1.8em 8pt 0;
    }

    /**
     * 1. Make `table` span entire page width.
     * 2. Ensure margin below `table`.
     */
    table {
        /* 1 */
        width: 100%;
        /* 2 */
        margin-bottom: 8pt;
    }

    /**
     * Harmonize styling for `caption`.
     */
    caption {
        margin-bottom: 4pt;
        font-weight: bold;
    }

    /**
     * Avoid table rows breaking across multiple pages.
     */
    tr {
        page-break-inside: avoid;
    }

    /**
     * Simple styling for table cells.
     */
    th,
    td {
        padding: 4pt 8pt;
        border-bottom: 1pt solid #000000;
    }

    /**
     * Display table head across multi-page tables.
     */
    thead {
        display: table-header-group;
    }
    thead th {
        border-top: 1pt solid #000000;
    }

    /**
     * Avoid user comments breaking across multiple pages.
     */
    .comments {
        page-break-inside: avoid;
    }
}

.error-page .error-status {
    color: #FF9999; /* Even lighter red for error status */
}

.error-page .error-msg {
    color: #FFCCCC; /* Lighter red for error message */
}

main {
    background-color: #550000; /* Slightly darker red for main content area */
    padding: 20px;
    border-radius: 5px;
}

aside {
    background-color: #440000; /* Dark red for aside */
    padding: 20px;
    border-radius: 5px;
    color: #FFCCCC; /* Lighter red text color */
}

footer {
    background-color: #330000; /* Dark, dark red for footer */
    padding: 20px;
    border-radius: 5px;
    color: #FFCCCC; /* Lighter red text color */
}

nav {
    background-color: #550000; /* Slightly darker red for navigation */
    padding: 10px;
    border-radius: 5px;
}

nav a {
    color: #FFCCCC; /* Lighter red text color for navigation links */
}

.microblog-entry {
    list-style-type: none; /* Removes the bullet point */
    margin-bottom: 1em; /* Adds some space between list items */
}


.microblog-box {
    background-color: #4c1c24; /* Dark burgundy background to blend with the red theme */
    color: #f1f1f1; /* Light text color for readability */
    padding: 10px; /* Adds padding inside the box */
    border-radius: 5px; /* Rounds the corners of the box */
    border: 1px solid #7c2c34; /* Adds a border with a lighter shade of burgundy */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Adds a subtle shadow for depth */
}

.microblog-box .footnote {
    margin-top: 10px; /* Adds space between the description and the footnote */
    font-size: 0.8em; /* Slightly smaller font for the footnote */
    color: #d8d8d8; /* Light grey text for footnote, slightly lighter than the main text */
    font-style: italic;
}

/* keep it tiny & subtle */
.microblog-entry .meta {
  font-size: 0.875rem;   /* ~14px */
  color: #666;
  margin: 0.25rem 0 0;
}

/* optional niceties */
.microblog-entry .cf strong { font-weight: 600; }
.microblog-entry .cf-sep { opacity: 0.6; }