/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap');

html {
	font-family: 'Work Sans', sans-serif;
}

/* colours */
:root {
	--content: #555566;
	--background: #f8f5f5;
	--background-darker: #e0e0e5;
	--nav-hover: #cceedd44;
	--nav-active: #cceedd88;
}

/* other */
img {
	width: 100%;
}
section {
	padding-top: 6em;
}
section:first-of-type {
	padding-top: initial;
}
a {
	color: #555B6E;
}
ul {
	line-height: 1.5;
}
button {
	padding: .6em 1.2em;
	color: var(--content);
	background-color: var(--nav-active);
	border-radius: .5em;
	font-family: 'Work Sans', sans-serif;
	font-weight: 500;
	font-size: 1.4rem;
}
article p {
	text-align: justify;
}
.author {
	text-align: center;
}
article {
	background-color: var(--background-darker);
	border-radius: 1em;
}

/* reset user agent values*/
body {
	margin: 0;
	overflow-y: scroll;
	overflow-x: clip;
}
button {
	cursor: pointer;
	border: 0;
}

/* general text styles */
h1 {
	text-align: center;
}
h2 {
	font-size: 1.5em;
	text-align: center;
}
p {
	font-size: 1.1em;
}
@media screen and (min-width: 500px) {
	h1 {
		font-size: 2.5em;
	}
	h2 {
		font-size: 2em;
	}
	p {
		font-size: 1.2em;
	}
}
@media screen and (min-width: 1000px) {
	h1 {
		font-size: 3em;
	}
	h2 {
		font-size: 2.5em;
	}
	p {
		font-size: 1.3em;
	}
}

/* grid layout styles */
.grid-4, .grid-3 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2em;
}
@media screen and (min-width: 500px) {
	.grid-4 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2em;
	}
}
@media screen and (min-width: 750px) {
	.grid-3 {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 2em;
	}
}
@media screen and (min-width: 1000px) {
	.grid-2 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2em;
	}
	.grid-4 {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		gap: 2em;
	}
}