@keyframes in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes out {
	from { opacity: 1; }
	to { opacity: 0; }
}
.fadeIn {
	animation-name: in;
	animation-duration: 1s;
}
.fadeOut {
	animation-name: out;
	animation-duration: 1s;
}
.invis {
	opacity: 0;
}
.vis {
	opacity: 1;
}



* {
padding:0px;
margin:0px;
border:0px;
}

#topNav {
	display:flex;
	background:#777777;;
	flex-wrap: wrap;
	padding-left:0.2rem;
}
.navItem {
	background:#c0ddc0;
	padding-left:0.5em;
	padding-right:0.5em;
	padding-top:0.2em;
	padding-bottom:0.2em;
	margin: 0.2rem;
	border-radius:0.3em;
	transform: skewX(30deg);
}
.navItem > h3 {
	transform: skewX(-30deg);
	font-family: monospace;
	font-size: 1.2rem;
}
.navItem:hover{
	cursor:pointer;
	background:#7777ee;
	border-radius:0px;
	padding-left:1em;
	padding-right:1em;
}

#topBanner {
	font-family:monospace;
	font-size:2rem;
	background:#bb3333;
	margin-top:0px;
	display:block;
	padding:0.4em;

}
#disclaimer > p{
	font-family: monospace;
	font-size: 1.2rem;
	color: #ff3333;
}
#shouter {
	font-size: 1rem;
	margin: 0.2rem;
	padding: 0.1rem;
	border: 3px;
	border-radius: 3px;
	border-color: #888855;
	background: #aaaaaa;
}
.shouts {
	margin-top: 0.5rem;
	padding: 0.2rem;
}
#shoutMaker {
	padding: 0.2rem;
	margin: 0.2rem;
}
body {
	background: #222222;
}
main {
	display:flex;
	flex-wrap: wrap;
	flex-direction: column;
	padding-left: 2%;
	padding-right: 2%;
}
article {
	color: #dddddd;
	font-size: 1rem;
	margin: 0.25em;
	padding: 0.25em;
	border: 5px;
	border-style: dashed;
	border-radius: 0.5em;
	border-color: orange;
	max-width: 800px;
	min-width: 30vw;
	display:block;
}
article:hover {
	border-style: solid;
	border-color: #ffdddd;
}
article > ul {
	margin-left: 1em;
}
a {
	color:#9999bb;
	text-decoration:none;
}
#topNav > h3,
#topNav> a {
	color:#333;
	text-decoration:none;
}