/* ================= UNIVERSAL =============== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
	--bg: #121317;
	--nav: #1A1B21;
	--text: #D9D0BC;
	--accent: #7D5F84;
}

@font-face {
	font-family: "dogica";
	src: url("fonts/dogica.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: "dogica";
	src: url("fonts/dogicabold.woff2") format("woff2");
	font-weight:700;
	font-display: swap;
}

@font-face {
  font-family: "cloude";
  src: url("fonts/Cloude_Regular_1.02.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "cloude";
  src: url("fonts/Cloude_Regular_Bold_1.02.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

.headings {
	font-family: "dogica", Helvetica, serif;
	color: #E8E6E1;
}

.readings {
  font-family: "cloude", Helvetica, serif;
  color: #E8E6E1;
  font-size: 3rem;
  line-height: 1;
  text-indent: 0.5em;
	margin-bottom: 0;
}

.helvetica {
  font-family: Helvetica;
  color: #E8E6E1;
}

body { 
	background: var(--bg); 
}

.splash {
	overflow: hidden;
}

.rcorner {
	position: fixed;
	top: 1rem;
	right: 1rem;
	width: 48px;
	z-index: 2;
	image-rendering: pixelated;
}

.split {
	margin-left: 200px;
	height: 100vh;
	display: grid;
	grid-template-rows: 60% 40%;
}

.split-image {
	overflow: hidden;
}

.split-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.split-text {
	padding: 2rem;
	overflow-y: auto;
}

/* ================= INDEX LAYOUT =============== */

.desk {
  position: fixed;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  aspect-ratio: 16 / 9;
  width: max(100vw, 177.778vh);
  background-image: url("images/main/mydesk.png");
  background-size: 100% 100%;
  image-rendering: pixelated;
}

.book {
	position: absolute;
	left: 43.125%;
	top: 46.667%;
	width: 13.125%;
	height: 36.667%;
	cursor: pointer;
	overflow: hidden;
}

.strip {
	position: absolute;
	top: 0;
	left: 0;
	width: 500%;
	height: 100%;
	image-rendering: pixelated;
	transform: translateX(0);
}

.book:hover .strip,
.desk:focus-visible .strip {
	animation: flip 3s infinite;
}

@keyframes flip {
	0%,   19.9% { transform: translateX(0); }
	20%,  39.9% { transform: translateX(-20%); }
	40%,  59.9% { transform: translateX(-40%); }
	60%,  79.9% { transform: translateX(-60%); }
	80%, 100%   { transform: translateX(-80%); }
}

@media (prefers-reduced-motion: reduce) {
	.book:hover .strip,
	.desk:focus-visible .strip { animation: none; }
}

/* ============ NAV BAR LAYOUT ============ */

.sidenav {
	height: 100%;
	width: 200px;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: var(--accent);
	overflow-x: hidden;
	padding-top: 2rem;
	font-family: dogica;
}

.sidenav a {
	color: white;
	padding: 16px;
	text-decoration: none;
	display: block;
}

.sidenav a:hover {
	background-color: #ddd;
	color: black;
}

.content {
	margin-left: 200px;
	padding: 2rem;
}	

.sigil {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 1.5rem;
}

.sidenav .sigil-link { padding: 0; }
.sidenav .sigil-link:hover { background: none; }