html { overflow-y: scroll; }

*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.hidden {
	display:none!important;
}

.transparent {
	transition:opacity 0.2s;
	opacity:0!important;
}

#content a {
	color:#00cc66;
	text-decoration:none;
} 
#content a:hover {
	color:#7affbd;
} 
a:visited {
	color:#00cc66;
} 
a:focus   {
	color:#d4d365;
} 
a:active  {
	color:#d4d365;
} 

hr {
	border-color:#595959!important;
	margin-top:20px;
	margin-bottom:20px;
}

body {
	background-color: #24435c;
	background-color: #001c3e;
	background-color: #10243c;
	xbackground-color: #002535;
	xbackground-image:url('http://chazu.arkku.net/files/img/cross.png');
	font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;
	padding: 0px;
	margin: 0px;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

h1, h2, h3, h4, h5 {
	font-family:Consolas, Monospace, 'Courier New'!important;
}



#topbar{
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	xheight:50px;
	padding:0px;
	margin:0px;

	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color:#15171a;
	height:100%;
	height:50px;

	
}	

#topbar-content {
	width:100%;
	height:100%;
	max-width: 800px;
	font-family:consolas, monospace, courier new;
	display: flex;
	align-items: center;
	justify-content: center;
	xflex:1;
}

#title-cont {
	height:100%; 
	display:flex;
	justify-content: center;
	align-items: center;
}

#title {
	xborder:1px solid grey;
	height:100%;
	z-index:1;
	padding: 0px 20px 0px 20px;
	font-size: 2em;
	text-decoration:none;
	color: #ffd748;
	display:flex;
	justify-content: center;
	align-items: center;
	transition: all 0.1s;
	cursor:pointer;
	text-shadow: 
		0 0 1vw #FA1C16, 
		0 0 3vw #FA1C16, 
		0 0 10vw #FA1C16, 
		0 0 0vw #FA1C16, 
		0 0 .4vw #FED128, 
		1px 1px 0px #806914;
}	

#title:hover {
	background-color:rgba(0,0,0,0.5);
}


#content {
	color:#e2e2e2 ;
	background-color:rgba(0,0,0,0.6);
	border-color:#000000 ; 
	letter-spacing:	0.2px;	
	margin:70px auto 50px auto;
	padding: 0px 40px 40px 40px;
	width:95%;
	max-width: 800px;
	border-radius:2px;
	line-height: 1.4;
	overflow-x: hidden;
}

.list-item {
	xborder:1px solid grey;
	border-radius:5px;
	width:100%;
	padding:5px;
	display:flex;
	justify-content: start;
	align-items: center;
}

.list-item > .image-cont {
	xborder:1px solid grey;
	display: flex;
	align-items: center;
	justify-content: center;
	margin:0px 5px 0px 0px;
	cursor: pointer;
	border-radius:5px;
	overflow:hidden;
	xbackground-color:rgb(29, 29, 29);
	box-shadow: 2px 2px 4px rgba(0,0,0, 0.8);
	width:50px;
	height:50px;
	aspect-ratio: 1/1;
}

.list-item > .image-cont:hover {
	xoutline:2px solid #00cc66;
} 

.list-item > .image-cont > .image {
	width:100%;
	height:100%;
	xmax-height:50px;
	xmax-width:50px;
}

.list-item > .text-cont  {
	display:flex;
	flex-direction: column;
	align-items: start;
	justify-content: center;
	height:100%;
	padding-left:5px;
	width: calc(100% - 50px);
}

.list-item > .text-cont > .title  {
	xborder:1px solid grey;
	xheight:50%;
	xpadding:5px 5px 0px 5px;

	xdisplay:inline-flex;
	xwidth:auto;
}

.list-item > .text-cont > .desc  {
	xheight:50%;
	xborder:1px solid grey;
	color:grey;
	xpadding-left:5px;
}