:root{
	--logoColor: #dadee9;
	
	/* Grid Background */
	--bg: #0b0f14;		/* background color */
	--grid: #2a2a31;	/* line color */
	--cell: 35px;		/* square size */
	--line: 2px;		/* line thickness */
	--fade: 140px;		/* fade depth at top/bottom */
}

@font-face{
	font-family:'Nestfont';
	src:url('../fonts/Nestfont.ttf') format('truetype');
	font-weight:normal;
	font-style:normal;
	font-display:swap;
}

@font-face{
	font-family:'Pixtura12';
	src:url('../fonts/Pixtura12.ttf') format('truetype');
	font-weight:normal;
	font-style:normal;
	font-display:swap;
}

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
    text-align:center;
}

body{
    background-color:#06060c;
    color:var(--logoColor);
    font-family:Nestfont;
	position:relative;
}

a{
	color:var(--logoColor);
}

h2{
    color:#000000;
    font-family:Pixtura12;
    font-size:100px;
    text-shadow:4px 4px 14px rgba(0,0,0,0.6);
}

#forsworn-btm{
    color:#06060c;
    font-size:40px;
	margin:40px 0;
    text-shadow:4px 4px 10px rgba(0,0,0,0.6);
}

#forsworn-top{
    color:#06060c;
    font-size:40px;
	margin-top:-300px;
	position:relative;
    text-shadow:4px 4px 10px rgba(0,0,0,0.6);
	z-index:2;
}

#forsworn-top p{
	line-height:60px;
}

#forsworn-screenshot{
	background-image:url('../images/forsworn-cross-section.png');
	background-position:center;
	background-repeat:no-repeat;
	height:480px;
}

.grid-bg{
	background:
		/* vertical lines */
		repeating-linear-gradient(
			90deg,
			var(--grid) 0,
			var(--grid) var(--line),
			transparent var(--line),
			transparent var(--cell)
		),
		/* horizontal lines */
		repeating-linear-gradient(
			0deg,
			var(--grid) 0,
			var(--grid) var(--line),
			transparent var(--line),
			transparent var(--cell)
		),
		var(--bg);

	/* Fade top & bottom into bg */
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0,
		#000 var(--fade),
		#000 calc(100% - var(--fade)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		transparent 0,
		#000 var(--fade),
		#000 calc(100% - var(--fade)),
		transparent 100%
	);
}

#knight{
    height:100px;
	right:-800px;
	margin-top:-100px;
	position:absolute;
	width:100%;
}

#logo{
    height:auto;
	width:100%;
}

#logo .clr{
	fill:var(--logoColor);
}

.flip-xy{
	transform: scale(-1, -1);
}

.smoke{
    background-image:url(../images/smoke.png);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    height:100%;
	position:relative;
    width:100%;
	z-index:1;
}

.smoke-bg{
	background-color:#dbdee8;
}

@media screen and (max-width:767px){
}

@media screen and (min-width:768px) and (max-width:1024px){
}

@media screen and (min-width:1025px){
	body{
	 padding:60px 0;
	}
	
	.grid-bg{
		min-height:700px;
	}
	
	#logo{
		margin:140px 0 0 0;
		max-width:400px;
	}
}