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

*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
	background-color: black;
	xbackground-image: url('https://images2.imgbox.com/92/f8/QQT758Fw_o.jpg');
	background-image: url('https://images2.imgbox.com/1a/01/zzZLSrn2_o.jpg');
	width: 100vw;
	height: 100vh;

	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
	user-select: none;
}

#window {
	border-radius: 8px;
	width: 300px;
	height: 400px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	text-align: center;
	color: white;
	background-color: black;
	xpadding: 30px;
	position: relative;
	z-index: 10;
	border-style: solid;
	border-width: 34px 6px 6px;
	-moz-border-image: url('../img/border3.png') 34 6 6 repeat;
	-webkit-border-image: url('../img/border3.png') 34 6 6 repeat;
	-o-border-image: url('../img/border3.png') 34 6 6 repeat;
	border-image: url('../img/border3.png') 34 6 6 fill repeat;
	box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.99);
}


#title {
	xborder: 1px solid lime;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	padding: 5px;
	xborder-bottom: 4px double lime;
}

#title > .part {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

#title > .part.left {

}
#title > .part.right {
	width: 30%;
}

#title > .part.left > .cont {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-content: center;
}



#keygen-name{
	xborder: 1px solid green;
	display:inline-block;
	xpadding:5px;
	font-size: 3em;
	xfont-family: "CloisterBlack";
	xfont-family: Consolas,monaco,monospace; 
	font-family:"Armada Bold";
	font-family: "Big Noodle Titling";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	

}

#name-suffix {	
	xborder: 1px solid gold;	
	width:150px;
	xfont-family: "Laserjerks Regular";
	xfont-family: "Perceval-Bold";
	font-family: "Big Noodle Titling";
	display:inline-block;
	font-size: 40px;
	padding:5px;
	color:black;
	background:lime;
}

#serial-text{
	xposition:absolute;
	xmargin-top:70px;
	text-align: left;
	padding: 10px 5px 5px 5px;
	color:rgba(255,255,255,0.3);
	color:lime;
	font-size:12px;
	font-family: arial;
	font-family: Consolas,monaco,monospace; 
}

#serial {
	margin-top: 0px;
	margin-bottom: 10px;
	width: 95%;
	margin: auto;
	font-family: Consolas,monaco,monospace;
	background:white;
	color:black;
	padding: 5px 10px 5px 10px;
	font-size: 0.9em;

	z-index:2;
	user-select: text;
	
}

#subtitle {
	xborder: 1px solid grey;
	xfont-style:italic;
	font-size:16px;
	margin:25px auto 0px auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px;

	font-family: Consolas,monaco,monospace; 
	color:rgba(255,255,255,0.3);

	xfont-family:"Armada Bold";
	xfont-family: "Laserjerks Regular";
	
}


#btn-generate {
	width:150px;
	heigth: 150px;
	font-size:30px;
	font-style:italic;
	font-family: "Big Noodle Titling";
	cursor: pointer;
		
}

#btn-generate-all{
	position:absolute;
	left:0;
	top:0;

}

#icon{
	width:100%;
	aspect-ratio: 1/1;
	filter: 
		sepia(1) 
		saturate(8000%)
		hue-rotate(58deg)
		brightness(1.0)
	;
}

#icon:after{
	border: 5px solid lime;
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
}

#bg-generate-all{
	xcontent:" "; 
	position:absolute;
	width:120%;
	height:120%;
	margin-top:-10%;
	margin-left:-10%;
	xbackground:green;
	xz-index:-10;
}

#buttons{
	position:absolute;
	top:0;
	right:0;
	margin-top: -29px;
}

#window-name{
	xfont-family: Segoe UI Regular; 
	font-family: Tahoma,Verdana,Segoe,sans-serif; 
	color:black;
	font-size:13px;
	position:absolute;
	top:0;
	left:0;
	margin-top:-30px;
	margin-left:21px;
}

#window-icon{
	xclip-path: inset(1px 1px 1px 1px);
	position:absolute;
	top:0;
	left:0;
	margin-top:-29px;
	xmargin-left:10px;
	background-color: black;
	border-radius: 2px;
	width:16px;
	height:16px;
	image-rendering: -moz-crisp-edges;
	image-rendering: -moz-crisp-edges;
	image-rendering: -o-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	-ms-interpolation-mode: nearest-neighbor;
	
}

#game-name{
	xposition:absolute;
	margin-top:10px;
	xmargin-left:20px;
	font-size:25px;
	xletter-spacing: 2px;
	font-family: Georgia, 'Times New Roman', Times, serif;
	xfont-family: Consolas,monaco,monospace; 
	xfont-family:"Armada Bold";
	xfont-family: "Laserjerks Regular";
	xfont-family: "Perceval-Bold";
	xfont-family: "Big Noodle Titling";
	
	
}