*{
	font-family: "Arial", Verdana, "sans-serif";
	font-size: 16px;
	color: #0e1629;
	margin: 0;
	padding: 0;
	box-sizing: border-box;	
	text-align: justify;
}

@font-face {
	font-family: Aniron;
	src: url(../fonts/Aniron.ttf);
}

@font-face {
	font-family: Ringbearer;
	src: url(../fonts/RINGM___.TTF);
}

@font-face {
	font-family: Cinzel;
	src: url(../fonts/Cinzel-Regular.otf);
}

body {
	background-color: #0e1629;
}

#wrapper {
	max-width: 1000px;
	/* min-height: 100vh; */ /*view height */
	margin: 0 auto;
	display: grid;
	grid-template-areas:
		"banner"
		"menu"
		"content"
		"footer";
	grid-template-columns: 1fr;
	grid-template-rows: minmax(150px, auto) minmax(50px, auto) minmax(0px, auto) minmax(150px, auto);
}

header {
	/* name for primary grid */
	/* attach to header tag */
	grid-area: banner;
	/* -- sub grid set up -- */
	display: grid;
	grid-template-areas:
		"logo company company company";
	grid-template-columns: repeat(4, 1fr);
	background-color: #fbfcfe;
	
}

header img {
	/* name for sub grid section */
	grid-area: logo;
	margin: 2%;
    padding: 2%;
	background-color: #fbfcfe;
}

header h1 {
	/* name for sub grid section */
	grid-area: company;
	color: #c4af64;
	font-size: 2em;
	text-align: center;
	padding: 0 0 0 0;
	align-self: center;
	font-family: Aniron;
	text-shadow: 2px 2px 2px black;
	}

nav {
    grid-area: menu;
	height: 50px;
	margin: 0 0 0 0;
	background-color: #0e1629;
	color: #6f9ca1;
}

nav ul {
    width: 100%;
    list-style: none;
    /* this is a flex box inside nav for menu layout (row) */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
}

nav a {
	text-decoration: none;
	display: block;
	padding: 1em .5em 1em .5em;
	color: #6f9ca1;
	font-weight: bold;
}

nav a:hover {
	color: white;
	background: #6f9ca1;
}

/*------------main-----------*/

main a {
	color: #eb7124;
	text-decoration: none;
}

main a:hover {
	color: #6f9ca1;
	text-decoration: underline;
}

main#home {
	background-color: #fbfcfe;
	max-width: 100%;
	min-height: auto;
	padding: 1%;
    
	/*name for primary grid */
	grid-area: content;
	/*sub grid set up*/
	display: grid;
	grid-template-areas:
		"intro sidebar" 
		"info sidebar";
	grid-template-rows: minmax(0px, auto) minmax(0px, auto);
	grid-template-columns: 2fr 1fr;
	
}

main p {
	margin-bottom: 1em;	
}

article h2, aside h2 {
	color: #eb7124;
	font-family: Cinzel;
	font-size: 2em;
	padding-bottom: 2%;
	text-shadow: 2px 2px 2px black;
	text-align: center;
}

#content1 {
    margin: 0;
	/* name for sub grid section */
	grid-area: intro;
	background-color: #fbfcfe;
	padding: 1em 5% 1em 5%;
}

#content1 p {
	color: #0e1629;
}

#content2 {
	margin: 0;
	/* name for sub grid section */
	grid-area: info;
	background-color: #fbfcfe;
	padding: 1em 5% 1em 5%; 
} 

aside p {
	margin-bottom: 1em;
}

#sidebar {
	margin: 0;
	/* name for sub grid section */
	grid-area: sidebar;
	background-color: #fbfcfe;
	padding: 1em 5% 1em 5%;
}

/*poll*/

#formarea fieldset aside {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-template-rows: repeat(12, 1fr);
	margin-bottom: 2%;
}

form {
	background: #ffffff;
	border: 1px solid #0e1629;
	padding: 2%;

}

form p{
	padding: 2% 0 2% 0;
	font-weight: bold;
}

fieldset#poll {
	border: 0px;
}

label.poll4 {
	padding: 0.25em;
	margin: 0.25em 0 0.25em 0;
}

input.poll3 {
	
	border: 1px #0e1629 solid;
	margin: 0.25em 0 0.25em 0;
	padding: 1%;
}

legend#poll2 {
	background: #0e1629;
	color: #ffffff;
	width: 50%;
	padding: 1%;
	text-align: center;
}

