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

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

body{
	font-family:		Arial;	
	background-color:#262626; /*262626, 3a5c78*/
	color:#f3e6d0;
	-webkit-text-size-adjust:none;
	overflow:hidden;
	padding:0px;
	margin:0 0;
}

#content{
	width: 60%;
	margin-left:auto;
	margin-right:auto;
}	
	
#topArea{
	text-align:center;
}	
	
#title{
	font-size: 50px;
	font-family: Rockwell Extra Bold,Rockwell Bold,monospace; 
	color:white;
	text-shadow: 0px 0px 10px black; 
	margin-bottom:5px;
}	
	
#result{
	background-color:#262626;
	padding: 20px;
	width: 100%;
	margin-left: auto;
	margin-right:auto;
	text-align: center;
	border-radius:10px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.2) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.2) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.2) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}	
		
.item{
	margin-left:auto;
	margin-right:auto;
    margin-bottom:20px;
	color:#f2f2f2;
	font-size: 1.4em;
}


	
#build{
	width:350px;
	box-shadow: 2px 2px 4px #000000;
	background-color: #aa093c;
    border: none;   
    padding: 15px 15px;
	margin-bottom:15px;
	margin-left:auto;
	margin-right:auto;
    text-align: center;
    text-decoration: none;
    font-size: 45px;
	font-family:"Big Noodle Titling Oblique";
	color: #f3e6d0;
	letter-spacing:1px;
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
}	

#build:hover {
	background-color: #f20d55;
	color:#f5ead6;	
}

#build:active {
	background-color:#910833;
	color:#e5c99a;
}

#build:focus {
	outline:0;
}	


#footer {
	text-align: center;
	color: grey;
	font-size: 11px;
}

#footer a:link{
    color:grey;
}

#footer a:link:hover{
    color:#afb2b6;
}
	

@media screen and (max-width:975px) { /* this will be for smartphones*/
	body{
		width:100%;
		position:absolute;
		left:0;
		top:0;
		padding:0px;
	}
	#content{
		position:relative;
		left:0;
		top:0;
		width:100%;	
		padding:0px;
		margin-left:auto;
		margin-right:auto;
		text-align:center;
	}	
	
	#topArea{
		position:absolute;
		visibility:hidden;
	}	
		
	#title{
		display:none;
	}
		
	#result{
		border-radius:0px;
		position:absolute;
		width:100vw;
		padding:0px;
		top:0;
		left:0;
		margin-top:20px;
		margin-left:auto;
		margin-right:auto;
		overflow:hidden;
		background:none;
	}
		
	.item{
		xborder:1px solid grey;
		margin-left:0px;
		margin-right:0px;
		margin-bottom:4%;
		margin-top:0px;
		xpadding:0px;
		color:#f2f2f2;
		color:white;
		text-shadow: none; 		
		font-size: 7vw;
		background-color:rgba(0,0,0,0.5);
		padding:10px;
	}		
		
	#build{
		visibility:visible;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom:0;
		width:90%;
		height:30%;
		border-radius: 10px;
		font-size: 15vw;
		margin-bottom:5px;	
		xtransition: background-color 0.05s ease-in;
	}
	
	#build:hover {
		background-color: #aa093c;
	}
	
	#build:active {
		background-color: #49041a;
		color: #333333;
	}		
	
	#footer{
		display: none
	}
}