.body
{
	margin: 0px;
	padding: 0px;
}

p
{
	margin: 15px 0px 15px 0px;
	padding: 0px;
}

.main
{
	font-family: arial;
	font-size: 18px;
	padding: 10px;
	max-width: 800px;
	margin: auto;
}

a
{
	color: #0000ff;
	text-decoration: none;
}

a:hover
{
	color: #ff0000;
	text-decoration: none;
}

.banner {
	flex: 100%;
	font-size: 30px;
	font-weight: bold;
	font-family: arial;
}

.hblock {
	padding-left: 20px;
	padding-right: 20px;
}

.footer {
	padding: 20px;
	flex: 100%;
	font-size: 14px;
	font-family: arial;
	margin: 0px;
	text-align: center;
}

.flex-container {
	display: flex;
	flex-direction: row;
	font-size: 18px;
}

.flex-item-left {
	padding: 20px;
	flex: 50%;
}

.flex-item-right {
	padding: 20px;
	flex: 50%;
}

.minititle
{
	font-family: arial;
	font-weight: bold;
	margin-bottom: 10px;
	color: navy;
}

.inner-container {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px)
{
	.banner {
	}
	.main
	{
		font-family: Arial;
		font-size: 18px;
		padding: 0px;
		margin: 0px;
	}
	.flex-container
	{
		flex-direction: column;
	}
	.flex-item-left {
		padding: 10px;
	}

	.flex-item-right {
		padding: 10px;
	}
	
	.inner-container {
        gap: 20px;
        display: flex;
        flex-direction: column; /* Stack columns vertically */
    }
}