/* =========================================================
   SHARED STYLES — used by every page.
   Link this file BEFORE homepage.css / subpages.css.
   ========================================================= */

body {
	font-family: Verdana, Geneva, sans-serif;
	background-color: #f7f7f7;
	margin: 0;
}

/* --- Centered page container --- */
.container {
	max-width: 800px;
	margin: 0 auto;
	margin-top: 40px;
	padding: 20px;
	box-sizing: border-box;
}

/* --- Navigation bar --- */
.navbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 23px;
}

.navbar a,
.navbar a:visited {
	text-decoration: none;
	color: #000000;
	border: 1px solid #000000;
	padding: 8px 14px;
	border-radius: 4px;
	transition: 0.2s;
}

.navbar a:hover {
	color: #ffffff;
	background-color: #7e20b5;
	border-color: #7e20b5;
}

/* --- Divider under the nav --- */
.divider {
	border: none;
	border-top: 3px solid #000000;
	width: 80%;
	margin: 20px auto;
}

/* --- Content links (purple) --- */
a,
a:visited {
	text-decoration: none;
	color: #a439bf;
}

a:hover {
	color: #7b2a90;
}

/* --- Mobile (shared) --- */
@media (max-width: 600px) {

	.navbar {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		justify-items: center;
	}

}