:root {
	--white: #FFF;
	--black: #000;
	--l-gray: #a7a7a7;
	--m-gray: #949494;
	--d-gray: #6e6e6e;
	--dd-gray: #1c1c1c;
}

.skip-to-content {
	background: var(--l-gray);
	color: var(--black);
	transform: translateY(-300%);
	padding: .25rem .5rem;
	font-weight: bold;
	&:focus {
		transform: translateY(0%);
	}
}

.page-settings {
  --open-button-fill: var(--black);
  --open-button-background: var(--l-gray);
  --open-button-border: none;
  --background: var(--white);
  --border: none;
  --outline: 0px;
  --color: var(--d-gray);
  --accent: var(--black);
	font-weight: bold;
	font-size: .9rem;
}

::-moz-selection, ::selection {
  color: var(--white);
  background: var(--d-gray);
}

body {
	margin: 0;
	background: var(--dd-gray);
	background-image: linear-gradient(45deg, var(--black) 25%, var(--dd-gray) 25%, var(--dd-gray) 50%, var(--black) 50%, var(--black) 75%, var(--dd-gray) 75%, var(--dd-gray) 100%);
	background-size: 28.28px 28.28px;
	background-attachment: fixed;
	font-family: 'Terminax Regular';
	letter-spacing: .165em;
	
	h1, h2, h3, h4, h5, h6 { font-weight: normal; text-transform: uppercase; }
	
	h1 {
		width: 100%;
		text-align: center;
		color: var(--white);
		margin: 2rem 0;
	}
}

nav {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	justify-content: center;
	padding: 1rem; padding-bottom: 1.5rem;
	background: var(--black);
	
	a, a:link, a:visited {
		display: inline-block;
		color: var(--m-gray);
		font-weight: bold;
		font-size: 2rem;
	}
	a:hover { color: var(--white); }
}

.deco-right {
	@media screen and (width < 775px) { display: none;  }
	position: absolute;
	z-index: 10;
	right: 0;
	top: 100px;
	transform: translate(min(50%,7vw),0%);
	width: max(175px,min(18vw,240px));
	img {
		max-width: 100%;
		-webkit-filter: drop-shadow(0 0 2px white);
		filter: drop-shadow(0 0 2px white);
	}
}

.handbook {
	position: relative;
	margin: 0 auto;
	max-width: min(100vw,650px);
  color: var(--d-gray);
	
	> header { background: var(--black); padding: 1.25rem; }
	> header h1 { margin: 0; }
	
	.cover img { width: 100%; image-rendering: pixelated; }
}

.handbook > .page {
	width: 100%;
	&:not(.cover) {
		background: var(--white);
		padding: 1rem 0;
	}
	
	a {
		font-weight: bold;
		font-style: italic;
		text-transform: uppercase;
		text-decoration: underline;
		color: inherit;
		&:link, &:visited { color: inherit; }
	}
	
	> header {
		color: var(--m-gray);
		text-align: center;
		p {
			text-transform: uppercase;
			font-size: 1.15rem;
			letter-spacing: .165em;
		}
		h2 {
			height: 180px;
			background: url('/shrines/homestuck/images/~ATH_handbook_page_header.jpg');
			font-size: 2.75rem;
			letter-spacing: .17em;
			line-height: 1;
			margin: 0;
			border-bottom: 3px var(--m-gray) solid;
			align-content: end;
		}
	}
	
	> .main {
		padding: .6rem 2rem;
	}
	
	.columns {
		display: flex;
		justify-content: center;
		@media screen and (width < 650px) { flex-wrap: wrap; gap: 1em; }
		gap: 2.75rem;
		
		> * > :last-child { margin-bottom: 0; }
	}
	
	h3 {
		color: var(--m-gray);
		margin-bottom: 1em;
	}
	
	.codebox {
		width: fit-content;
		max-width: 100%;
		margin: 0 auto;
		font-family: inherit;
		font-weight: bold;
		color: var(--l-gray);
		padding: 2.75rem 2.4rem;
		font-size: .8rem;
		line-height: 2.75;
		tab-size: 2.5em;
		border: 3px var(--m-gray) solid;
		border-radius: .5rem;
	}
	
	.quote {
		width: min(100%, 370px);
		margin: 0 auto;
		
		h4 {
			margin-bottom: -.6em;
			margin-top: .5rem;
			font-family: 'Letter-O-Matic', sans-serif;
			font-size: 1.15rem;
			color: var(--d-gray);
			letter-spacing: 0;
			font-style: italic;
			font-weight: bold;
			text-align: center;
		}
		
		.body {
			background: var(--l-gray);
			border-radius: .75rem;
			padding: 1rem 1.75rem;
			color: var(--white);
			font-size: .75rem;
			font-weight: bold;
			
			p { margin-bottom: 0; }
		}
		
		.author { text-align: right; margin-top: .15rem; }
	}
	
	@media screen and (width < 650px) {
		.reaper { display: none; }
	}
}

body.high-contrast {
	--white: #FFF;
	--black: #000;
	--l-gray: #a7a7a7;
	--m-gray: #000;
	--d-gray: #000;
	font-weight: bold;
	> .handbook > .page * { color: var(--black); }
	.quote .body { color: var(--black) !important; }
	nav a { color: var(--white); }
}