:root {
  --text-color: #222;
  --inverse-text-color: #EEE;
  --stable-text-color: #EEE;
  
  /*Shadows*/
  --main-shadow: 2px 2px 8px -4px #333;
  --header-shadow: 0 0 8px -2px #333;
  --article-shadow: 2px 2px 4px -2px #888;
  --articleholdersummary-shadow: 0px 1px 2px -2px #888;
  --inset-shadow: 0px 0px 8px -4px #333 inset;
  
  --main-text-shadow: 2px 2px #333;
  
  --light-background: #F8F8F8;
  --article-main-color: #EEE;
  --article-secondary-color: #DDD;
  
  /*Border Radii*/
  --small-radius: 0px;
  --large-radius: 0px;
}


body{
    width: 100%;
    min-height: 100vh;
	margin: 0;
	color: var(--text-color);
	display: flex;
	flex-direction: column;
	gap: 16px;}
	
.page_size {
    width: 96%;
	max-width: 1200px;}
	
ul {
    list-style: none;
	padding: 0;
	margin: auto;}

a {
    text-decoration: none;}

.a_external {
    background: url(images/external_link.svg) no-repeat right center / 0.5em;
    padding-right: 0.75em;}

p {
    width: 100%;
	margin: 1.5rem auto;
	line-height: 1.5;
	font-size: 1.1rem;}

p > img {
    max-width: 100%;
	max-height: 200px;
	object-fit: contain;}/*for cbc imgs*/

.small_card {
    border-radius: var(--small-radius);
	box-shadow: var(--main-shadow);}

.large_card {
    border-radius: var(--large-radius);
	box-shadow: var(--main-shadow);}
	
/*Header*/
header {
    width: 100%;
	background: var(--main-color);
	box-shadow: var(--header-shadow);}
	
	#div_header_content {
	    display: flex;
		justify-content: space-between;
		width: 96%;
		max-width: 1300px;
		margin: auto;
		padding: 8px 0;}
	
		#skip_link {
		    position: absolute;
		    padding: 8px;
			top: 8px;
			z-index: -1;
			background: #EEE;
			font-size: 1.4rem;}
	
		#skip_link:focus {
	        z-index: 2;}
					
		h1 {
		    margin: 0;
			background: var(--main-color);
			text-align: center;}
			
			h1 > a {
			    display: flex;
				margin: 4px 0 0 0px;
				line-height: 48px;
				color: var(--stable-text-color);
				font-size: 2.2rem;}

				h1 > a > img {
				    height: 48px;
					margin: 0 16px 0 0;
					border-radius: var(--small-radius);}
												
            #ul_nav,
			#ul_nav > li,
			#ul_nav > li > a {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 8px;}
			
				#ul_nav > li > a {
				    text-align: center;
					color: var(--text-color);
					font-weight: bold;
					background: #EEE;
					border-radius: var(--small-radius);
					padding: 8px;
					border: 2px solid var(--main-color);
					width: 100%;}
				
				#home #a_home,
				#news_day #a_news,
				#news_week #a_news,
				#news_month #a_news,
				#archive #a_archive {background: var(--active-color);}
					
				#ul_nav > li > a:hover,
				#ul_nav > li > a:focus,
				#home #a_home:hover,
				#home #a_home:focus,
				#news_day #a_news:hover,
				#news_day #a_news:focus,
				#news_week #a_news:hover,
				#news_week #a_news:focus,
				#news_month #a_news:hover,
				#news_month #a_news:focus,
				#archive #a_archive:hover,
				#archive #a_archive:focus {
				    color: var(--inverse-text-color);
					background: var(--main-color-on-hover);
					border: 2px solid #EEE;}
							
					#ul_nav > li > a > img {
					    object-fit: none;
		  				object-position: 0 0;
		  				width: 32px;
		  				height: 32px;}
  			
	  					#ul_nav > li > a:hover > img,
	  					#ul_nav > li > a:focus > img {
	  					    object-position: -32px 0px;}
							
		@media (max-width: 800px) {
		    #div_header_content {
		        flex-direction: column;}
		        
			h1 {
			    width: 96%;
				margin: 0 -2% 16px -2%;
				padding: 8px;}
				
			    h1 > a {
			        justify-content: center;}
			    
			#ul_nav > li {
			    width: 50%;}
        }
		
		@media (max-width: 450px) {
		    h1 > a {
		        font-size: 2rem;}
		        
		        h1 > a > img {
		            margin: 0 16px;}
		}
		
		@media (max-width: 400px) {
		    h1 > a {font-size: 1.8rem;}
		}		

					
