:root {
  --main-color: #1D004D;/*#1D004D*/
  --main-color-on-hover: #1D004D;/*#1D004D*/
  
  --secondary-color: #C7B1E6;/*#C7B1E6*/
  
  --active-color: #FFA500;
  --text-color: #222;
  --inverse-text-color: #FFF;
  --stable-text-color: #FFF;
  
  --main-shadow: 2px 2px 8px -4px #333;/*2px 2px 8px -4px #333;*/
  --header-shadow: 0 0 8px -2px #333;/*0 0 8px -2px #333;*/
  --article-shadow: 2px 2px 4px -2px #888;/*2px 2px 4px -2px #888;*/
  --articleholdersummary-shadow: 0px 1px 2px -2px #888;/*0px 1px 2px -2px #888;*/
  --inset-shadow: 0px 0px 8px -4px #333 inset;/*0px 0px 8px -4px #333 inset;*/
  
  --main-text-shadow: 2px 2px #333;
  
  --light-background: #FFF;
  --article-main-color: #EEE;/*EEE*/
  --article-secondary-color: #DDD;/*DDD*/
}


body{width: 100%; min-height: 100vh;
	margin: 0;
	color: var(--text-color);
	display: flex;
	flex-direction: column;
	background: linear-gradient(to bottom right, rgba(29, 0, 77, 0.66), rgba(255, 165, 0, 0.66));}
	
#content {margin: 0;
	/*flex-grow: 1;
	min-height: 85vh;*/}

.page_size{width: 96%;
	max-width: 1200px;}
	
ul {list-style: none;
	padding: 0;}

a {text-decoration: none;}

p {width: 80%;
	margin: 1.5em auto 1.5em auto;
	line-height: 150%;
	font-size: 110%;}/*issue?*/

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

/*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 8px 0;}
	
		#skip_link {position: absolute;
			top: 16px;
			z-index: -1;
			background: #FFF;
			font-size: 150%;}
	
			#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: 110%;}

				h1 > a > img {height: 48px;
					margin: 0 16px 0 0;
					border-radius: 8px;}
												
		#ul_nav{margin: 0;
			display: flex;
			justify-content: space-between;
			gap: 8px;}
	
			#ul_nav > li {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: #FFF;
					border-radius: 8px;
					padding: 8px;
					border: 2px solid var(--main-color);
					display: flex;
					align-items: center;
					gap: 8px;
					justify-content: center;
					width: 100%;}
				
				#home #a_home,
				#news_day #a_news,
				#news_week #a_news,
				#news_month #a_news {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 {color: var(--inverse-text-color);
						background: var(--main-color-on-hover);
						border: 2px solid #FFF;}
							
					#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: 650px) {#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 {font-size: 180%;} h1 > a > img {margin: 0 16px 0 16px;}}
		@media (max-width: 400px) {h1 {font-size: 140%;}}		
					
/*****Footer*****/		
footer {background: var(--main-color);
	color: var(--stable-text-color);
	margin: 32px auto 16px auto;
	border-radius: 16px;
	box-shadow: var(--main-shadow);}
	
	#div_footer_content,
	#ul_footer_social {width: 96%;
		max-width: 1300px;
		margin: 24px auto 24px auto;}
	#div_footer_content{display: flex;
		justify-content: space-between;}
		
		/*Logo*/
		#a_footer_logo {color: var(--stable-text-color);
				display: inline-flex;
				align-items: center;
				font-size: 150%;
				padding: 8px;
				font-weight: bold;
				margin: 0 0 16px 0;
				height: 32px;
				border: 2px solid var(--main-color);
				border-radius: 8px;}
				
				#a_footer_logo > img {width: 32px;
					margin: -4px 8px 0 0;
					border-radius: 8px;}
		
		#a_footer_logo:hover,
		#a_footer_logo:focus {border: 2px solid #FFF;}
		
		/*Links*/
		#ul_footer_links {margin: 0;
			font-weight: bold;
			font-size: 110%;}

			#ul_footer_links > li {text-align: right; line-height: 48px;}
			#ul_footer_links > li > a {color: var(--stable-text-color);}
			#ul_footer_links > li > a:hover,
			#ul_footer_links > li > a:focus {color: #FFA500;}
		
		/*Social*/								
		#ul_footer_social {margin: 16px auto 16px auto; border-top: 2px solid #FFF; padding-top: 16px; display: flex; justify-content: space-between; align-items: center;}
			/*#a_footer_mastodon > img {height: 48px; display: block;}
			/*#ul_footer_social> li {max-width: 210px;}*/
			#a_footer_mastodon {display: block; height: 48px; border-radius: 8px; padding: 8px; border: 2px solid var(--main-color);}	
			#a_footer_rss {padding: 8px;}
			
			#a_footer_rss > img {object-fit: none;
		  		object-position: 0 0;
		  		width: 48px;
		  		height: 48px;}
  			
	  		#a_footer_rss:hover > img,
	  		#a_footer_rss:focus > img {object-position: -48px 0px;}
	  					
			#a_footer_mastodon:hover,
			#a_footer_mastodon:focus {border: 2px solid #FFF;}
			
		@media (max-width: 650px) {#div_footer_content{flex-direction: column;} #ul_footer_links > li {text-align: left;}}		



/*****Dark Mode*****/
@media (prefers-color-scheme: dark) {
	:root{
		--main-color: #35274D;
		--main-color-on-hover: #EEAB2D;
		
		--secondary-color: #35274D;
		
		--active-color: #35274D;
		--text-color: #FCFCFC;
  		--inverse-text-color: #121212;
    
		--main-shadow: none;
  		--header-shadow: none;
  		--article-shadow: none;
  		--articleholdersummary-shadow: none;
  		--inset-shadow: none;
  		
  		--main-text-shadow: none;
  		  
  		--light-background: #333;
  		--article-main-color: #333;/*EEE*/
  		--article-secondary-color: #222;/*DDD*/
	}
	
	body {background: #121212;}

	/*Header*/		
			#ul_nav > li > a {background: var(--main-color);}/*From #FFF*/
				#ul_nav > li > a:hover,
				#ul_nav > li > a:focus{border: 2px solid var(--main-color-on-hover);}
											
			#home #a_home,
			#news_day #a_news,
			#news_week #a_news,
			#news_month #a_news {border: 2px solid #FCFCFC;}
					
			#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);}
				
	/*****Footer*****/
		/*Social*/								
		#ul_footer_social {border-top: 2px solid #FCFCFC;}
			#a_footer_logo:hover,
			#a_footer_logo:focus,
			#a_footer_mastodon:hover,
			#a_footer_mastodon:focus {background: var(--main-color-on-hover); border: 2px solid var(--main-color-on-hover);}
}


/*Accessibility Testing
body{letter-spacing: 0.12em; word-spacing: 0.16em;}
p {line-height: 150%;}
/**/