:root {
	--bg-color: #191919;
	--txt-color: #F0F0F0;
	--hl-color: #8C8C8C; 
}


@font-face {
	font-family: "Andale Mono";
	src: url('./andalemo/AndaleMono.eot');
	src: url('./andalemo/AndaleMono.svg') format('svg');
	src: url('./andalemo/AndaleMono.ttf') format('truetype');
	src: url('./andalemo/AndaleMono.woff') format('woff');
	src: url('./andalemo/AndaleMono.woff2') format('woff2');
}

/* @charset "UTF-8"; */

.logo {
	/* filter: invert(0.54); */
	filter: invert(0.95);
	padding-top: 2%;
	padding-left: 4%;
	width: 500px;
	height: 100px;
}

.body {
	/* background-color: #386ba8; */
	background-color: var(--bg-color)
}

.text {
	padding-top: calc(min(5%, 40px));
	padding-left: 4%;
	width: 39em;
	/* padding-right: 52%; */
	font-family: "Andale Mono";
	/* background-color: #386ba8; */
	font-size: 16px;
	line-height: 140%;
	overflow-x: auto;

	color: var(--txt-color);
}

.link {
	font-family: "Andale Mono";
	font-style: bold;
	/* color: #0925c3; */
	color: var(--hl-color);
	font-size: 16px;
	line-height: 140%;
	text-decoration: none;
}

.link:hover {
	text-decoration: underline rgba(140, 140, 140, 0.25);
}

@media screen and (max-width: 650px) {
	.link {
		line-height: 100%;
		font-size: 2.3vh;
	}

	.logo {
		width: 90%;
		height: 9%;
		padding-top: 5%;
		padding-left: 4%;
	}

	.text {
		padding-left: 5%;
		padding-right: 5%;
		width: auto;
		font-size: 2.3vh;
		line-height: 125%;
		font-weight: lighter;
	}



}