/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/


@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;
}

:root {
	--color-orange: #C74017;
	--color-yellow: #e9aa49;
	--color-text: #6b422e;
	--color-shade: #6b422e33;
	--color-scroll: hsl(20deg 20% 40%);
}

* {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	font-optical-sizing: auto;
}

*::-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);
}

body {
	width: 100vw;
	height: 100vh;
	padding: 32px;
	margin: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	overflow: hidden;
	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);

	& .areas {
		display: none;
	}

	& .book {
		position: relative;
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 1fr 16px 1fr;
		grid-template-columns: 1fr 1fr;
		-ms-grid-rows: 1fr;
		grid-template-rows: 1fr;
		grid-column-gap: 1px;
		aspect-ratio: 9 / 7;
		width: 100%;
		max-width: 1080px;
		padding: 8px;
		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;
		rotate: -1deg;
		translate: 0 0;

		& .menu {
			-ms-grid-row: 1;
			-ms-grid-row-span: 1;
			-ms-grid-column: 1;
			-ms-grid-column-span: 1;
			grid-area: 1 / 1 / 2 / 2;
			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: -5px;
			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: #6F1616;
					background-color: hsl(30 70% 80% / 1);
                    border: 4px solid #C74017;
					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 {
			-ms-grid-row: 1;
			-ms-grid-row-span: 1;
			-ms-grid-column: 2;
			-ms-grid-column-span: 1;
			grid-area: 1 / 2 / 2 / 3;
			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: 3px;
			}
			& div:nth-child(1) {
				border-left: 2px solid #999999;
			}
			& div:nth-child(2) {
				border-left: 2px solid #888888;
			}
		}
		& .hint {
			display: none;
		}
	}

	& .book > *:nth-child(1) {
		-ms-grid-row: 1;
		-ms-grid-column: 1
	}

	& .book > *:nth-child(2) {
		-ms-grid-row: 1;
		-ms-grid-column: 3
	}
}

@media only screen and (max-width: 860px) {
	body {
		position: relative;

		&[data-focus="left"] .book {
			translate: 2vw 0;
			& .areas .left {
				height: 0;
			}
		}
		&[data-focus="right"] .book {
			translate: calc(98vw - 1080px) 0;
			& .areas .right {
				height: 0;
			}
		}
		&[data-hint="false"] .book .hint {
			display: none;
		}

		& .book {
			position: absolute;
            max-height: 90vh;
            width: 160vw;
			left: 0;
			-webkit-transition: translate 0.5s ease-in-out;
			-o-transition: translate 0.5s ease-in-out;
			transition: translate 0.5s ease-in-out;

			& .areas {
				position: absolute;
				height: 100%;
				width: 100%;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				pointer-events: none;

				& .left,
				& .right {
					width: 50%;
					height: 100%;
					pointer-events: all;
					cursor: pointer;
				}
			}
			& .hint {
				display: block;
                position: absolute;
                left: 50%;
                top: 50%;
                padding: 8px 16px;
                border-radius: 32px;
				background-color: #fde5cb;
                color: #c74017;
				font-family: 'Komix Eighties';
                text-transform: uppercase;
                -webkit-box-shadow: 4px 8px 12px #00000066;
                        box-shadow: 4px 8px 12px #00000066;
				-webkit-user-select: none;
				   -moz-user-select: none;
				    -ms-user-select: none;
				        user-select: none;
			}
		}
	}
}

@media only screen and (max-width: 675px) {
	body {
		&[data-focus="right"] .book {
			translate: -62vw 0;
		}
	}
}
@media only screen and (max-width: 480px) {
	body {
		& .book {
			& .menu {
				padding: 16px;
				& h2 {
					font-size: 18px;
				}
				& nav {
					font-size: 24px;
					& ol li a:after {
						height: 18px;
					}
				}
				& footer {
					font-size: 18px;
					& .copy {
						font-size: 20px;
					}
				}
			}
		}
	}
}