/* Accessible colour combo -- Inch Worm // Midnight Blue */

.theme {
	color: #d2ed3b;
	background-color: #1d0235;
}

.theme-alt {
	color: #1d0235;
	background-color: #d2ed3b;
}


html {
	box-sizing: border-box;
	scroll-behavior: smooth;
}

*:before, *:after {
	box-sizing: inherit;
}

:root {
	--palette-yellow: #f6b618;
	--palette-orange: #f39e1e;
	--palette-fulvous: #dc8a10;
	--palette-green: #56711d;
	--palette-blue: #c8d8f1;
	--palette-brown-light: #583606;
	--palette-brown-dark: #372204;
	--palette-grey-dark: #272727;
	--palette-floral-white: #fef7ec;
	
	--palette-acc-yellow: #d2ed3b;
	--palette-acc-blue: #1d0235;

	/* OLD PALETTE
	--c-bg: var(--palette-yellow);
	--c-text: var(--palette-brown-dark);
	--c-text-light: var(--palette-brown-light);
	--c-bg-light: var(--palette-brown-light);
	--c-highlight: var(--palette-yellow);
	*/

	--c-bg: var(--palette-acc-blue);
	--c-text: var(--palette-acc-yellow);
	--c-text-light: var(--palette-acc-yellow);
	--c-text-dark: var(--palette-acc-blue);
	--c-bg-light: var(--c-text);
	--c-bg-dark: var(--c-bg);
	--c-highlight: var(--c-bg);
}

body {
	margin: 0;
	background-color: var(--c-bg);
	color: var(--c-text);
	font-family: 'Mulish', sans-serif;
	font-size: 125%;
}

h1 {
	font-weight: 700;
	font-size: 2.5rem;
	margin: 0;
}

@media screen and (min-width: 64rem) {
	h1 {
		font-size: 5rem;
	}
}

h2 {
	font-weight: 700;
	font-size: 2rem;
	margin: 3rem 0 0;
}

@media screen and (min-width: 64rem) {
	h2 {
		font-size: 3rem;
	}
}

h3 {
	font-weight: 700;
	font-size: 1.5rem;
	margin-top: 4.5rem;
}

h2 + h3 {
	margin-top: 3rem;
}

h4 {
	font-weight: 700;
	font-size: 1.25rem;
	margin-top: 3.5rem;
}

a {
	color: var(--c-text);
	transition: color 0.2s, background-color 0.2s;
}

a:focus,
a:hover {
	color: var(--c-highlight);
	background-color: var(--c-bg-light);
}

a:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
}

p, ul, ol {
	line-height: 1.875rem;
}

* + p, * + ul, * + ol {
	margin-top: 1.875rem;
}

blockquote {
	font-weight: 400;
	font-size: 1.2rem;
	line-height: 1.75rem;
	padding: 0 1.5rem;
	border-left: 4px solid var(--c-bg-light);
	margin: 3rem auto 0;
	max-width: 64rem;
}

.section-alt blockquote {
	border-color: var(--c-bg-dark);
}

blockquote p {
	font-size: inherit;
	line-height: inherit;
}
blockquote footer {
	font-size: 1.25rem;
}
blockquote + blockquote {
	margin-top: 3rem;
}

figcaption {
	text-align: center;
	font-size: 1rem;

}

@media screen and (min-width: 64rem) {
	blockquote {
		font-size: 1.5rem;
		line-height: 2.5rem;
		padding: 0 3rem;
		border-left: 0;
	}

	blockquote + blockquote {
		padding-top: 3rem;
		padding-bottom: 1.5rem;
		/* border-top: 1px solid var(--palette-fulvous); */
		border-top: 1px solid var(--c-text);
	}
}

body > header {
	padding: 2rem 1.5rem;
	border-bottom: 0.125rem solid var(--c-bg-light);
}

@media screen and (min-width: 64rem) {
	body > header {
		padding: 2rem 4rem;
	}
}

