*
{
	box-sizing:border-box;
	image-rendering:optimizespeed;
}

body
{
	background-repeat: no-repeat;
	background-attachment:fixed;
	background-position:center;
	background-color:#000000;
	color:#f0f0f0;
	font-size:14px;
}

#title
{
	margin:auto; 
	width:848px; 
}

#content
{
	margin:auto;
	width:800px;
	border-style: solid;
	border-color: #FFFFFF;
	border-width: 0px 2px 0px 2px;
}

h1
{
	font-size:20px;
	margin:20px;
	margin-left:0px;
	padding:4px;
	padding-left:0px;
}

h2
{
	font-size:20px; 
}

.btn
{
	color:#f0f0f0;
	border-bottom-color:rgba(0, 0, 0, 0);
	border-bottom-width:2px;
	border-bottom-style:solid;
}

.btn:hover, .btn:focus
{
	color:inherit;
	border-bottom-color:#ffffff;
	border-bottom-width:2px;
	border-bottom-style:solid;
	box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
}

.char1, .char1:hover, .char1:focus
{
	color:#ff00ff;
}

.char2, .char2:hover, .char2:focus
{
	color:#ff8000;
}

.char3, .char3:hover, .char3:focus
{
	color:#00ffff;
}

.char4, .char4:hover, .char4:focus
{
	color:#00ff00;
}

.char5, .char5:hover, .char5:focus
{
	color:#ff0000;
}

.chartext
{
	width:50%;
}

#charbox
{
	z-index:-2;
	position:fixed;
	background-color:#000000;
	opacity:0.75;
	width:100vw;
	height:100vh;
	top:0;
	left:0;
}

#charimg
{
	z-index:-1;
	position:fixed;
	width:100vw;
	height:100vh;
	overflow:hidden;
	top:0;
	left:0;
}

.char
{
	z-index:-3;
	position:fixed;
}

#char1
{
	left:calc(50vw - 50px);
	top:0px;
}

#char2
{
	left:calc(50vw - 300px);
	top:0px;
}

#char3
{
	left:calc(50vw - 1050px);
	top:0px;
}

#char4
{
	left:calc(50vw - 800px);
	top:0px;
}

#char5
{
	left:calc(50vw - 550px);
	top:0px;
}