#submit {
	display: block;
	width: 50%;
	background-color: #0e1629;
	color: #ffffff;
	margin: 0 auto;
	text-align: center;
	padding: 1% 0 1% 0;
}

/*float images*/

.floatright {
	float: right;
	padding: 1%;
	margin: 1%;
}

.floatleft {
	float: left;
	padding: 1%;
	margin: 1%;
}

.center {
	display: block;
	margin: auto;

	text-align: center;
}


/*---------main overview---------*/

main#about {
	background-color: #fbfcfe;
	max-width: 100%;
	min-height: auto;
	padding: 1%;
	/*name for primary grid */
	grid-area: content;
	/*sub grid set up*/
	display: grid;
	grid-template-areas:
		"about image";
	grid-template-rows: minmax(0px, auto);
	grid-template-columns: 1fr 1fr;
}


article h2, aside h2 {
	color: #eb7124;
	font-family: Ringbearer;
	font-size: 2em;
	padding-bottom: 2%;
	text-shadow: 2px 2px 2px black;
	text-align: center;
}

#overview {
    margin: 0;
	/* name for sub grid section */
	grid-area: about;
	background-color: #fbfcfe;
	padding: 1em 5% 1em 5%;
}

#overview p {
	color: #0e1629;
}

#overviewimage {
	margin: 0;
	/* name for sub grid section */
	grid-area: image;
	background-color: #fbfcfe;
	padding: 1em 5% 1em 5%;
}

/*----------main races----------*/

main#races {
	background-color: #fbfcfe;
	max-width: 100%;
	min-height: auto;
	padding: 1%;
	/*name for primary grid */
	grid-area: content;
	/*sub grid set up*/
	display: grid;
	grid-template-areas:
		"rcoverview"
		"races"
		"classes";
	grid-template-rows: minmax(0px, auto) minmax(0px, auto) minmax(0px, auto);
	grid-template-columns: 1fr;
}

article h2, aside h2 {
	color: #eb7124;
	font-family: Cinzel;
	font-size: 2em;
	text-shadow: 2px 2px 2px black;
	text-align: center;
	padding-bottom: 2%;
}

article h3, aside h3 {
	color: #eb7124;
	font-family: Cinzel;
	font-size: 1.5em;
	text-shadow: 2px 2px 2px black;
	text-align: center;
	padding-bottom: 2%;
}

#rcoverview {
	margin: 0;
	/* name for sub grid section */
	grid-area: rcoverview;
	background-color: #fbfcfe;
	padding: 1em 5% 1em 5%;
}

#races2 {
    margin: 0;
	/* name for sub grid section */
	grid-area: races;
	background-color: #fbfcfe;
	padding: 1em 5% 1em 5%;
}

#races2 p {
	color: #0e1629;
}

#classes {
	margin: 0;
	/* name for sub grid section */
	grid-area: classes;
	background-color: #fbfcfe;
	padding: 1em 5% 1em 5%;
}

#classes p {
	color: #0e1629;
}

table.race {
	width: 90%;
	margin: 2% 5% 2% 5%;
	border-collapse: collapse;
	overflow-x: scroll;
}

.race caption {
	caption-side: top;
}

.race td {
	border: 1px #0e1629 solid;
	width: 25%;
	padding: 1%;
}

.race th {
	background-color: #0e1629;
	color: #ffffff;
	height: 50px;
	text-align: center;
	}

table.class {
	width: 90%;
	margin: 2% 5% 2% 5%;
	border-collapse: collapse;
	overflow-x: scroll;
}

.class caption {
	caption-side: top;
}

.class td {
	border: 1px #0e1629 solid;
	width: 25%;
	padding: 1%;
}

.class th {
	background-color: #0e1629;
	color: #ffffff;
	height: 50px;
	text-align: center;
	}

/*----------main gallery-----------*/

main#gallery {
	background-color: #fbfcfe;
	max-width: 100%;
	min-height: auto;
	padding: 1%;
	/*name for primary grid */
	grid-area: content;
	/*sub grid set up*/
	display: grid;
	grid-template-areas:
		"imagesmain";
	grid-template-rows: minmax(0px, auto);
	grid-template-columns: 1fr;
		}

#imagesmain {
	margin: 0;
	/* name for sub grid section */
	grid-area: imagesmain;
	background-color: #fbfcfe;
	padding: 1em 2% 1em 2%;
}

aside#images {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
}

aside#images aside {
	width: 440px;
	height: auto;
	margin: .5em;
}

aside#images aside p {
	margin: 0.5em;
	color: #0e1629;
	text-align: center;
}