body > footer {
	padding: 2rem 4rem 4rem;
	border: 0.25rem solid var(--c-bg-light);
	border-width: 0.25rem 0 3rem;
}


/* Header */

.branding {
	background-color: var(--c-bg-light);
	color: var(--c-text-dark);
}

@media screen and (min-width: 1024px) {

	.branding {
		display: grid;
		/* grid-template-columns: 1fr auto 1fr; */
		grid-template-columns: 1fr minmax(min-content, 80rem) 1fr;
	}
	
	.branding .inner {
		padding: 2rem 1.5rem;
		grid-column: 2;
		display: grid;
		gap: 2rem 3rem;
		grid-template-columns: minmax(max-content, 1fr) 120px;
	}

	.branding .header-text {
		grid-row: 1;
		grid-column: 1;
	}

	.branding .header-logo {
		grid-row: 1 / span 2;
		grid-column: 2;
	}

	.branding .header-nav {
		grid-row: 2;
		grid-column: 1;
	}

}

.header-text h2 {
	margin-top: 0.5rem;
}

@media screen and (min-width: 64rem) {
	.header-text h2 {
		margin-top: 1.5rem;
	}
}

.header-nav ul {
	display: flex;
	justify-content: flex-start;
	padding: 0;
}

@media screen and (max-width: 46rem) {
	nav ul {
		flex-direction: column;
	}
}

nav li {
	list-style: none;
}

nav li a {
	color: inherit;
}

nav li a:hover {
	background-color: var(--c-text-dark);
	color: var(--c-text-light)
}


@media screen and (min-width: 64rem) {
	nav li + li {
		margin-left: 1.5rem;
	}
}

/* Footer */

@media screen and (min-width: 64rem) {
	.contact {
		display: grid;
	}

	.contact .inner {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 2rem;
		padding: 0 1.5rem;
	}
}

.contact .inner > * {
	align-self: center;
}

.contact-links ul {
	padding-left: 0;
}


/* Main content */

.layout {
	/* background-color: var(--palette-floral-white); */
	background-color: var(--c-bg);
	/* background: linear-gradient(var(--c-bg-light), var(--c-bg) 2.5rem); */
}

main section .section-inner {
	padding: 2.5rem 4rem 5rem;
}

@media screen and (min-width: 64rem) {
	main section {
		display: grid;
		grid-template-columns: 1fr minmax(min-content, 80rem) 1fr;
	}

	main section .section-inner {
		grid-column: 2;
	}
}


main section + section {
	/* margin-top: 4rem; */
}

main section .section-inner {
	padding: 7rem 1.5rem;
}


/* Section types */

.section-alt {
	background-color: var(--c-bg-light);
	color: var(--c-text-dark);
}

.section-alt a {
	color: var(--c-text-dark);
	transition: color 0.2s, background-color 0.2s;
}

.section-alt a:focus,
.section-alt a:hover {
	color: var(--c-text-light);
	background-color: var(--c-bg-dark);
}

.section-heading {
	margin-top: 0;
}


.section-image {
	padding-top: 4rem;
	text-align: center;
}

.screenshot {
	margin: 0;
}

.screenshot + .screenshot {
	margin-top: 3rem;
}

.screenshot img {
	width: 100%;
	height: auto;
	max-width: 100%;
	border-radius: 3px;
	display: block;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
}

.screenshot a img {
	transition: transform 0.2s ease-in-out;
}

.screenshot a:hover img,
.screenshot a:focus img {
	transform: scale(1.05);
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

.screenshot figcaption {
	margin-top: 1rem;
}

@media (min-width: 64rem) {
	.section-with-image .section-inner {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 7rem;
	}
}

.section-image-gallery .gallery {
	margin-top: 3rem;
}

@media (min-width: 64rem) {
	
	.section-image-gallery .gallery {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0 1.5rem;
		margin-top: 3rem;
	}

	.section-image-gallery .gallery .screenshot + .screenshot {
		margin-top: 0;
	}
}