/* variables */
:root {
  --bg-color: #3f3f3f;
  --bh-color: #333333;
  --fg-color: #ffffff;
  --ln-color: #DBEBC0;
  --hl-color: #CBD4C2;
}

@font-face {
	font-family:'pxplus';
	src: url(ttf/PxPlus_IBM_VGA8.ttf);
}






::selection {
	color: var(--bg-color);
	background-color: var(--fg-color);
	cursor: var(--hl-color);
	outline: var(--hl-color);
	text-shadow: 0px 1px 10px #000000;
}

* {
	font-family: 'pxplus';
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
	margin-bottom: 0;
}



body {

	background-color: var(--bh-color);
}

.flex-container {
	flex-direction: column;	
	display: flex;
	width: 80%;

	margin-left: 10%;
	margin-right: 10%;
}

.header {
	margin-top: 1%;
	margin-bottom: 1%;




	padding-top: 1%;
	padding-bottom: 1%;

	display: flex;
	
	background-color: var(--fg-color);
	color: var(--bg-color);

	box-shadow: 0px 1px 50px inset #000000, 0px 1px 50px #000000;
	border: 5px solid var(--bg-color);
	text-shadow: 0px 10px 30px #000000;
	justify-content: space-between;
	flex-direction: row;

	font-size: 150%;
}

.header img {
	display: block;
}
.header h1 {
	display: block;
}


.main {
	text-shadow: 0px 10px 30px #000000;
	display: flex;		
	flex-direction: row;
	
}

.main1 {

	display: inline;
	
	
	padding-top: 1%;
	padding-left: 1%;
	padding-right: 1%;
	padding-bottom: 1%;

	margin-right: 1%;

	width: 67%;
	background-color: var(--bg-color);
	color: var(--fg-color);

	box-shadow: 0px 1px 50px inset #000000, 0px 1px 50px #000000;
	border: 5px solid var(--bg-color);
	
}

.row {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.row img {
	margin-right: 1%;
	margin-left: 1%;
}

.main2 {

	font-size: 150%;

	display: inline-block;

	
	
	
	padding-top: 1%;
	padding-left: 1%;
	padding-right: 1%;
	padding-bottom: 1%;

	margin-left: 0%;

	width: 28%;
	background-color: var(--bg-color);
	color: var(--fg-color);


	box-shadow: 0px 1px 50px inset #000000, 0px 1px 50px #000000;
	border: 5px solid var(--bg-color);

}
.main2 a {
	background-color: var(--ln-color);
	color: var(--bg-color);
	text-decoration: none;
	box-shadow: 0px 1px 10px inset #000000, 0px 1px 20px #000000;
	text-shadow: 0px 10px 30px var(--ln-color);

}

.main2 a:hover {
	color: var(--ln-color);
	background-color: var(--bg-color);

	transition: background-color 0.3s linear;
	transition: color 0.3s linear;
}


.footer {
	display: flex;
	padding-left: 1%;
	padding-right: 1%;

 

	margin-top: 1%;
	background-color: var(--bg-color);
	border: 5px solid var(--bg-color);
	box-shadow: 0px 1px 50px inset #000000, 0px 1px 50px #000000;
	justify-content: space-between;
	flex-direction: row;
	align-items: center;



	text-shadow: 0px 10px 30px #000000;
}

.footer a {
	
	text-decoration: none;
	color: var(--ln-color);
	display: inline-block

	padding-top: 0%;
	padding-bottom: 0%;

}

.footer a:hover {
	text-shadow: 0px 10px 30px var(--ln-color);
	text-shadow: color 0.5s linear;

}