@media (max-width: 62.5rem) {
	html {
		font-size: 50%;	
	}
	
	li {
		height: 1.8rem;
		margin-left: 1.8rem;
		font-size: 1.4rem;
		
	}
	
	.header {
		padding: 0.8rem; /* 8px */
		font-size: 2.5rem;
		
	}
	.box ul {
		margin-top: 2.4rem; /* Ensure proper spacing from title bar */
		margin-top: 1.2rem; /* Ensure proper spacing from title bar */
		margin-bottom: 0;
		padding-left: 0.6rem;
		padding-top: 2.0rem;
		padding-bottom: 0.5rem;
		font-size: 1.4rem;
    }
	
	.box-header {
        padding: 0.5rem; /* 5px */
		padding-left: 0.8rem; /* 8px */	
		font-size: 1.6rem; /* 15px */	
    }
	
	.box-text {
		margin-top: 1.8rem; /* Ensure proper spacing from title bar */
		padding-left: 0.8rem;
		padding-top: 1.8rem;
		line-height: 1.2;
		font-size: 1.4rem;
		}
		
	.event-container {
		margin-top: 3.0rem; /* Ensure proper spacing from title bar */
        }
		
	.event-container > div {
		padding: 5px;
		font-size: 1.4rem;
		}
		
	.right-column {
        width: 65%;
		max-width: 45rem;
        }
		
	#footer {
			font-size: 1.6rem;
			height: 2.5rem;
        
	
}


@media (max-width: 31.25rem) { /* 500px */
	
	html {
		font-size: 50%;	
	}	
		
	.container {
		flex-direction: column;
	}
	
	.left-column, .right-column {
		width: 100%;
	}
					
}