@font-face {
    font-family: 'HopeGold';
    src: url("../assets/HopeGold.ttf");
}

html, body { margin: 0; padding: 0; }
::selection { color: var(--colour-6); background: var(--colour-3); }
*, *::before, *::after {
	box-sizing: border-box;
	scrollbar-color: var(--colour-4) var(--colour-6);
	scrollbar-width: thin;
	max-width: 100%;
}

.container { 
	display: grid;
	grid-template-areas:
		"head ."
		"main icon"
		"main nav"
		"foot .";
	width: var(--pagewidth);
	height: var(--pageheight);
	margin: calc((100vh - var(--pageheight)) / 2) auto;
	max-width: calc(70rem + var(--sidebarwidth)); /* this prevents the main section from getting too wide to read comfortable on large monitors */
	grid-template-columns: auto var(--sidebarwidth);
	grid-template-rows: min-content var(--sidebarwidth) auto min-content;
	gap: 15px; /* the space between sections. if you change the --outerborder variable above, you'll probably will want to adjust this too */
}

header span { 
	display: block;
	padding: 5px;
}

.container > figure {
	grid-area: icon;
	margin: 0; padding: 0;
}

footer p { margin: 1px; font-size: 100%; padding: 0; text-align: right; }
footer a { color: inherit; }

h1, h2, h3, h4 { 
	font-family: var(--headingfont), sans-serif;
	padding: 0.5rem 1rem;
	margin: 0;
	line-height:1;
}
h1 { background: var(--colour-4); color: var(--colour-2); font-size:350%;}
h2 { background: var(--colour-3); color: var(--colour-5); font-size:250%;}
h3 { background: var(--colour-2); color: var(--colour-5); font-size:200%;}
h4 { background: var(--colour-1); color: var(--colour-5); font-size:150%;}
h2, h3, h4 { margin: 1rem 0; }

a { 
	position: relative;
	color: var(--colour-3);
	text-decoration-color: var(--colour-1);
	text-decoration-style: none;
}
a:hover, a:focus {
	color: var(--colour-1);
}

main a:hover, main a:focus { 
	top: 1px;
	box-shadow: inset 0 -5px var(--bg-2);
}
p, ul, ol, dl, details, table, pre code, blockquote {
	margin: 1rem;
}
p, li, dd, dt, cite, code { 
	line-height: 1.5;
}
sup, sub { 
	line-height: 0;
}
s, del { 
	text-decoration-color: var(--colour-3); 
	text-decoration-thickness: 1.5px;
}
strong { 
	color: var(--colour-3);
	font-weight: bold;
} 
ul, ol {
	padding-left: 2rem;
}
ul ul, ol ul {
	margin: 0;
}
li {
	margin: 0;
}
li::marker {
  color: var(--colour-2);
}
dd {
	margin-left: 2rem;
}
dd + dt {
	margin-top: 1rem;
}
pre code { 
	display: block;
	overflow-x: auto;
}
summary { 
	padding: 0.5rem;
	cursor: pointer;
	border-radius: var(--border-radius);
}
summary:hover {
	background: var(--bg-2);
}
details[open] summary {
	margin-bottom: -0.5rem;
	border-radius: var(--border-radius) var(--border-radius) 0 0;
}
blockquote p, blockquote cite { 
	margin: 0.5rem;
	display: block;
}

/* ---------------GALLERY LAYOUT-------------------- */
.galleryrow {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}

/* Create four equal columns that sits next to each other */
.gallerycolumn {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.gallerycolumn img {
  margin-top: 10px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .gallerycolumn {
	flex: 50%;
	max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .gallerycolumn {
	flex: 100%;
	max-width: 100%;
  }
}
/*-------------------------------------------------*/

/* adjustments for mobile */
@media (max-width: 700px) {
	.container { 
		grid-template-areas:
			"head icon"
			"nav nav"
			"main main"
			"foot foot";
		width: calc(100% - 20px);
		height: fit-content;
		margin: 10px;
		grid-template-columns: auto var(--sidebarwidth);
		grid-template-rows: var(--sidebarwidth) var(--sidebarwidth) auto min-content;
}
	nav { border-radius: 0; }
	header { border-radius: var(--border-radius) 0 0 0; }
	.container > figure img { border-radius: 0 var(--border-radius) 0 0; }
	:root { --sidebarwidth: 100px; }		
}