:root {
	--main-color: oklch(0.60655 0.178652 147.3354);
}

body {
	margin: 0;
	padding: 0;
	background-image: url(../../images/bg.png);
	background-repeat: repeat-y;
	background-position: center;
	background-size: 100% auto;
	font-family: "Zen Kaku Gothic Antique", sans-serif;
	font-size: clamp(1rem, 0.284rem + 3.58vw, 2rem);
	font-weight: 400;
	letter-spacing: .05em;
	line-height: 1.8;
}

img {
	inline-size: 100%;
	block-size: auto;
}

a {
	display: block;
	text-decoration: none;
}

header {
	padding-block-start: 5.3125rem;
	padding-inline: clamp(2rem, 0.21rem + 8.95vw, 4.5rem);
	inline-size: 100%;
	display: block grid;
	place-items: center;
}

@media (min-width: 768px) {
	header {
		padding-block-start: 3.875rem;
	}
}

header h1 {
	inline-size: 100%;
	max-inline-size: 29.125rem;
}

main {
	padding-block-start: 1.25rem;
	padding-block-end: clamp(3.875rem, 3.338rem + 2.68vw, 4.625rem);
}

@media (min-width: 768px) {
	main {
		padding-block-end: 3.125rem;
	}
}

main p {
	padding-inline: clamp(2rem, 1.418rem + 2.91vw, 2.813rem);
	color: var(--main-color);
	font-weight: 500;
	text-align: center;
}

ul {
	padding-block-start: clamp(1.25rem, 0.534rem + 3.58vw, 2.25rem);
	padding-inline: clamp(2rem, 1.418rem + 2.91vw, 2.813rem);
	list-style: none;
	display: block flex;
	flex-direction: column;
	align-items: center;
}

ul li {
	max-inline-size: 29.25rem;
}

footer {
	padding-block: clamp(3rem, 2.374rem + 3.13vw, 3.875rem);
	padding-inline: clamp(1rem, -1.148rem + 10.74vw, 4rem);
	inline-size: 100%;
	background-color: var(--main-color);
	display: block grid;
	place-items: center;
}

@media (min-width: 768px) {
	footer {
		padding-block: 3.25rem;
	}
}

footer img {
	max-inline-size: 26.25rem;
}