@font-face {
	font-family: 'Komix Eighties';
	src: url('../fonts/Komix Eighties.woff2') format('woff2'),
		url('../fonts/Komix Eighties.woff') format('woff'),
		url('../fonts/Komix Eighties.otf') format('opentype');
    font-style: normal;
	font-weight: 400;
}
@font-face {
	font-family: 'Roboto Condensed Black';
	src: url('../fonts/RobotoCondensed-Black.woff2') format('woff2'),
		url('../fonts/RobotoCondensed-Black.woff') format('woff'),
		url('../fonts/RobotoCondensed-Black.otf') format('opentype');
    font-style: normal;
	font-weight: 400;
}
@font-face {
	font-family: 'GosmickSans';
	src: url('../fonts/gosmicksans.woff2') format('woff2'),
		url('../fonts/gosmicksans.woff') format('woff'),
		url('../fonts/gosmicksans.otf') format('opentype');
    font-style: normal;
	font-weight: 400;
}
@font-face {
	font-family: 'GosmickSansBold';
	src: url('../fonts/gosmicksansbold.woff2') format('woff2'),
		url('../fonts/gosmicksansbold.woff') format('woff'),
		url('../fonts/gosmicksansbold.otf') format('opentype');
    font-style: normal;
	font-weight: 400;
}

/* // GLOBAL /////////////////////////////////////////////////////////////// */

:root {
	--width: 1080px;
	--height: 720px;
	--scale: 1;
	--left: 0;
	--top: 0;

	--color-orange: #C74017;
	--color-yellow: #e9aa49;
	--color-text: #6b422e;
	--color-shade: #6b422e33;
	--color-scroll: hsl(20deg 20% 40%);
	--color-paper: #f0cca8;
	--color-border: #C74017;
}
* {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	font-optical-sizing: auto;
}

/* // SELECTION & SCROLLBAR //////////////////////////////////////////////// */

*::-moz-selection {
	background-color: var(--color-orange);
	color: var(--color-yellow);
}
*::selection {
	background-color: var(--color-orange);
	color: var(--color-yellow);
}
*::-webkit-scrollbar {
	height: 12px;
	width: 12px;
}
*::-webkit-scrollbar-track {
	background-color: var(--color-shade);
	border-radius: 0 24px 24px 0;
}
*::-webkit-scrollbar-track:hover {
	background-color: var(--color-shade);
}
*::-webkit-scrollbar-track:active {
	background-color: var(--color-shade);
}
*::-webkit-scrollbar-thumb {
	border-radius: 0 24px 24px 0;
	background-color: var(--color-scroll);
}
*::-webkit-scrollbar-thumb:hover {
	background-color: var(--color-orange);
}
*::-webkit-scrollbar-thumb:active {
	background-color: var(--color-orange);
}

/* // INDEX //////////////////////////////////////////////////////////////// */

