/* ===============================
   RESET
================================ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, img, ol, ul, li, figure, figcaption,
footer, header, nav, section {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
}

body {
	font-family: 'Lora', serif;
	font-weight: 300;
	color: #000;
	line-height: 1.5;
	font-size: 16px;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ===============================
   LAYOUT
================================ */
#page-wrap {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 1rem;
}

body.divide {
	background-image: linear-gradient(90deg, #402EEB 40%, #F0F0F0 40%);
}

body.examples {
	background: #f0f0f0;
}

/* ===============================
   TYPOGRAPHY
================================ */
h1, h2, h3, h4, nav {
	font-family: 'Work Sans', sans-serif;
}

h1 {
	font-size: clamp(2.5rem, 6vw, 5.75rem);
	font-weight: bold;
	margin-bottom: 1rem;
}

h2 {
	font-size: clamp(1.25rem, 4vw, 2.5rem);
	text-align: center;
	margin: 1.5rem 0;
}

p {
	margin-bottom: 1rem;
}

.ital {
	font-style: italic;
	text-align: center;
}

/* ===============================
   NAVIGATION
================================ */
nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	margin: 1rem auto;
}

	nav ul {
		display: flex;
		gap: 1rem;
	}

img.logo {
	width: 100px;
}

/* ===============================
   CONTENT
================================ */
.textbio,
.aboutmebio {
	max-width: 600px;
}

section figure.fave {
	margin-top: 2rem;
}

.purpleheader {
	background: #402EEB;
	color: #f0f0f0;
	padding: 1rem;
	text-align: center;
}

.purplefooter {
	background: #402EEB;
	color: #f0f0f0;
	padding: 2rem 1rem;
	text-align: center;
}

/* ===============================
   GALLERY
================================ */
.container {
	width: 100%;
	margin: 2rem auto;
}

.mySlides {
	display: none;
}

.column {
	float: left;
	width: 20%;
}

.demo {
	opacity: 0.6;
	cursor: pointer;
}

	.demo:hover,
	.active {
		opacity: 1;
	}

/* ===============================
   MOBILE
================================ */
@media (max-width: 768px) {
	nav {
		flex-direction: column;
		align-items: flex-start;
	}

		nav ul {
			flex-direction: column;
			width: 100%;
			margin-top: 1rem;
		}

	.textbio,
	.aboutmebio,
	section figure.fave {
		width: 100%;
		max-width: 100%;
	}

	.column {
		width: 50%;
	}
}

@media (max-width: 480px) {
	.column {
		width: 100%;
	}
}