html, body, div, span, h1, h2, p, ul, li, footer {
	/*resetting some default values*/
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}

body {
	font-size: 14pt;
	font-family: 'Crimson Text', serif;
	/*creates grey lines at side when window is too big*/
	max-width: 1000px;
	margin: auto;
	background-color: rgba(207, 207, 207);
}

#main {
	/*makes main content white, allows for sidebars to be grey when window is too big*/
	background-color: white;
}

p, h2, figure, ul, li, #timelinecontainer {
	/*properly indenting main content*/
	margin-left: 10%; margin-right: 10%;
	margin-top: 1%; margin-bottom: 1%;
}

h1, h2, .navlink {
	/*ensuring correct font family for all headings at once*/
	font-family: 'Kanit', sans-serif;
	font-weight: bold;
}

h1 {
	/*aligning 'Chessboxing' heading*/
	padding-top: 5%; padding-left: 10%;
	font-size: 46pt;
}

h2 {
	/*blueish colour for all h2s*/
	color: rgba(81, 109, 135);
}

a {
	/*no ugly underline!! white links*/
	text-decoration: none;
	color: white;
}

.navbg {
	/*setting navbar image, white text for nav bar, alignment, etc*/
	background-image: url("resources/chessboxing_background.jpg");
	background-color: black;
	color: white;
	min-height: 10%;
	max-height: 15%;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: contain;
}

#navbar {
	/*set navbar to be at margins of main content*/
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-end;
}

.navlink {
	/*total navbar, buttons, etc*/
	list-style-type: none;
	padding: 2%;
	margin: 0;
	bottom: 0;
	right: 0;
	margin-top: 10%;
}

.navlink:hover a {
	/*makes link yellow on hover*/
	color: yellow;
}

.navlink:hover {
	/*makes link bg transparent on hover*/
	background-color: rgba(255,255,255,.3);
}

figure {
	/*container for the different figures*/
	border: 3px solid rgba(201, 201, 201);
	border-radius: 25px;
	padding: 2%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	margin-left: 2%;
}

.media {
	/*allows images to scale without messing other stuff up*/
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;
	max-width: 95%;
	min-width: 50%;
}

figcaption {
	/*appropriate spacing under images and video*/
	margin: 2%;
}

.intro {
	/*copy space between navbar and content at top*/
	margin-top: 4%;
}

#videofig, #ring {
	/*alignments for the two right aligned figures
	overflow (video) partially hidden as implied on course discussion board*/
	float: right;
	max-width: 50%;
	text-align: center;
	overflow: hidden;
}

#video {
	/*no frame border for HTML validation purposes
	video kept to original size as stated in specification*/
	flex-grow: 0;
	flex-shrink: 0;
	width: 400px;
	height: 225px;
	border: none;
}

.timeline {
	/*for the table and map, not the full figure. centers them and puts them in a row*/
	padding: 2%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

thead {
	/*table heading, centred with thick borders*/
	text-align: center;
	border-top: 2px solid rgba(201, 201, 201);
	border-bottom: 2px solid rgba(201, 201, 201);
}

table {
	/*table with bottom borders and collapse so no gaps in the lines*/
	border-collapse: collapse;
	border-bottom: 2px solid rgba(201, 201, 201);
}

td {
	/*table columns and rows, normal borders, and padding for the correct spacing*/
	text-align: left;
	border-bottom: solid 1px rgba(201, 201, 201);
	padding: 3%;
}

#endQuote {
	/*only figure without a border*/
	border: none;
	text-align: left;
	display: block;
	flex-direction: row;
	margin-top: 0;
	/*slightly indented compared to other elements*/
	margin-left: 15%;
	margin-right: 15%;
}

#noItalics {
	/*unitalicise this segment italicised in the HTML*/
	font-style: normal;
}

.italiciseMe {
	font-style: italic;
}

/*Each chess piece before the h2s here. separately styled since they have different content each*/
#queen:before, #king:before, #rook:before, #bishop:before {
	font-weight: normal;
	font-family: 'DejaVu Sans', sans-serif;
}

#queen:before {
	content: "\2655";
	font-size: 55px;
}

#king:before {
	content: "\265a";
	font-size: 55px;
}

#rook:before {
	content: "\2656";
	font-size: 55px;
}

#bishop:before {
	content: "\265d";
	font-size: 55px;
}

footer {
	/*style and align footer, slightly grey text, keep at bottom*/
	background-color: black;
	color: rgba(227, 227, 227);
	text-align: center;
	padding: 8px;
	position: relative;
	right: 0px; left: 0px; bottom: 0px;
}

footer a {
	/*add underline and make it grey*/
	text-decoration: underline;
	color: rgba(227, 227, 227);
}

@media screen and (max-width: 600px) {
	p, h2, li, .intro {
		/*reset these to preferred defaults*/
		margin: 2%;
		padding-bottom: 2%;
		padding-top: 1%;
	}
	
	.intro {
		/*spacing for the top block of text and image. prevent wrap*/
		margin-top: 4%;
		display: block;
	}	
	
	.navbg {
		/*contain bg image and make the bottom area black*/
		background-color: black;
		background-size: contain;
	}
	
	#navbar {
		/*make navbar stack*/
		flex-direction: column;
		padding-left: 0;
		margin: 0;
	}
	
	.navlink {
		/*nav links on right*/
		margin: 0;
		text-align: right;
	}

	h1 {
		/*stop h1 overflow, correct indentation*/
		padding-left: 3%;
		max-width: 100%;
	}
	
	figure {
	/*slightly more indented in small view*/
		margin-left: 2%;
		margin-right: 8%;
	}
	
	#ring, #videofig {
		/*stops text wrapping and aligns center*/
		display: flex;
		min-width: 80%;
		max-width: 90%;
		margin-left: 4%;
		margin-right: 4%;
		align-items: center;
	}
	
	.timeline {
		/*stop table and map from being side by side*/
		justify-content: center;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 80%;
	}
	
	.timeline figcaption {
		/*pad the title to look more like photo*/
		padding: 2%;
	}
		
	#endQuote {
		/*create correct margins for the quote at the bottom*/
		margin-left: 8%;
		margin-right: 8%;
	}
}