/* https://cloudconvert.com/otf-to-woff2*/
@font-face {
    font-family: 'GnGFont';
    src: url('fonts/tradewinds.woff') format('woff'),
		 url('fonts/tradewinds.woff2') format('woff2'),
		 url('/fonts/tradewinds.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GnGFont-Old';
    src: url('fonts/superrugged.woff') format('woff'),
		 url('fonts/superrugged.woff2') format('woff2'),
		 url('/fonts/superrugged.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Main body style*/
body {
	background: black;
	color: whitesmoke;
	font-family: Verdana, Arial, sans-serif;
}

.item0 { 
	/*Dead Space*/
	grid-area: x; 
}
.item1 { 
	/*banner*/
	grid-area: h; 
}
.item2 { 
	/*Discord Login*/
	grid-area: d; 
	display:inline-block;
	padding: 15px;
	margin: auto;
	border: 2px solid #FFFFFF;
	background-color:rgba(128, 128, 128, 0.7);
	text-shadow: 2px 2px 3px black, 0 0 45px black, 0 0 15px grey;
	border-radius: 10%;
}

.item3 { 
	/*Sidebar*/
	grid-area: s;
	display: flex;
	align-self: start;
	flex-direction: column;
	justify-content: flex-start;
	width: 95%;
	padding: 5px;
	border: 2px solid #FFFFFF;
	border-bottom: 4px solid whitesmoke;
	background-color:rgba(128, 128, 128, 0.7);
	text-shadow: 2px 2px 3px black, 0 0 45px white, 0 0 15px whitesmoke;
	border-radius: 10%;
}

.item4 {
	/*Main Body*/
	grid-area: m;
	display:inline-block;
	height: auto;
	width: 95%;
	padding: 5px;
	margin: auto;
	border: 2px solid #FFFFFF;
	border-bottom: 4px solid whitesmoke;
	background-color:rgba(128, 128, 128, 0.7);
	color: whitesmoke;
	text-shadow: 2px 2px 3px black, 0 0 45px black, 0 0 15px grey;
	border-radius: 50px;
}

.item5 { 
	/*footer*/
	grid-area: f;
	display:inline-block;
	height: auto;
	width: 95%;
	padding: 5px;
	margin: auto;
	border-bottom: 4px solid whitesmoke;
	background-color:rgba(128, 128, 128, 0.5);
	text-shadow: 2px 2px 3px black, 0 0 45px black, 0 0 15px grey;
}
.grid-container {
  width:95%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-areas:
	'd h h h x'
	'd h h h x'
	's m m m m'
	's m m m m'
	's m m m m'
	's m m m m'
	'f f f f f';
  gap: 3px;
  padding: 5px 0;
  border: 3px;
  align-items: start;
}

.logoImg {
	max-width:800px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	background: white;
	box-shadow: 10px 10px 10px 10px white 65% inset;
}

/* Head table used for bulk of body */
.headTable {
	width: 98%;
	min-height: 99%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	background-repeat: no-repeat, no-repeat; /* No repeat for both layers */
	background-position: center, center;     /* Both layers centered */
	background-size: cover, cover;           /* Both layers cover the entire container */
	border: 5px goldenrod solid;
}

/* Spacer box, used to add in extra space */
.spacerBox{
	width: 90%;
	height: 40px;
}