@use "_fonts";
@use "_consts" as c;

.page:first-of-type {
	margin-top: 32px;
}

.page {
	box-sizing: border-box;
	padding: 20px;
	margin: auto;
	max-width: 800px;
	background-color: c.$page_bg;
	color: c.$page_text_color;

	border-image-source: url("/img/border.png");
	border-image-outset: 0 8px;
	border-image-width: 16px 16px;
	border-image-slice: 4 4 4 4;
	border-image-repeat:round;
	image-rendering: pixelated;
}

.page.page-left {
	margin-left: 32px;
}

.page.page-right {
	margin-right: 32px;
}

.page.page-wide {
	max-width: 100%;
	margin-left: 32px;
	margin-right: 32px;
}

.page img {
	image-rendering: initial;
}

.page a, .page a:visited {
	color: c.$page_text_color;
}

@media screen and (max-width: 864px) {
	.page {
		margin-left: 16px;
		margin-right: 16px;
	}

	.page.page-left {
		margin-left: 16px;
	}
	
	.page.page-right {
		margin-right: 16px;
	}
	
	.page.page-wide {
		margin-left: 16px;
		margin-right: 16px;
	}
}

@media (prefers-color-scheme: dark) {
	.page {
		background-color: #111;
		color: #ddd;
	}

	.page a, .page a:visited {
		color: #ddd;
	}
}