body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	width: 100vw;
	height: 100vh;

	background-color: #660000;
	background-image: url('../graphics/background.jpg');
	background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
	font-family: 'GosmickSans';
	font-size: 18px;
	color: var(--color-text);

	&[data-side="right"] {
		.frame .book {
			left: calc(-50% + 50px);
			rotate: -1deg;
		}
		.helpers {
			.area.left {
				opacity: 1;
			}
			.area.right {
				opacity: 0;
			}
		}
	}
	&[data-landscape="true"] {
		.frame .book {
			left: 0;
			rotate: -1deg;
		}
		.helpers .area {
			display: none;
		}
	}
	.frame {
		position: absolute;
		width: var(--width);
		height: var(--height);
		top: var(--top);
		left: var(--left);
		transform: scale(var(--scale));
		transform-origin: top left;
		padding: 16px;
		.book {
			position: relative;
			display: flex;
			gap: 4px;
			padding: 8px;
			height: 100%;
			left: 0;
			rotate: 1deg;
			transition: left 0.5s, rotate 2s;

			border-radius: 24px;
			background: -o-linear-gradient(1deg, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.3) 51%, rgba(0, 0, 0, 0) 52%),
						-o-linear-gradient(bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%),
						#C6A08D;
			background: linear-gradient(89deg, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.3) 51%, rgba(0, 0, 0, 0) 52%),
						linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%),
						#C6A08D;
			-webkit-box-shadow: 0 8px 12px #00000066;
			        box-shadow: 0 8px 12px #00000066;
			.page {
				flex: 1;
				background-color: #0000ff;
			}
			.menu {
				padding: 32px;
				border-radius: 16px 0 0 16px;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				    -ms-flex-direction: column;
				        flex-direction: column;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				rotate: -0.5deg;
				margin-top: 2px;
				margin-right: -8px;
				height: 100.05%;
				background: -webkit-gradient(linear, left top, right top, color-stop(70%, hsl(0deg 0% 100% / 0%)), to(hsl(0deg 0% 0% / 10%))),
							-webkit-gradient(linear, left bottom, left top, from(#C0AD9A), to(#FEE5CB));
				background: -o-linear-gradient(left, hsl(0deg 0% 100% / 0%) 70%, hsl(0deg 0% 0% / 10%) 100%),
							-o-linear-gradient(bottom, #C0AD9A 0%, #FEE5CB 100%);
				background: linear-gradient(90deg, hsl(0deg 0% 100% / 0%) 70%, hsl(0deg 0% 0% / 10%) 100%),
							linear-gradient(0deg, #C0AD9A 0%, #FEE5CB 100%);
				-webkit-box-shadow: -4px 4px 4px #00000033;
				        box-shadow: -4px 4px 4px #00000033;
				font-family: 'Komix Eighties', sans-serif;
				& header {
					-webkit-box-flex: 1;
					    -ms-flex: 1;
					        flex: 1;
					width: 100%;
					& h1 {
						display: none;
					}
					& .logo {
						display: -webkit-box;
						display: -ms-flexbox;
						display: flex;
						-webkit-box-orient: vertical;
						-webkit-box-direction: normal;
						    -ms-flex-direction: column;
						        flex-direction: column;
						background-color: var(--color-paper);
						border: 4px solid var(--color-border);
						width: 100%;
						padding: 8px 16px;
						border-radius: 8px;
						gap: 4px;
						& svg {
							fill: var(--color-orange);
							font-size: 28.3pt;
	                        text-transform: uppercase;
	                        font-family: 'Roboto Condensed Black', sans-serif;
						}
					}
				}
				& nav {
					-webkit-box-flex: 2;
					    -ms-flex: 2;
					        flex: 2;
					width: 100%;
					color: #880000;
					font-size: 32px;
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
					-webkit-box-orient: vertical;
					-webkit-box-direction: normal;
					    -ms-flex-direction: column;
					        flex-direction: column;
					text-transform: uppercase;
					& h2 {
						-webkit-box-flex: 1;
						    -ms-flex: 1;
						        flex: 1;
	                    text-align: center;
	                    text-transform: uppercase;
	                    font-size: 24px;
	                    margin: 0;
					}
					& ol {
						-webkit-box-flex: 8;
						    -ms-flex: 8;
						        flex: 8;
						list-style: none;
						counter-reset: pages;
	                    margin: 0;
	                    padding: 0;
						display: -webkit-box;
						display: -ms-flexbox;
						display: flex;
						-webkit-box-orient: vertical;
						-webkit-box-direction: normal;
						    -ms-flex-direction: column;
						        flex-direction: column;
						height: 60%;
	                    -webkit-box-pack: justify;
	                        -ms-flex-pack: justify;
	                            justify-content: space-between;

						& li {
							counter-increment: pages;
							display: -webkit-box;
							display: -ms-flexbox;
							display: flex;
							color: #880000;
							-webkit-transition: color 0.2s linear;
							-o-transition: color 0.2s linear;
							transition: color 0.2s linear;
							&:after {
								content: counter(pages, decimal-leading-zero);
							}
							& a {
								color: currentcolor;
								text-decoration: none;
								display: -webkit-box;
								display: -ms-flexbox;
								display: flex;
								-webkit-box-flex: 1;
								    -ms-flex: 1;
								        flex: 1;
								&:after {
									content: '';
									-webkit-box-flex: 1;
									    -ms-flex: 1;
									        flex: 1;
									border-bottom: 4px dotted currentcolor;
	                                margin: 0 4px;
									height: 24px;
								}
							}
							&:hover {
								color: #C74017;
							}
						}
					}
				}
				& footer {
					-webkit-box-flex: 1;
					    -ms-flex: 1;
					        flex: 1;
	                display: -webkit-box;
	                display: -ms-flexbox;
	                display: flex;
	                -webkit-box-align: center;
	                    -ms-flex-align: center;
	                        align-items: center;
	                text-align: center;
					font-family: 'GosmickSans';
					font-size: 24px;
					& .copy {
						font-size: 28px;
	                    line-height: 0;
	                    vertical-align: sub;
					}
				}
			}
			& main {
				overflow: auto;
				padding: 32px;
				border-radius: 0 16px 16px 0;
				background: -webkit-gradient(linear, left bottom, left top, from(hsl(30 19% 64% / 1)), to(#FEE5CB));
				background: -o-linear-gradient(bottom, hsl(30 19% 64% / 1) 0%, #FEE5CB 100%);
				background: linear-gradient(0deg, hsl(30 19% 64% / 1) 0%, #FEE5CB 100%);
				-webkit-box-shadow: 0 4px 8px #00000066;
				        box-shadow: 0 4px 8px #00000066;

				& h2,
				& h3 {
					font-family: 'Komix Eighties', sans-serif;
					font-size: 32px;
					text-transform: uppercase;
					color: #880000;
					margin-bottom: 16px;
				}
				& h3 {
					font-size: 24px;
				}
				& a {
					color: #c74017;
				}
				& hr {
					height: 16px;
				    border: 0;
					margin: 40px 0;
					background: -o-repeating-linear-gradient(135deg, transparent, transparent 8px, #880000 8px, #880000 16px);
					background: repeating-linear-gradient(-45deg, transparent, transparent 8px, #880000 8px, #880000 16px);
				}
				& img {
					max-width: 100%;
				}
				& dt {
					font-family: 'GosmickSansBold';
				}
				& dd + dt {
					margin-top: 16px;
				}
				.cloud {
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
					-ms-flex-wrap: wrap;
					    flex-wrap: wrap;
					gap: 8px 16px;
					& li {
						list-style: none;
					}
				}
			}
			& .staples {
				position: absolute;
	            width: 1px;
				height: 100%;
	            top: 0;
	            left: 50%;
	            -webkit-transform: rotate(-0.5deg);
	                -ms-transform: rotate(-0.5deg);
	                    transform: rotate(-0.5deg);
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
	            -webkit-box-orient: vertical;
	            -webkit-box-direction: normal;
	                -ms-flex-direction: column;
	                    flex-direction: column;
	            -ms-flex-pack: distribute;
	                justify-content: space-around;
				& div {
					height: 8%;
					margin-left: 1px;
				}
				& div:nth-child(1) {
					border-left: 2px solid #999999;
				}
				& div:nth-child(2) {
					border-left: 2px solid #888888;
				}
			}
		}
	}
	.helpers {
		position: absolute;
		display: flex;
		justify-content: space-between;
		width: 100%;
		top: var(--top);
		pointer-events: none;
		.area {
			cursor: pointer;
            pointer-events: all;
            width: 60px;
            height: 100px;
			background-color: var(--color-text);
            color: #c6a08d;
            transform: scale(var(--scale));
            margin-top: 45%;
            display: flex;
            justify-content: center;
            align-items: center;
            writing-mode: vertical-lr;
            text-orientation: upright;
            text-transform: uppercase;
            text-align: center;
			font-family: 'GosmickSans';
			font-size: 22px;
            letter-spacing: -6px;
			padding-bottom: 6px;
            line-height: 16px;
            user-select: none;
			transition: opacity 0.5s, background-color 0.3s, color 0.3s;
			box-shadow: 0px 4px 8px #00000099;
			&.left {
				transform-origin: top left;
				border-radius: 0 32px 32px 0;
				padding-right: 12px;
				opacity: 0;
			}
			&.right {
				transform-origin: top right;
				border-radius: 32px 0 0 32px;
				padding-left: 12px;
				opacity: 1;
			}
			&:hover {
				background-color: var(--color-orange);
				color: var(--color-yellow);
			}
		}
	}
}