/*Footer*/		
footer {
    background: var(--main-color);
	color: var(--stable-text-color);
	margin: 0 auto 16px auto;}
	
	#div_footer_content,
	#ul_footer_social {
	    width: 96%;
		max-width: 1300px;
		margin: 24px auto;}
		
	#div_footer_content{
	    display: flex;
		justify-content: space-between;}
				
		/*Links*/
		#ul_publicnews_links {
		    margin: 0;
		}

		    /*Logo*/
		    #ul_publicnews_links > li > a {
		        color: var(--stable-text-color);
		        display: inline-flex;
			    align-items: center;
			    font-size: 1.5rem;
			    padding: 8px;
			    font-weight: bold;
			    margin: 0 0 16px 0;
			    height: 32px;
			    border: 2px solid var(--main-color);
			    border-radius: var(--small-radius);}

		    #ul_publicnews_links > li > a:hover,
		    #ul_publicnews_links > li > a:focus {
		        border: 2px solid #EEE;}
				    
		        #ul_publicnews_links > li > a > img {
			        width: 32px;
				    margin: -4px 8px 0 0;
				    border-radius: var(--small-radius);}
						
		#ul_footer_links {
		    margin: 0;
			font-weight: bold;
			font-size: 1.1rem;}

			#ul_footer_links > li {
			    text-align: right;
			    line-height: 48px;}
			    
			    #ul_footer_links > li > a {
			        color: var(--stable-text-color);}
		
		/*Social*/								
		#ul_footer_social {
		    margin: 16px auto;
		    border-top: 2px solid #EEE;
		    padding-top: 16px;
		    display: flex;
		    align-items: center;}

            #ul_footer_social > li {
                width: 50%;}

            #li_footer_codeberg {
                display: flex;
                justify-content: start;}

			    #a_footer_codeberg {
			        display: block;
			        height: 64px;
			        width: 215px;
			        border-radius: var(--small-radius);
			        border: 2px solid var(--main-color);}

			    #a_footer_codeberg:hover,
			    #a_footer_codeberg:focus {
			        border: 2px solid #EEE;}
									
                #ul_footer_social > li > ul {
                    display: flex;
                    justify-content: end;
                    flex-direction: row;
                    gap: 16px;}
			        
			            .a_social_icon > img {
			                object-fit: none;
		              		object-position: 0 0;
		              		width: 48px;
		              		height: 48px;}
          			
	              		.a_social_icon:hover > img,
	              		.a_social_icon:focus > img {
	              		    object-position: -48px 0px;}
	  					
			
		@media (max-width: 650px) {
		    #div_footer_content{
		        flex-direction: column;}
		        
		    #ul_footer_links > li {
		        text-align: left;}

			#ul_footer_social{
			    flex-direction: column;
			    justify-content: center;
			    gap: 24px;}
			    
			    #ul_footer_social > li{
			        width: 98%;}
			        
			        #li_footer_codeberg,
			        #ul_footer_social > li > ul {
			            justify-content: center;}
		}


/*Dark Mode*/
@media (prefers-color-scheme: dark) {
	:root{
		--text-color: #FCFCFC;
    
		--main-shadow: none;
  		--header-shadow: none;
  		--article-shadow: none;
  		--articleholdersummary-shadow: none;
  		--inset-shadow: none;
  		
  		--main-text-shadow: none;
  		  
  		--light-background: #444;
  		--article-main-color: #444;/*EEE*/
  		--article-secondary-color: #333;/*DDD*/
	}

	/*Header*/
	#home #a_home,
	#news_day #a_news,
	#news_week #a_news,
	#news_month #a_news,
	#archive #a_archive {
	    background: var(--main-color);
	    border: 2px solid #FCFCFC;}
				
	#ul_nav > li > a:hover,
	#ul_nav > li > a:focus{
	    border: 2px solid var(--active-color);}
	    		
		#ul_nav > li > a {
		    background: var(--main-color);}
					
		#ul_nav > li > a > img {
		    object-position: -32px 0;}
	  			
		#ul_nav > li > a:hover > img,
		#ul_nav > li > a:focus > img {
		    object-position: 0px 0px;}	
		  						
		#ul_nav > li > a:hover,
		#ul_nav > li > a:focus,
		#home #a_home:hover,
		#home #a_home:focus,
		#news_day #a_news:hover,
		#news_day #a_news:focus,
		#news_week #a_news:hover,
		#news_week #a_news:focus,
		#news_month #a_news:hover,
		#news_month #a_news:focus {
			border: 2px solid var(--main-color-on-hover);}
}