html { font-size:16px; }
/*Header image section*/
#header { width: 100%; background-color: #F4FFD1; /* Header image height */ height: 150px; background-image: var(--header-image); background-size: cover; background-position: center top; background-repeat: no-repeat; }
/* The centered bit of the page containing everything else */
#container { max-width: 700px; /* Change media-query below if this changes */ margin: 0 auto; /* Center content area */ border: 2px solid black; }
/* Links in container for 'a' tag */
#container a { color: #ED64F5; font-weight: bold; /* text-decoration:none; */ }



/* To make life easier, images sourced here */
:root {
	--header-image: url('/img/Urbex-pool.png');
	--body-bg-image: url('/img/backgrounds/01.jpg');
	--content: #F4FFD1;
}


/* Main text area where people view content */
main {
	background-color: #F4FFD1;
	flex: 1;
	order: 2;
	padding: 1em 2em;
  margin: auto;
	text-align: center;
	font-size: 16px;
}


body {
	background-color: #F4FFD1;	background-image: var(--body-bg-image);	background-repeat: repeat;
	font-family: "Times New Roman", Times, serif;	color: black;	margin: 0;
}

/* My old box method, but of course I don't need that anymore, yet the template used it, so keepsies */
.box {
	width: fit-content;			height: fit-content;	border: 2px solid black;	padding: 1em 2em;
	margin: auto;				background-color: #F4FFD1;	text-align: center;			font-size: 16px;
}



* { box-sizing: border-box; }



/* navigation layout */
#navbar { height: 40px; background-color: #F0Faa0; width: 100%; }
#navbar ul { display: flex; padding: 0; margin: 0; list-style-type: none; justify-content: space-evenly; }
#navbar li { padding-top: 10px; }

/* navigation link colour*/
#navbar li a { color: #ED64F5; font-weight: 800; text-decoration: none; }
/* navigation link hover colour */
#navbar li a:hover { color: #a49cba; text-decoration: underline; }

#flex { display: flex;}

h1,
h2,
h3 { color: #000000; }
h1 { font-size: 20px; }

/* colourize bold stuff, todo, change later when I use it*/
strong {color: #ED64F5;}

@media only screen and (max-width: 600px) {
  #flex { flex-wrap: wrap; }
  aside { width: 100%; }
  main { order: 1; }
  #navbar ul { flex-wrap: wrap; }
}