/* ---------- Global reset ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
}

/* zero out default margins */
html {
	height: 100%;
}

/* keeps 100 vh layouts honest */

/* ---------- Width & gutters ---------- */
body {
	width: 100%;
	max-width: 72rem;
	/* 1152 px – desktop comfort */
	margin-inline: auto;
	/* centers the whole page */
	padding-inline: 1rem;
	/* default gutters */
	text-align: left;
}

body::after {
	content: "";
	display: block;
	height: 0;
	/* zero height; we’ll draw a border instead */
	border-top: 1px solid #ccc;
	/* the rule itself */
	margin-block-start: 4rem;
	/* gap above the rule */
	padding-block-end: 4rem;
	/* extra space below */
}

a {
	text-decoration: none;
	color: #2E4AFF
}

a:visited {
	color: #2E4AFF
}

a:focus {
	border-bottom: 1px solid;
	background: #9FCFF9;
}

a:hover {
	border-bottom: 1px solid;
	background: #9FCFF9;
}

a:hover img {
	box-shadow: inset 0 -5px 0 0 #9FCFF9;
}

a:active {
	background: #9FCFF9;
	color: #2E4AFF;
}

/* ---------- Centered headlines & images ---------- */
h1,
h2,
h3 {
	text-align: center;
}

/* ---------- Extra breathing room between list items ---------- */
/* Applies to <ul> and <ol>.  Tweaked in a “mobile‑first” way, so
   you can override the 0.5em later if you want tighter / looser. */
li+li {
	margin-block-start: 0.25em;
	/* half of the browser‑default 1em */
}

img {
	display: block;
	/* removes inline gap beneath images */
	margin-inline: auto;
	/* centres horizontally */
	max-width: 100%;
	/* stops overflow on small screens */
	height: auto;
	/* maintain aspect ratio */
}

/* ---------- Breakpoints (mobile‑first) ---------- */
@media (min-width: 640px) {

	/* large phones + tablets */
	body {
		max-width: 48rem;
		/* 768 px */
		padding-inline: 3rem;
	}
}

@media (min-width: 1024px) {

	/* laptops / desktops */
	body {
		max-width: 72rem;
		/* 1152 px */
		padding-inline: 5rem;
	}
}

@media (min-width: 1440px) {

	/* big monitors */
	body {
		max-width: 85rem;
	}

	/* 1360 px */
}

@media (min-width: 1920px) {

	/* 4 K / ultra‑wide */
	body {
		max-width: 90rem;
	}

	/* 1440 px */
}