*{
	margin: 0;
	padding: 0;
}

body {
	background: #fff;
	font-family: Tahoma, Helvetica, sans-serif;
}
img {
	border: none;
	max-width: 100%;
	margin: 5px 0;
}
img:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
header {
	text-align: center;
	background-color: #f5f5f5;
	padding: 20px 0;
}
header h2 {
	margin: 0;
}
footer {
	text-align: right;
	background-color: #f5f5f5;
	padding: 10px 20px;
}
footer a {
	text-decoration: none;
	color: #8b0000;
	font-weight: bold;
}
footer a:hover {
	text-decoration: underline;
}
.container {
	display: flex;
	flex-wrap: wrap;
}
.left-column {
	width: 30%;
	background-color: #f9f9f9;
	padding: 20px;
	box-sizing: border-box;
}
.left-column h3 {
	margin: 5px 0 5px 0;
}
li {
	list-style: none;
}
.right-column {
	width: 70%;
	padding: 20px;
	box-sizing: border-box;
}
.content h1, .content h3 {
	text-align: center;
}
.content h1 {
	font-size: 150%;
	margin: 0 0 10px 0;
}
.content h3 {
	margin: 5px 0 5px 0;
}
p {
	text-align: left;
	font-size: 100%;
	line-height: 2;
}
a {
	text-decoration: none;
	color: #8b0000;
	font-weight: bold;
	word-wrap: break-word;
}
a:hover {
	text-decoration: underline;
}
a:active, a:visited {
	color: #8b0000;
}
.time {
    display: inline-block;
    vertical-align: top;
    background: #F0F0F0;
    font-size: 150% !important;
    padding: 3px 3px;
    /*border-radius: 3px;*/
    margin: 0 0 3px 0;
    transition: background .1s linear, color .1s linear;
    will-change: background, color;
    cursor: pointer;
}
.blue{
	color: blue;
}
.green{
	color: green;
}
.red{
	color: red;
}
.center{
	text-align: center;
}
.tooltip{
    position: relative;
    display: inline-block;
    cursor: pointer;
    color: blue;
}
.tooltip .tooltiptext{
    visibility: hidden;
    width: 150px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
}
.tooltip:hover .tooltiptext{
    visibility: visible;
    opacity: 1;
    }
@media (max-width: 768px) {
	.left-column {
		width: 100%;
		order: 2;
	}
	.right-column {
		width: 100%;
		order: 1;
}