*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: "Segoe UI", Tahoma, Helvetica, Arial, sans-serif;
	background: linear-gradient(135deg, #d0e8ff 0%, #eaf6ff 100%);
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 2rem;
	color: #003366;
}

.window {
	width: 100%;
	max-width: 680px;
	background: #ffffff8c;
	border-radius: 15px;
	box-shadow:
		0 8px 32px #0066cc2e,
		inset 0 0 0 1px #ffffffcc;
	overflow: hidden;
}

header {
	background: linear-gradient(180deg, #a8d1ff 0%, #7bb7f0 100%);
	padding: 2.5rem 2rem 2rem;
	text-align: center;
	color: #fff;
	text-shadow: 0 1px 2px #00004040;
}

header h1 {
	font-size: 2.5rem;
	font-weight: 600;
	letter-spacing: 0.5px;
}

main {
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.card {
	background: #ffffffb3;
	border-radius: 15px;
	padding: 1.5rem;
	box-shadow:
		0 4px 20px #0066cc14,
		inset 0 0 0 1px #ffffffe6;
}

.card h2 {
	font-size: 1.25rem;
	color: #0059b3;
}

.card p {
	line-height: 1.5;
	margin: 0.75rem 0 0 0;
}

.card ul,
.card ol {
  margin: 0;
  padding-left: 1em;
}

.card li {
  list-style: disc;
  margin: .75em 0 0 0;
}

.card ul ul,
.card ol ol {
  padding-left: 1.2em;
}

.card ul ul li { list-style: circle; }
.card ul ul ul li { list-style: square; }

footer {
	text-align: center;
	padding: 0 0 1.5rem 0;
	font-size: 0.9rem;
	color: #4d88b3;
}

a {
	color: #0059b3;
	text-decoration: none;
}

a:hover {
	text-shadow: 0 0 5px #0059b3;
	transition: text-shadow .15s ease-out;
}

img {
	width: 250px;
	display: block;
	margin: 0.25rem auto 0.25rem auto;
	height: auto;
	border-radius: 15px;
}