body {
	font-family: "Times New Roman", Arial, sans-serif;
    font-size: 14px;
	margin: 0;
	padding: 0;
}

header {
	align-items: center;
	background-color: #454953;
	display: flex;
	justify-content: center;
	height: 100px;
	margin: 0;
	padding: 0;	
}

header h1 {
	color: #fff;
	font-size: 280%;
	margin: 0;
	padding: 0;
}

#content {
	display: flex;
	justify-content: center;
	margin: 20px;
}

#content h2 {
	font-size: 200%;
	margin: 0 0 25px 0;
	padding: 0;
}

#content #menu, #content #article {
	border: 2px solid #454953;
	border-radius: 10px;
	padding: 15px;
}

#content #menu {
	width: 200px;
}

#content #menu div {
	padding: 3px 0;
}

#content #menu div a {
	color: #000;
	font-size: 120%;
	text-decoration: none;
}

#content #menu .active a {
	color: #fb0404;
}

#content #article {
	margin: 0 20px;
}

#content #article p {
	font-size: 120%;
}

#content #article a {
	border-left: 2px solid #fb0404;
	color: #000;
	font-size: 100%;
	margin: 0;
	padding: 0 0 0 7px;	
}

#content #empty {
	width: 234px;
}

footer {
	align-items: center;
	background-color: #454953;
	display: flex;
	justify-content: center;
	height: 100px;
	text-align: center;
}

footer span, footer a {
	color: #fff;
}

@media screen and (max-width: 1380px) {

	#content #article {
		overflow-wrap: break-word;
		width: 700px;
	}

}

@media screen and (max-width: 1280px) {

	#content #article {
		width: 500px;
	}

}

@media screen and (max-width: 1080px) {

	#content #article {
		width: 400px;
	}

}

@media screen and (max-width: 950px) {

	#content {
		flex-direction: column-reverse;
		margin: 20px;
	}
	
	#content #article {
		margin: 0 auto;
		width: auto;
	}
	
	#content #menu {
		margin: 20px auto;
		width: auto;
	}
	
	#content #empty {
		display: none;
	}
	
}