@font-face{
	font-family: "Big Noodle Titling Oblique";
	src: url('https://chazu.arkku.net/files/font/big_noodle_titling_oblique.ttf');
}

body{	
	background:	#364a63	 ;  /* #1C1C1A,  #121211, legit harmaa > #2b2f34 */
	font-family:Arial;	
	color:#DCEBDD;
	padding:0px;
	margin:0px;
	font-family: 'Roboto', sans-serif;
	overflow-x:hidden;	
	width:100wv;
}
	
a:link{color:#00cc66} 
a:visited{color:#00cc66 } 
a:hover{color:#16e980;} 
a:focus{color: } 
a:active{color:#d4d365;} 

*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
	
#top-bar{
	width:100vw;
	height:50px;
	background-color:#1d2630;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
}	
	
#top-bar > .title{
	margin:auto;
	padding:10px;
	font-size: 25px;
	font-weight:400;
	display:inline-block;
}	

#content{
	width:100vw;
	padding:10px;
	position:absolute;;
}

#content > .side {
	float:left;
	height:90vh;
	padding:10px;
}

@media (max-width: 600px){
	#content { 
		width:100vw;
	}
	
	#title {
		display:block;
	}

	#content > .side {
		float:none;
		height:auto;
		padding:0px;
	}

	.side#left, .side#right {
		width: 95vw!important;
		xdisplay:inline-block;
		xmargin: 0px;
	}

	.side#left > #category-title-area {
		display:none;
	}
	
	.side#left > #snippet-selection-area {
		max-height: 250px;
		overflow-y: scroll;
		margin-bottom: 10px;
		xborder: 1px solid grey;
		xborder-top: 10px solid #1d2630;
		xborder-bottom: 10px solid grey;
		background-color: rgba(255, 255, 255, 0.2);
		margin-left: -10px;
		margin-right: -10px;
		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
	}
	
	
	
	
}