#div_archive {
    margin: auto;
    text-align: center;
    background: var(--light-background);
    padding: 16px;
    box-sizing: border-box;}

    #div_archive > h2 {
        font-size: 3em;}   
    
     #div_archive > p {
        width: 80%;
        font-size: 1.7em;}


#h2_archive {
    text-align: center;
    background: var(--main-color);
    color: var(--stable-text-color);
    margin: auto;
    padding: 16px;
    box-sizing: border-box;
    font-size: 3em;
    font-family: "Atkinson Hyperlegible", "Verdana", "Tahoma", "Ubuntu", "Roboto", "Lucida Grande", "Cantarell", sans-serif;}
    
#nav_archive {
    display: flex;
    flex-direction: column;
    gap: 8px;}

    #div_archive > ul,      
    .ul_years,
    #ul_months,
    #ul_days,
    #ul_topics,
    #ul_type {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;}

    #div_archive > ul {
        margin: 32px;
        gap: 16px;}

    #ul_days,
    #ul_topics {
        padding: 8px;
        box-sizing: border-box;
        background:  var(--article-secondary-color);}

        #div_archive > ul > li,
        .ul_years > li,
        #ul_months > li,
        #ul_days > li,
        #ul_topics > li,
        #ul_type > li {
            background: var(--light-background);
            font-weight: bold;
            text-align: center;
            line-height: 48px;
            min-height: 48px;}
  
        #div_archive > ul > li {  
         background:var(--secondary-color);
         font-size: 1.7em;}
          
        .ul_years > li,
        #ul_months > li,
        #ul_topics > li {
            flex-grow: 1;
            flex-shrink: 1;}

        #ul_type > li {
            flex: 1;}
  
        #ul_days > li {
            width: 48px;}
     
            #div_archive > ul > li > a,  
            .ul_years > li > a,
            #ul_months > li > a,
            #ul_days > li > a,
            #ul_topics > li > a,
            #ul_type > li > a {
                color: var(--text-color);
                display: block;
                padding: 0 8px;
                text-decoration: none;}

            #div_archive > ul > li > a {
                padding: 8px 16px;}  
        
            #div_archive > ul > li > a:hover,
            #div_archive > ul > li > a:focus,     
            .ul_years > li > a:hover,
            .ul_years > li > a:focus,
            #ul_months > li > a:hover,
            #ul_months > li > a:focus,
            #ul_days > li > a:hover,
            #ul_days > li > a:focus,
            #ul_topics > li > a:hover,
            #ul_topics > li > a:focus,
            #ul_type > li > a:hover,
            #ul_type > li > a:focus {
                color: var(--stable-text-color);
                background: var(--main-color-on-hover);}

            .ul_2025 #li_2025, .ul_2026 #li_2026, .ul_2027 #li_2027, .ul_2028 #li_2028, .ul_2029 #li_2029, .ul_2030 #li_2030, .ul_2031 #li_2031, .ul_2032 #li_2032, .ul_2033 #li_2033, .ul_2034 #li_2034, .ul_2035 #li_2035, .ul_2036 #li_2036,
            .ul_January #li_January, .ul_February #li_February, .ul_March #li_March, .ul_April #li_April, .ul_May #li_May, .ul_June #li_June, .ul_July #li_July, .ul_August #li_August, .ul_September #li_September, .ul_October #li_October, .ul_November #li_November, .ul_December #li_December,
            .ul_days #li_days, .ul_topics #li_topics,
            .ul_1 #li_1, .ul_2 #li_2, .ul_3 #li_3, .ul_4 #li_4, .ul_5 #li_5, .ul_6 #li_6, .ul_7 #li_7, .ul_8 #li_8, .ul_9 #li_9, .ul_10 #li_10, .ul_11 #li_11, .ul_12 #li_12, .ul_13 #li_13, .ul_14 #li_14, .ul_15 #li_15, .ul_16 #li_16, .ul_17 #li_17, .ul_18 #li_18, .ul_19 #li_19, .ul_20 #li_20, .ul_21 #li_21, .ul_22 #li_22, .ul_23 #li_23, .ul_24 #li_24, .ul_25 #li_25, .ul_26 #li_26, .ul_27 #li_27, .ul_28 #li_28, .ul_29 #li_29, .ul_30 #li_30, .ul_31 #li_31{
                background: var(--active-color);}

        /*No News*/
        #ul_months > .li_no_news,
        #ul_days > .li_no_news {
            background: transparent;}
            
            #ul_months > .li_no_news > a,
            #ul_days > .li_no_news > a {
                color: #444;}
                
            #ul_months > .li_no_news > a:hover, 
            #ul_months > .li_no_news > a:focus,
            #ul_days > .li_no_news > a:hover, 
            #ul_days > .li_no_news > a:focus {
                background: transparent;
                color: #444;}    
     

#ul_news {
    display: flex;
    row-gap: 16px;
    column-gap: 1%;
    justify-content: center;
    flex-flow: wrap;}

    #ul_news > li {
        width: 24%;}

    @media (max-width: 825px) {
    #ul_news > li {
        width: 100%;}
    }
       		        
        .a_news {
            text-align: center;
            display: flex;
            min-height: 64px;
            font-size: 1.1rem;
            align-items: center;
            justify-content: center;
            box-shadow: var(--article-shadow);
            color: var(--text-color);
            background: linear-gradient(to right, var(--link-background) 64px, var(--secondary-color) 64px, var(--secondary-color) 100%);
            --link-background: #FFF;
            box-sizing: border-box;
            padding: 8px;
            padding-left: 72px;
            position: relative;}
										    
           .a_news:hover,
           .a_news:focus {
                color: var(--inverse-text-color);
                background: linear-gradient(to right, var(--link-background) 64px, var(--main-color-on-hover) 64px, var(--main-color-on-hover) 100%);}
	            
            .a_RFI {--link-background: #E2001A;}
            .a_France24 {--link-background: #00A7E3;}
            .a_BBC {--link-background: #B90005;}	
            .a_First_Channel {--link-background: #292E39;}	
            .a_RNZ {--link-background: #000;}	
            .a_SWI {--link-background: #AF001E;}
            .a_LSM {--link-background: #2896D7;}
												    
	            .a_news > img {
	                object-fit: cover;
		            object-position: 0 0;
		            width: 64px;
		            height: 64px;  				
		            margin: 0px;
		            position: absolute;
		            left: 0;}		
	    
            /*To make spans 100%*/
            .a_news {
                height: 100%;}