.div_home_box {display: flex;
	flex-wrap: wrap;
	justify-content: center; 
	margin: 32px auto 0 auto;
	background: var(--light-background);
	border-radius: 8px;
	box-shadow: var(--main-shadow);  position: relative;}

	#div_top_box {color: #FFF; background: linear-gradient(to bottom right, rgba(29, 0, 77, 1), rgba(255, 255, 255, 1));}
	
	#div_mastodon_box {color: #FFF; background: linear-gradient(to bottom right, rgba(255, 165, 0, 1), rgba(255, 255, 255, 1));}
	
	.div_home_box > div {width: 100%;
		max-width: 700px;
		margin: 32px;}
		
		.div_home_box > div > p {font-size: 200%;
			margin: 0;
			width: 100%; text-shadow: var(--main-text-shadow);}
					
			.div_home_box > div > h2 {font-size: 300%; margin: 0; text-shadow: var(--main-text-shadow);}
					
		#a_read_news,
		#a_mastodon {float: left;
			margin: 32px 0 0 0;
			padding: 16px;
			background: var(--secondary-color);
			color: var(--text-color);
			font-weight: bold;
			font-size: 140%;
			border-radius: 8px;
			box-shadow: var(--main-shadow);
			display: flex;
			align-items: center;}
	
		#a_mastodon {padding: 16px 32px 16px 32px;}
			#a_mastodon > img {height: 64px;}
				
		#a_read_news:hover,
		#a_read_news:focus,
		#a_mastodon:hover,
		#a_mastodon:focus {color: var(--inverse-text-color);
			background: var(--main-color-on-hover);}
	
		#a_read_news:before{background: url('images/newspaper.svg') no-repeat;
					background-size: auto 100%;
					content: " ";
					height: 48px;
					width: 48px;
					margin: 0px 16px 0px 0px;}
			
			#a_read_news:hover:before,
			#a_read_news:focus:before{background-position: -48px;}

		@media (max-width: 500px) {.div_home_box > div > p {font-size: 150%; margin-top: 8px;}
					.div_home_box > div > h2 {font-size: 170%;}
					#a_read_news{font-size: 120%;}
					#a_mastodon > img {height: 48px; width: auto;}}
						
						
	.div_home_box > img {width: 25%;			
		margin: 32px;}
		
	@media (max-width: 1150px) {
		.div_home_box > img {display: none;}
		
		.div_home_box > div {max-width: 100%;
			text-align: center;}
			
		#a_read_news,
		#a_mastodon {width: 100%;
			box-sizing: border-box;
			justify-content: center;}}
				
#ul_home {margin: 32px auto 0 auto; /*background: white;*/
	color: #FFF;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;}

	#ul_home > li {flex-basis: 30%;
		text-align: center;
		background: var(--main-color);
		border-radius: 8px;
		margin: 8px 0.5% 8px 0.5%;
		padding: 1%;
		box-shadow: var(--main-shadow);}
		
		#ul_home > li > h3 {font-family: "Atkinson Hyperlegible", "Verdana", "Tahoma", "Ubuntu", "Roboto", "Lucida Grande", "Cantarell", sans-serif;
			font-size: 150%;
			font-weight: bold;}/*may need to fix because of changing header orders*/
			
		#ul_home > li > p {width: 90%; font-family: "Atkinson Hyperlegible", "Verdana", "Tahoma", "Ubuntu", "Roboto", "Lucida Grande", "Cantarell", sans-serif;}
		#ul_home > li > p > a {color: #FFFFFF;
			text-decoration: underline;}
		#ul_home > li > p > a:hover,
		#ul_home > li > p > a:focus {color: orange;}

		#ul_home > li > img {height: 100px;
			object-fit: contain;
			margin: auto;}

	@media (max-width: 925px) {
		#ul_home > li {flex-basis: 47%;}}

	@media (max-width: 595px) {
		#ul_home > li {flex-basis: 100%;}}
		
		
/*****Dark Mode*****/		
@media (prefers-color-scheme: dark) {
		#div_top_box,
		#div_mastodon_box {background: #333;}				
				
					#a_read_news:before{background-position: -48px;}
					
						#a_read_news:hover:before,
						#a_read_news:focus:before{background-position: 0px;}
}