body {
      background-color: #c3c6cf;
      margin: 0;
      line-height: 1.5em;
    }

    a {
    color : black;
    text-decoration : none;

    }

    a:hover{
    color : #959595;
    }

    h1 {
    color : #000000;
    margin-bottom : 30px;
    line-height : 1.2em;
    }

    h2, h2 a {
    color : #000000;
    }

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

    .wrapper {
        font-family : Tahoma, Verdana, Segoe, sans-serif;
        display: grid;
        grid-template-columns: repeat(3, [col] 350px ) ;
        grid-template-rows: repeat(10, [row] auto);
        background-color: #fff;
        color: #444;
        margin: 0 auto;
        width: 1070px;
    }

    .nav {
        grid-column: col / col 2;
        grid-row: row / span max;
        margin: 20px;
    }


    .menu_categories {
        font-size : 0.9em;
        text-decoration : none;
        color : black;
    }

    .menu {
        margin-left: -10px;
    }

    .menu li {
        float: left;
        list-style-type : none;
        margin-left : 10px;
    }

    .menu_header {
        font-size : 1em;
        text-transform: uppercase;
        margin-left: 50px;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .header {
        grid-column: col 2 / span 2;
        grid-row: row / span 2;
        margin-top: 20px;
    }

    .header img{
            display : block;
     }


    .content{
        grid-column: col 2 / span 2;
        grid-row: row 3 / span 1;
        display: grid;
        grid-gap: 10px;
        grid-template-columns: 1fr;
        margin-top: 25px;

    }



    .footer{
        grid-column: col 1 / span 3;
        grid-row: max / span 1;
        border-top : 1px solid #000000;
        text-align : center;
        font-size : 0.9em;
        height : 30px;
        margin-bottom: 20px;
    }

    .year{
        color : #000000;
        text-transform : uppercase;
        font-weight : bold;
        float : left;
        display : inline-block;
        vertical-align : middle;
        width : 45px;
    }

    .title{
        font-size : 0.8em;
        font-weight : normal;
        overflow-wrap : break-word;
    }

    .titles{
        list-style : none;
        padding-left : 10px;
        width : 100%;
    }

    .indexdate{
        color : #000000;
        text-transform : uppercase;
        font-weight : bold;

    }


    .index_summary {
        list-style : none;
        padding-left : 10px;
        width : 100%;
    }

    .index_summary_entry{
        font-size : 0.8em;
        font-weight : normal;
        overflow-wrap : break-word;
    }

    .index_summary_entry img {
        max-width: 100%;
        height: auto;
        display: inline-block;
    }

    /* Infinite scroll loading animation */
    .loading {
        text-align: center;
        padding: 30px 20px;
        font-size: 0.9em;
        color: #666;
    }

    .loading::before {
        content: '';
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 3px solid #ddd;
        border-top: 3px solid #333;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
        margin-right: 10px;
        vertical-align: middle;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    #no-more {
        color: #999;
        font-size: 0.9em;
    }

    /* Fancybox image hover effects */
    .article-content a[data-fancybox] img {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .article-content a[data-fancybox] img:hover {
        transform: scale(1.03);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        cursor: zoom-in;
    }