:root {
	--text: #09251f;
	--background: #f3fbfa;
	--primary: #1d725a;
	--secondary: #ac75db;
	--accent: #bf31a9;

	--surface1: transparent;
	--surface2: transparent;
	--surface3: transparent;

	--surface1: color-mix(in srgb, var(--primary) 10%, transparent);
	--surface2: color-mix(in srgb, var(--secondary) 10%, transparent);
	--surface3: color-mix(in srgb, var(--accent) 10%, transparent);
}

:root {
	scroll-behavior: smooth;
}

body {
	font-family: sans-serif;
	color: var(--text);

	min-height: 100vh;
	margin: auto;
	width: 90%;
	max-width: 70rem;
	gap: 1rem;

	display: grid;
	grid-template-rows: auto auto 1fr auto;

	background-color: var(--background);
	background-image: url(/images/jigsaw.svg);
	background-size: 10rem;
	background-blend-mode: hard-light;
}

h1 {
	color: var(--primary);
}

h2,
h3,
h4,
h5,
h6 {
	color: var(--secondary);
}

nav a,
article a {
	color: var(--accent);

	text-decoration: underline;
	text-decoration-color: transparent;
	transition: text-decoration-color 200ms ease-in-out;
}

a:hover {
	text-decoration-color: var(--accent);
}

button {
	border: none;
	background-color: var(--secondary);
	color: var(--background);
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	cursor: pointer;

	transition: background-color 200ms ease-in-out;
}

button:hover {
	background-color: var(--accent);
}

button:active {
	background-color: color-mix(in srgb, var(--accent) 70%, white);
}

header,
footer {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "logo brand";
}

header {
	margin: 1rem 0 0 0;
	background-color: var(--surface1);
	border-radius: 1rem;
	padding: 1rem;
}

header .logo {
	grid-area: logo;

	background-color: var(--surface3);
	border-radius: 1rem;
}

header .brand {
	grid-area: brand;
	width: fit-content;
	height: min-content;

	color: var(--secondary);
	font-size: 2rem;
	font-weight: bolder;

	align-self: center;
	justify-self: end;
}

.logo {
	width: 10rem;
	height: auto;

	align-self: center;
}

#main-nav {
	background-color: var(--surface2);
	border-radius: 1rem;
	padding: 1rem;
}

#main-nav ul {
	display: flex;
	align-items: center;
	justify-content: start;
	gap: 1rem;
	padding: 0;
	margin: 0;
}

#main-nav ul li {
	list-style-type: none;
	font-size: 1.5rem;
}

.container {
	display: grid;
	grid-template-columns: 1fr 3fr;
	gap: 1rem;
	padding: 1rem;

	box-sizing: border-box;

	background-color: var(--surface1);
	border-radius: 1rem;
}

aside {
	background-color: var(--surface2);
	border-radius: 1rem;
	padding: 1rem;
}

aside ul {
	padding: 0;
	margin: 0;
}

aside nav li {
	list-style-type: none;
	padding: 0.2rem;
	font-size: 1.2rem;
	width: fit-content;
}

aside nav h3 {
	font-size: 1rem;
}

aside h3.article-header {
	margin-bottom: 0;
	font-size: 1.2rem;
}

aside .article-header + article h3 {
	margin-top: 0.5rem;
}

main {
	background-color: var(--surface3);
	border-radius: 1rem;
	padding: 1rem;
}

main > section > h1 {
	margin: 0;
}

#gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1rem;

	border-radius: 1rem;
}

#gallery img {
	width: 100%;
	height: auto;
	align-self: center;
}

footer {
	width: 100%;
	justify-self: center;
	box-sizing: border-box;
	height: auto;
	margin: 0 0 1rem 0;

	display: grid;
	grid-template-columns: 1fr 3fr;
	grid-template-areas: "logo copy";
	gap: 1rem;

	padding: 1rem;
	border-radius: 0.5rem;

	background-color: var(--surface2);
}

footer a {
	grid-area: logo;
	width: 100%;
	box-sizing: border-box;

	display: flex;
	justify-content: center;

	padding: 0.5rem;
	background-color: var(--surface1);
	border-radius: 0.5rem;
}

footer p {
	padding: 1rem;
	border-radius: 0.5rem;
	margin: 0;

	display: flex;
	align-items: center;
	grid-area: copy;
	background-color: var(--surface2);
}

article h3 {
	margin-bottom: 0.5rem;
}

article p {
	margin-top: 0;
}