:root {
	--cgray: #7A829C;
	--cream: #f6fdd0;
	--rgreen: #627f59;
	--dblue: #3D3D72;
	--licorice: #1F1511;
}

@font-face {
	font-family: saruji;
	src: url("../fonts/saruji.ttf") format("truetype");
}

@font-face {
	font-family: banana slip;
	src: url("../fonts/YDWbananaslipplus.otf") format("opentype");
}

html {
	background-image: url("../images/e04-bg-checked.gif"); /* from FOOL LOVERS i am so heartbroken they're discontinued */
}

body {
	position: relative;
	width: 900px;
	margin: 50px auto 0px;
	background-color: var(--cgray);
	border-radius: 5px;
	box-shadow: 0px 0px 2px 2px var(--dblue);
	display: flex;
	padding: 1em;
	gap: 2em;
}

.centerContent {
	text-align: center;
}

.siteTitle {
	font-family: saruji;
	position: absolute;
	top: -73px;
	left: 369px;
	rotate: 1deg;
	text-shadow: 3px 0 var(--cream), -3px 0 var(--cream), 0 3px var(--cream), 0 -3px var(--cream), 2px 2px var(--cream), -2px -2px var(--cream), 2px -2px var(--cream), -2px 2px var(--cream);
	font-size: 54px;
	filter: drop-shadow(gray 1px -1px 7px);
	z-index: 100;
}

.tinyCafeMemo {
	position: absolute;
	z-index: -1;
	rotate: -21deg;
	top: 29px;
	left: -127px;
	box-shadow: 0px 0px 10px 2px grey;
}

.cloversTownMemo {
	position: absolute;
	z-index: -1;
	rotate: 18deg;
	top: 519px;
	left: 453px;
	box-shadow: 0px 0px 10px 2px grey;
}

.left {
	width: 75%;
}

.right {
	width: 25%;
}

.mainContainer {
	background-color: var(--cream);
	padding: 5px;
	box-shadow: 0 0 5px 5px var(--cream);
}

.allReviews {
	height: 1049px;
	overflow-y: scroll;
}

.bookCover {
	width: 75%;
}

.reviewTitle {
	margin: 0;
	font-family: banana slip;
}

.reviewSubtitle {
	margin: 0;
	font-family: banana slip;
}

.reviewCover {
	float: left;
	width: 30%;
}

	.reviewCover img {
		width: 75%;
	}
	
.review p {
	float: none;
	text-indent: 2em;
}

.blurbTitle {
	position: relative;
	font-family: saruji;
	text-shadow: 3px 0 var(--cream), -3px 0 var(--cream), 0 3px var(--cream), 0 -3px var(--cream), 2px 2px var(--cream), -2px -2px var(--cream), 2px -2px var(--cream), -2px 2px var(--cream);
	filter: drop-shadow(gray 1px -1px 7px);
	font-size: 26px;
	margin: auto;
	top: 14px;
	left: -17px;
	rotate: -2deg;
	z-index: 99;
}

.blurb {
	padding: 1em;
}

.blurb p {
	margin: 0;
}

#chiikawa {
	position: absolute;
	top: 853px;
	left: 864px;
	rotate: 10deg;
	width: 75px;
	filter: drop-shadow(5px 5px 5px grey);
}

.bookHolder {
	height: 732px;
	overflow-y: scroll;
}

.bookbugButton {
	position: relative;
	font-family: saruji;
	text-shadow: 3px 0 var(--cream), -3px 0 var(--cream), 0 3px var(--cream), 0 -3px var(--cream), 2px 2px var(--cream), -2px -2px var(--cream), 2px -2px var(--cream), -2px 2px var(--cream);
	filter: drop-shadow(gray 1px -1px 7px);
	font-size: 26px;
	margin: auto;
	top: 10px;
	left: 54px;
	rotate: 3deg;
	z-index: 99;
}

.bookbugLogo {
	position: absolute;
	z-index: 99;
	top: 958px;
	left: -57px;
	rotate: 16deg;
	filter: drop-shadow(gray 5px 5px 5px);
}

.home {
	position: absolute;
	top: 169px;
	left: -139px;
	rotate: -22deg;
	font-family: saruji;
	font-size: 20px;
}