@font-face {
    font-family: woods;
    src: url('https://novalite.rest/font/woods.ttf');
}
@font-face {
    font-family: brushaff;
    src: url('https://novalite.rest/font/brushaff.otf');
}
body {
    background: url('https://novalite.rest/siteImage/darly/drlBg.png');
    background-size: cover;
	background-position: top;
	background-attachment: fixed;
    width: 65em;
    margin: 2em auto 0 auto;
    font-family: brushaff;
    color: #230A03;
    text-transform: lowercase!important;
}
a, a:link, a:hover, a:active, a:visited {
    color: #291809;
    text-decoration: none;
    border: 1px dotted #291809;
    padding: 5px 6px 2px;
    transition: 0.4s ease;
}
a:hover {
    letter-spacing: 0.025em;
}
.grid-container {
    display: grid;
    grid-template-areas:
      'nav nav nav nav nav nav'
      'left main main main main right'
      'footer footer footer footer footer footer';
    background-color: #332C1F;
    border: 4px solid #332C1F;
    margin: 0;
    padding: 0;
    gap: 0.25em;
}
#scanlines {
    display: block;
    width: 64.5em;
    height: 44em;
    position: absolute;
    z-index: 99;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 2;
    background-size: 100% 2px, 2px 100%;
    pointer-events: none;
}
.gridGlobal {
    background-color: #EDE8E4;
    padding: 0.45em;
    border: 3px groove #B1A9A2;
    text-shadow: -1px 0 #FFF8F3, 0 1px #FFF8F3, 1px 0 #FFF8F3, 0 -1px #FFF8F3;
}
.gridGlobal .inner {
    width: 100%;
    height: 100%;
    font-size: 1.1em;
}
.header {
    width: 95%;
    font-size: 5em;
    color: #1D1610;
    text-align: center;
    margin: 0 auto;
    font-family: woods;
}
.subHeader {
    font-size: 1.5em;
    font-style: italic;
    color: #1D1610;
    text-align: center;
    margin: 0 auto 0.75em;
}
.nav {
    grid-area: nav;
    text-align: center;
    height: 1.33em;
}
.nav img {
    vertical-align: -0.2em;
    margin: auto 0.4em;
}
.left {
    grid-area: left;
    height: 35em;
    width: 10.75em;
}
.sidebarImg {
    width: 100%;
    height: 31.75em;
}
.main {
    grid-area: main;
    height: 35em;
    width: 38.5em;
}
.right {
    grid-area: right;
    height: 35em;
    width: 10.75em;
}
.footer {
    grid-area: footer;
    height: 3.5em;
    text-align: center;
}
.footer img {
    margin: auto 0.2em;
    height: 0.9em;
}
#ftSideImgA {
    height: 3em;
    float: left;
    transform: scaleX(-1);
    margin-left: 1em;
}
#ftSideImgB {
    height: 3em;
    float: right;
    margin-right: 1em;
}
#scanlinesBtn {
    display: block;
    width: fit-content;
    margin: 0.5em auto 0;
    background: #B4ACA5;
    background: rgb(180,172,165);
    background: linear-gradient(180deg, rgba(180,172,165,1) 51%, rgba(142,137,133,1) 100%);
    border: 3px groove #B1A9A2;
    font-family: brushaff;
    transition: 0.4s ease;
    font-size: 0.8em;
}
#scanlinesBtn:hover {
    cursor: pointer;
    transform: scale(103%);
}
.sidebarMobile {
    display: none;
}
@media screen and (max-width: 799px) {
    body {
        width: 100%;
        margin: 0;
    }
    .grid-container {
        display: flex;
        flex-wrap: wrap;
    	grid-template-areas: none;
    	gap: 0;
    	padding: 0;
    	width: 95%;
    	position: relative;
    	z-index: 3;
    	margin: auto auto 4em auto;
    }
    .nav, .left, .main, .right, .footer {
        width: 100%;
        height: auto;
        margin-bottom: 0.4em;
    }
    .main {
        height: 35em;
    }
    .header {
        font-size: 3.5em;
    }
    .subHeader {
        font-size: 1.5em;
    }
    .nav a {
        display: block;
        width: 60%;
        margin: 0.2em auto;
    }
    #scanlines, .sidebarImg, #scanlinesBtn {
        display: none;
    }
    .sidebarMobile {
        display: block;
        width: 100%;
    }
}