article h2, aside h2 {
	color: #eb7124;
	font-family: Cinzel;
	font-size: 2em;
	text-shadow: 2px 2px 2px black;
	text-align: center;
	padding-bottom: 2%;
}

/*------------main contact-----------*/

main#contact {
	background-color: #fbfcfe;
	max-width: 100%;
	min-height: auto;
	padding: 1%;
	/*name for primary grid */
	grid-area: content;
	/*sub grid set up*/
	display: grid;
	grid-template-areas:
		"contact contactinfo";
	grid-template-rows: minmax(0px, auto);
	grid-template-columns: 2fr 1fr;
	
}

#contactform {
    margin: 0;
	/* name for sub grid section */
	grid-area: contact;
	background-color: #fbfcfe;
	padding: 1em 5% 1em 5%;
}

#contactinfo {
    margin: 0;
	/* name for sub grid section */
	grid-area: contactinfo;
	background-color: #fbfcfe;
	padding: 1em 5% 1em 5%;
}

/*contact form*/

#formarea2 fieldset aside {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-template-rows: 1fr 1fr 3fr 1fr;
	margin-bottom: 2%;
}

form {
	background: #ffffff;
	border: 1px solid #0e1629;
	padding: 2%;

}

form p{
	padding: 2% 0 2% 0;
	font-weight: bold;
}

fieldset {
	border: 0px;
}

label {
	padding: 0.25em;
	margin: 0.25em 0 0.25em 0;
}

input {
	
	border: 1px #0e1629 solid;
	margin: 0.25em 0 0.25em 0;
	padding: 1%;
}

legend {
	background: #0e1629;
	color: #ffffff;
	width: 50%;
	padding: 1%;
	text-align: center;
}

#submit2 {
	display: block;
	width: 50%;
	background-color: #0e1629;
	color: #ffffff;
	margin: 0 auto;
	text-align: center;
	padding: 1% 0 1% 0;
}

/*------------footer-----------*/

footer {
	grid-area: footer;
	/* -- sub grid set up -- */
	display: grid;
	grid-template-areas:
		"fmenu sm";
	grid-template-columns: repeat(2,1fr);
	padding: 1%;
	background-color: #6f9ca1;
	margin: 0%;
}
footer #fmenu {
    grid-area: fmenu;
    width: 100%;
	background-color: #6f9ca1;
	padding: 2%;
}

footer #sm {
    grid-area: sm;
    width: 100%;
	background-color: #6f9ca1;
	padding: 2%;
	text-align: right;
	}


#fmenu ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#fmenu ul li a {
	text-decoration: none;
	display: block;
	width: 50%;
	color: #ffffff;
	padding: 1% 0 1% 2%;
}

#fmenu ul li a:hover {
	background-color: #eb7124;
	color: #ffffff;
}

#sm p, #sm h5 {
	text-align: right;
	color: #ffffff;
}


#sm, #contact a:hover {
	text-decoration: none;
	color: #eb7124;
}

footer h5 {
	font-size: 1.1em;
	color: #ffffff;
	text-shadow: 1px 1px 1px black;
	padding-bottom: 2%;
}


/*------------Media Queries-----------*/
	
@media screen and (max-width:600px)
{
#wrapper {
		grid-template-rows: 150px minmax(50px, auto) 1fr minmax(150px, auto)
	}
	
header {
		grid-template-columns: 100%;
		grid-template-rows: 100%;
	}

header img {
		
		margin: 0 auto;
	}

header h1 {
		display: none;
	}

main#home {
	/*sub grid set up*/
	display: grid;
	grid-template-areas:
		"intro" 
		"info"
		"sidebar";
	grid-template-rows: repeat(3, auto);
	grid-template-columns: repeat(1, 1fr);
}

main#about {
	/*sub grid set up*/
	display: grid;
	grid-template-areas:
		"about" 
		"image";
	grid-template-rows: repeat(2, auto);
	grid-template-columns: repeat(1, 1fr);
}

aside#images aside {
	width: 350px;
	height: auto;
	margin: .5em;
}

main#contact {
	/*sub grid set up*/
	display: grid;
	grid-template-areas:
		"contact" 
		"contactinfo";
	grid-template-rows: repeat(2, auto);
	grid-template-columns: repeat(1, 1fr);
}

	footer {
	grid-template-areas:
		"fmenu sm";	
	grid-template-columns: repeat(2, 1fr);
	padding: 1%;
	background-color: #6f9ca1;
	margin: 0%;
}

#sm p, #sm h5{
	text-align: right;
}

}
/*------------end-----------*/