/* RESET */

* {
    /* Cancel out some differences between browser defaults */
    margin: 0;
    padding: 0;
    border: 0;
}
 
* {
    /* The width of an element will be the size of its border box,
       not its content box (which is the normal default). */
    box-sizing: border-box;
}

ul {
    list-style-position: inside;
}


/* LAYOUT */

/* The default layout is single column, so we don't need a grid or flexboxes.
   These are set up below in the media queries.
   
   We will set a max-width on the body, though, so that our layout does not break on browsers (it would default to 100% of the width of the window,
   which isn't what we want for old browsers that don't understand media queries or grid, etc.
   
   Note the padding and margins that are set here, so that text is not hard up against the edges of the viewport.
*/

body {
    /* These rules need to be overridden in the media queries. */
    max-width: 100rem;
    margin: 0 auto;
}

header, nav, main, footer {
    padding: 1em;
}

header {
    text-align: center;
}

/* TYPOGRAPHY */

body {
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.5;
}

nav, h1, h2, #site-name, .caption, footer a {
    font-family: "Century Gothic", Tahoma, sans-serif;
}

h1 {
    font-size: 3rem;
    
    /* We don't want the h1 to be bold. */
    font-weight: normal;
    text-align: center;
    margin: 1rem 0;
}

h2 {
    font-size: 1.25rem;
    font-weight: bold;
}

p {
    margin-bottom: 1em;
}

#site-name {
    font-size: 2rem;
    margin-bottom: 0;
}

nav {
    font-size: 1.25rem;
}

.caption {
    font-size: 1.25rem;
    text-align: center;
}

.painting-title {
    font-style: italic;
}


/* COLOUR SCHEME & BORDERS */

body {
    color: #444444;
}

header {
    background-color: #d4af37;
}

nav {
    background-color: #adb3ad;
}

h1 {
    border-top: 1px solid #999999;
    border-bottom: 1px solid #999999;
}

nav a {
    color: #ffffff;
}

a:hover, .active {
    color: #ffff00;
}

main a:hover {
    color: #ff0000;
}

footer {
    background-color: #666666;
}

footer a {
    color: #ffffff;
}


/* NAVIGATION */

nav ul, footer ul {
    list-style-type: none;
}

nav li {
    margin-bottom: 0.5em;
}

nav a, footer ul a {
    text-decoration: none;
}


/* IMAGES */

img {
    width: 100%;
}


/* RESPONSIVENESS */
/* Medium */
@media screen and (min-width: 62em) { /* give 2 extra em for the scroll bar, if 60 then 62 */
	body {
		display: grid;
		grid-template-columns: 1fr 30em 30em 1fr; /* Total width */
		grid-template-areas: " . header header . "
							 " . nav nav . "
							 " . main main . "
							 " . footer footer . ";
	}
	header {
		grid-area: header;
	}
	nav {
		grid-area: nav;
	}
	main {
		grid-area: main;
	}
	footer {
		grid-area: footer;
	}

	/* Flex Box */
	/* Header Section */
	header {
		display: flex;
		align-items: center;
	}
	header > img, header > #site-name {
		flex-basis: 0;
		flex-grow: 1;
	}
	header > img {
		flex: 0 0 25%;
	}
	header > #site-name {
		flex: 0 0 75%;
		text-align: left;
	}
	
	/* Nav Section */
	nav > ul {
		display: flex;
		justify-content: space-between;
	}
	
	/* Main Section */
	main {
		display: flex;
		gap: 2rem;
		padding: 1rem 0 1rem 0;
	}
	main > #content, main > #main-igame {
		flex-basis: 0;
		flex-grow: 1;
	}
	main > #content {
		flex: 0 0 55%;
	}
	header > #main-image { 
		flex: 0 0 45%;
	}
	
	/* Footer Section */
	footer > ul {
		display: flex;
		justify-content: space-between;
	}

/* Large */
@media screen and (min-width: 97rem) { /* give 2 extra em for the scroll bar, if 60 then 62 */
	body {
		grid-template-columns: 1fr 15rem 40em 40em 1fr; /* Total width */
		grid-template-areas: " . header header header . "
							 " . nav main main. "
							 " . nav main main . "
							 " . footer footer footer . ";
	}
	header {
		grid-area: header;
	}
	nav {
		grid-area: nav;
	}
	main {
		grid-area: main;
	}
	footer {
		grid-area: footer;
	}
	
	/* FlexBox */
	header {
		padding: 1rem, 2rem;
	}
	nav > ul {
		flex-direction: column;
		padding: 1rem;
	}
	main > #content {
		padding: 0 0 0 2rem;
	}
	footer ul {
		padding: 0 1rem;
	}

	/* Header */
	header {
		padding: 1em 2em;
	}
	header > img, header > #site-name {
	flex-basis: 0;
	flex-grow: 1;
	}
	header > img {
		flex: 0 0 15%;
	}
	header > #site-name {
		flex: 0 0 85%;
	}