.div_home_box {
    display: flex;
	flex-wrap: wrap;
	justify-content: center; 
	background: var(--light-background);
	position: relative;
	margin: auto;
	padding: 32px 16px 16px 16px;
	box-sizing: border-box;}

	.div_home_box > div {
	    max-width: 800px;}

		.div_home_box > div > h2 {
		    font-size: 2.5rem;
		    margin: 0 0 16px 0;}
					
		.div_home_box > div > p {
		    font-size: 1.7rem;}
	    
			.div_home_box > div > p > a {
			    color: var(--text-color);
			    text-decoration: none;
			    font-weight: bold;}
			    
		    .div_home_box > div > p > a:hover,
			.div_home_box > div > p > a:focus {
			    text-decoration: underline;}		
								    				
		#a_read_news {
		    padding: 16px;
			background: var(--secondary-color);
			color: var(--text-color);
			font-weight: bold;
			font-size: 1.5rem;
			display: flex;
			align-items: center;
			width: 100%;
			margin-top: 16px;
			box-sizing: border-box;
			justify-content: center;}
							
		#a_read_news:hover,
		#a_read_news: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: 1000px) {
		    .div_home_box > div > h2 {
		        font-size: 1.7rem;}
			
			.div_home_box > div > p {
			    font-size: 1.3rem;}
			
			#a_read_news {
			    font-size: 1.3rem;}
		}
						
	#div_top_box > img,
	#div_fediverse_box > img {
	    border-radius: 125px;}
							
	#div_top_box > img {
	    margin: 16px 0 16px 32px;
	    background: #1d004d;}
	    
	#div_fediverse_box > img {
	    margin: 16px 32px 16px 0;
	    background: var(--light-background);}

	.div_codeberg_logo {
	    overflow: hidden;
	    height: 250px;
	    width: 250px;
	    margin: 16px 0 16px 32px;}
	
	    .div_codeberg_logo > img {
	        padding: 0;
	        margin: 0;
	        width: 500px;
	        display: block;}
			
	@media (max-width: 1150px) {
		#div_top_box > img {
		    display: none;}
		    
		#div_fediverse_box > img {
		    width: 100px;
		    height: 100px;
		    margin-right: 0;
		    margin-top: 0;}

		.div_home_box > div {
		    text-align: center;
		    max-width: 100%;}
		    		    
		.div_codeberg_logo {
		    width: 100px;
		    height: 100px;
		    margin-left: 0;}
		    
		    .div_codeberg_logo > img {
		        width: 200px;
		        height: 100px;}
	}
				
.ul_home {
	color: #EEE;
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;}

	.ul_home > li {
	    flex-basis: 32.3%;
		text-align: center;
        box-sizing: border-box;
		padding: 16px;}
	    	
	    #ul_codeberg > li > p > a:hover,
		#ul_codeberg > li > p > a:focus {
		    color: var(--active-color);
		    text-decoration: underline;}
	
	    .ul_home > li > div {
	        display: block;
	        overflow: hidden;
	        height: 100px;
	        width: 200px;
	        margin: 8px auto 16px auto;}
	        	        	
	        .ul_home > li > div > img {
	            width: 200%;
	            height: 100%;}
				        	
		.ul_home > li > h3 {
			font-size: 1.5rem;
			font-weight: bold;
			margin: 8px auto 8px auto;}
						
		    .ul_home > li > p > a {
		        color: #EEE;
		        font-weight: bold;}
		        
		    .ul_home > li > p > a:hover,
		    .ul_home > li > p > a:focus {
		        color: var(--active-color);
		        text-decoration: underline;}

                .ul_home > li > a > img {
                    margin-top: 16px;}

	@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_codeberg_box > div > p > a:hover,
    #div_codeberg_box > div > p > a:focus,
    #div_fediverse_box > div > p > a:hover,
    #div_fediverse_box > div > p > a:focus {
        color: #EEAB2D;}
		
		.div_img > img {
		    position: relative;
		    left: -300px;}
		    
		.div_codeberg_logo > img,
		.ul_home > li > div > img {
		    position: relative;
		    left: -100%;}
		
			#a_read_news:before {
			    background-position: -48px;}
					
			#a_read_news:hover:before,
			#a_read_news:focus:before {
			    background-position: 0px;}
}