html, body {

	margin: 0;
	padding: 0;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	box-sizing: border-box;

}

*:before, *:after {
  
	box-sizing: inherit;
}

:root {

  --primary-color: #0F4C81;
  --secondary-color: #EEE;
  --white: #FFF;
  --border-color: #ccc;
  --footer-bg: #999;
  --text-color: #333;
  --header-bg: #0F4C81;
  --main-bg: #FFF;
  --link-hover-color: #005A8D; /* Darker shade for hover state */
}

body {

	background-color: var(--secondary-color);
	color: var(--text-color);
	line-height: 1.6;
	font-size: 20px;

}

a {
	text-decoration: none;
	color: var(--primary-color);
	transition: color 0.3s ease;

}

a:hover {

	text-decoration: underline;
	color: var(--link-hover-color);
}

h1, h2 {

	margin: 0;
	padding: 10px 0;
}

h1 {

  	font-size: 45px;
}

h2 {

  	color: var(--primary-color);
	font-size: 35px;
}

h3 {

  	color: var(--primary-color);
	font-size: 30px;
}


#container {

	background-color: var(--main-bg);
	margin: 0 auto;
	padding: 20px;
	max-width: 1200px;
	width: 100%;
	min-height: 100vh;

}

#header {

	background-color: var(--header-bg);
	color: var(--white);
	text-align: center;
	padding: 5px 0;

}


#content {

	padding: 20px;

}

#main { 

	width: 1160px;
	padding: 0px;
	text-align: left;

}

#footer { 
	
	clear: both;
	padding: 10px;
	background-color: #999;
	color: white;
	text-align: center;
	
}

.container-columns {

	display: flex;
 	flex-direction: row;
 	gap: 20px;
}

.column-left { 
	
	padding: 20px;
  	background-color: white;
 	border: 1px solid #ccc;
  	flex: 1;
	
}

.column-right { 
	
	padding: 20px;
  	background-color: white;
 	border: 1px solid #ccc;
  	flex: 1;
	
}

#caption a {

	color: var(--white);
	text-align: center;
	font-size: 20px
	padding: 20px;
	transition: color 0.3s ease;

}