From 8cc6219bd2d48eb74a95365e04e0e5f7d19175f0 Mon Sep 17 00:00:00 2001
From: uzalu <uzalune@gmail.com>
Date: Sat, 26 Apr 2025 03:57:43 +0100
Subject: [PATCH] visual overhaul, including tech tweaks

---
 maxima_2025.html | 1394 ++++++++++++++++++++++++++--------------------
 1 file changed, 801 insertions(+), 593 deletions(-)
diff --git a/maxima_2025.html b/maxima_2025.html
index 4446f5f..8837186 100644
--- a/maxima_2025.html
+++ b/maxima_2025.html
@@ -1,6 +1,7 @@
 <html>
 	<head>
 		<title>Maxima 2025</title>
+		<link href='https://fonts.googleapis.com/css?family=Lexend' rel='stylesheet'>
 		<style>
 			* {
 				box-sizing:border-box;
@@ -15,10 +16,11 @@
 				margin: 0;
 			}
 			#title {
-				font-size: 3em;
+				font-size: 5em;
 				text-transform: uppercase;
 			}
 			#subtitle {
+				font-size:1.5em;
 				font-style: italic;
 			}
 			#title-container {
@@ -27,22 +29,53 @@
 				display: flex;
 				flex-direction: column;
 				justify-content: space-evenly;
+				margin-bottom:20pt;
 			}
 			#header {
-				background: rgb(128,0,64);
-				display:flex;
-				padding:1em;
-				flex-direction: row;
-				border-bottom:3pt solid white;
+/* 				background: rgb(128,0,64); */
+/* 				display:flex; */
+/* 				padding:1em; */
+/* 				flex-direction: row; */
+/* 				justify-content: center; */
+/* 				border-bottom:3pt solid white; */
 				position:fixed;
 				width:100%;
-				z-index:1;
+/* 				z-index:1; */
+				/*margin-left: 10pt;
+				margin-right: 10pt;
+				margin-top: 10pt;*/
+/* 				background: rgba(20,20,20,0.5); */
+/* 				backdrop-filter: blur(30px); */
+/* 				transition: transform .5s ease, backdrop-filter 2s ease; */
+				transition: all .5s ease;
+				background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
+				text-align: center;
+				height:100vh;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				cursor: default;
 			}
 			#header-spacer {
 				height: var(--headheight);
+/* 				background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); */
+				transition: height .5s ease;
 			}
+			/*#title-intro-container {
+				transition: opacity .25s ease;
+			}*/
 			#controls {
 				text-align: right;
+				position:fixed;
+				top:0;
+				right:0;
+				z-index: 2;
+				padding:10pt;
+				opacity:0;
+				transition: transform .5s ease, opacity 2s ease;
+				border-bottom-left-radius: 20pt;
+/* 				backdrop-filter: blur(30px); */
+/* 				transform: translateY(-100%); */
 			}
 			#complexity-display {
 				display: inline;
@@ -55,6 +88,7 @@
 				display:flex;
 				flex-direction:column;
 				justify-content: center;
+				align-items: center;
 			}
 			#complexity-subtext {
 				font-size:.8em;
@@ -84,18 +118,67 @@
 				height:100%;
 			}
 			
+			#page {
+/* 				display: flex; */
+/* 				flex-direction: row-reverse; */
+/* 				justify-content: space-between; */
+/* 				align-items: flex-start; */
+/* 				justify-content: center; */
+/* 				justify-content: left; */
+/* 				align-items: center; */
+				padding: 10pt;
+				margin-bottom:100vh;
+			}
+			#content {
+				background: rgba(20,20,20,0.9);
+				backdrop-filter: blur(30px);
+				border-radius: 16pt;
+				padding: 10pt;
+			}
+			/*#sidebar {
+				position:fixed;
+				right: 10pt;
+				transition: opacity .5s ease;
+			}*/
+			.bottom #controls, .top #controls {
+/* 				opacity:0; */
+				transform: translateY(-100%);
+				transition: transform .5s ease, opacity .35s ease;
+			}
+			.scrolled:not(.bottom) #controls {
+				opacity: 1;
+			}
+/* 			#controls.top { */
+/* 				background: unset; */
+/* 				backdrop-filter: unset; */
+/* 				backdrop-filter: blur(15px); */
+/* 			} */
+/* 			#controls.scrolled { */
+/* 				backdrop-filter: blur(30px); */
+/* 			} */
+			.past-header #title-intro-container {
+				opacity:0;
+			}
+			.bottom #header {
+/* 				background: unset; */
+				opacity: 0;
+			}
+			/*.scrolled #header {
+				min-height:0;
+				align-items: start;
+			}*/
+			
 			#content {
 				/*padding-top:10pt;
 				padding-left:10pt;
 				padding-right:10pt;*/
-				padding: 10pt;
-				margin: 10pt;
-				width:max(75%,400px);
+/* 				padding: 10pt; */
+				width:max(75%,400pt);
 				max-width:100%;
-				background: rgba(20,20,20,0.9);
-				backdrop-filter: blur(30px);
-				border-radius: 16pt;
-				margin-bottom:100vh;
+/* 				background: rgba(20,20,20,0.9); */
+/* 				backdrop-filter: blur(30px); */
+/* 				border-radius: 16pt; */
+/* 				margin-bottom:100vh; */
 			}
 			/*.section {
 				margin-bottom: 14pt;
@@ -280,13 +363,48 @@
 				opacity: .75;
 			}
 			a {
-				color: rgb(255,64,128);
-/* 				color: white; */
+/* 				color: rgb(255,80,160); */
+				color: white;
 				text-decoration: none;
 /* 				border-radius:1em; */
 /* 				background-color: rgb(146,0,60); */
+/* 				background-color: rgba(255,0,96,0.1); */
+/* 				background: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,0.1), rgba(255,255,255,0)); */
+				background: rgba(255,255,255,0.05);
 /* 				border: 2pt solid white; */
 /* 				padding: 0 .5em 0 .5em; */
+/* 				text-shadow: 0 0 2pt rgba(255,255,255,0.5); */
+/* 				border-radius: 16pt; */
+/* 				border-top-left-radius: 4pt; */
+/* 				border-top-right-radius: 4pt; */
+/* 				border-bottom-left-radius: 4pt; */
+/* 				border-bottom-right-radius: 4pt; */
+				border-radius: 4pt;
+				padding: 0 4pt 0 4pt;
+/* 				border-bottom: 1px solid rgba(255,255,255,.1); */
+				transition: background .5s ease;
+			}
+			/*.section:hover a {
+				border-bottom: 1px solid rgba(255,255,255,.5);
+				border-bottom-left-radius: unset;
+				border-bottom-right-radius: unset;
+			}*/
+			a:hover {
+				background: rgb(255,0,96)!important;
+/* 				border-bottom: 1px solid rgb(255,255,255); */
+				transition: background .1s ease;
+/* 				border-bottom-left-radius: unset; */
+/* 				border-bottom-right-radius: unset; */
+			}
+			a:active {
+				background: rgb(128,0,48)!important;
+/* 				border-bottom: 1px solid rgb(255,255,255); */
+				transition: background 0s ease;
+/* 				border-bottom-left-radius: unset; */
+/* 				border-bottom-right-radius: unset; */
+			}
+			#intro a {
+				background: rgba(128,128,128,0.5);
 			}
 			/*#content [id]::before {
 				content: '';
@@ -296,7 +414,8 @@
 				visibility: hidden;
 			}*/
 			#content [id] {
-				scroll-margin-top: calc(var(--headheight) + 1em);
+/* 				scroll-margin-top: calc(var(--headheight) + 1em); */
+				scroll-margin-top: 1em;
 			}
 			#content table.side-by-side {
 				background: none;
@@ -396,11 +515,29 @@
 	<body class="show-c1 show-c2 show-c3 show-c4">
 		<div id="bg"></div>
 		<div id="header">
-			<div id="title-container">
-				<div id="title">Maxima</div>
-				<div id="subtitle">&#11835; 2025 Edition &#11835;</div>
+		
+			<div id="title-intro-container">
+				<div id="title-container">
+					<div id="title">Maxima</div>
+					<div id="subtitle">&#11835; 2025 Edition &#11835;</div>
+				</div>
+				
+				<div id="intro">
+					<p>
+						A set of rules and guidance<br />
+						Which make it easier to create and run<br />
+						Challenging Narrative Role-Playing Games<br />
+						Conducted among friends<br />
+						<br />
+						Created by uzalu
+					</p>
+					<p>
+						<a href="https://git.uzalu.net/uzalu/Maxima_2025">Git</a> |
+						<a href="https://git.uzalu.net/uzalu/Maxima_2025/src/branch/master/LICENCE.md">License</a>
+					</p>
+				</div>
 			</div>
-			<div class="spacer"></div>
+			
 			<div id="controls">
 				<label id="complexity-label">
 					<div class="complexity-text">
@@ -412,602 +549,593 @@
 					</div>
 				</label>
 			</div>
+			
 		</div>
 		<div id="header-spacer"></div>
-		<div id="content">
-			<div class="section">
-				<h1>Maxima 2025</h1>
-				<p>
-					A set of rules and guidance<br />
-					Which make it easier to create and run<br />
-					Challenging Narrative Role-Playing Games<br />
-					Conducted among friends<br />
-					<br />
-					Created by uzalu
-				</p>
-				<p>
-					<a href="https://git.uzalu.net/uzalu/Maxima_2025">Git</a> |
-					<a href="https://git.uzalu.net/uzalu/Maxima_2025/src/branch/master/LICENCE.md">License</a>
-				</p>
-			</div>
-			
-			<div class="section">
-				<h1>Characters</h1>
-				<p class="c2">Characters are anything which might attempt and fail to do something.</p>
-				<p>To start playing a campaign, each Player only needs a rough concept of their Character.<span class="c3"><br />Further Character details can be added later, as needed.</span></p>
+		
+		<div id="page">
+				
+			<div id="content">
 				
 				<div class="section">
-					<h2>Character Sheet</h2>
-					<p class="c10 aside notes">This section requires more work, particularly expanding the example table.</p>
-					<p class="c2">
-						Characters are recorded using only 2 types of information: Modifiers and Sources.
-						<br />
-						<span class="minor c4">
-							Notes can also be added to the sheet, but are optional.
-						</span>
-					</p>
-					<p class="ce1">Record your Character like this:</p>
-					<p class="c2">Your Character Sheet should look roughly like this:</p>
+					<h1>Characters</h1>
+					<p class="c2">Characters are anything which might attempt and fail to do something.</p>
+					<p>To start playing a campaign, each Player only needs a rough concept of their Character.<span class="c3"><br />Further Character details can be added later, as needed.</span></p>
 					
-					<div class="mono c2">
-						# Character: Roger <br />
-						Strength	+4 <br />
-						 <br />
-						# Ring of Perception	x1 <br />
-						Perception	+3 <br />
-					</div>
-					
-					<p class="ce2">This example is explained below:</p>
-					<p class="c3">Below is a more detailed example:</p>
-					
-					<table class="side-by-side">
-					
-						<tr class="c2">
-							<th>Character Sheet Line</th>
-							<th>Character Sheet Line Meaning</th>
-						</tr>
+					<div class="section">
+						<h2>Character Sheet</h2>
+						<p class="c10 aside notes">This section requires more work, particularly expanding the example table.</p>
+						<p class="c2">
+							Characters are recorded using only 2 types of information: Modifiers and Sources.
+							<br />
+							<span class="minor c4">
+								Notes can also be added to the sheet, but are optional.
+							</span>
+						</p>
+						<p class="ce1">Record your Character like this:</p>
+						<p class="c2">Your Character Sheet should look roughly like this:</p>
 						
-						<tr>
-							<td class="mono">
-								# Character: Roger
-							</td>
-							<td class="sbs-desc">
-								The Character <a href="#sources">Source</a>, which includes the Character's name.<br/>
-								<span class="minor c2">The name could be left blank if the Player hasn't thought of one yet.</span>
-							</td>
-						</tr>
+						<div class="mono c2">
+							# Character: Roger <br />
+							Strength	+4 <br />
+							<br />
+							# Ring of Perception	x1 <br />
+							Perception	+3 <br />
+						</div>
 						
-						<tr>
-							<td class="mono">
-								Strength	+4
-							</td>
-							<td class="sbs-desc">
-								A <a href="#modifiers">Modifier</a> with scope "Strength", and a Bonus of +4. <br />
-								<span class="c2">This will improve the Character's performance in <a href="#checks">Checks</a> which benefit from "Strength" by 4 points.</span>
-							</td>
-						</tr>
+						<p class="ce2">This example is explained below:</p>
+						<p class="c3">Below is a more detailed example:</p>
 						
-						<tr class="c2">
-							<td class="mono">
-								
-							</td>
-							<td class="sbs-desc">
-								<span class="c3 minor">
+						<table class="side-by-side">
+						
+							<tr class="c2">
+								<th>Character Sheet Line</th>
+								<th>Character Sheet Line Meaning</th>
+							</tr>
+							
+							<tr>
+								<td class="mono">
+									# Character: Roger
+								</td>
+								<td class="sbs-desc">
+									The Character <a href="#sources">Source</a>, which includes the Character's name.<br/>
+									<span class="minor c2">The name could be left blank if the Player hasn't thought of one yet.</span>
+								</td>
+							</tr>
+							
+							<tr>
+								<td class="mono">
+									Strength	+4
+								</td>
+								<td class="sbs-desc">
+									A <a href="#modifiers">Modifier</a> with scope "Strength", and a Bonus of +4. <br />
+									<span class="c2">This will improve the Character's performance in <a href="#checks">Checks</a> which benefit from "Strength" by 4 points.</span>
+								</td>
+							</tr>
+							
+							<tr class="c2">
+								<td class="mono">
+									
+								</td>
+								<td class="sbs-desc">
+									<span class="c3 minor">
+										Empty lines have no effect and can be used as convenient.
+									</span>
+								</td>
+							</tr>
+							
+							<tr class="c3">
+								<td class="mono">
+									# Damage
+								</td>
+								<td class="sbs-desc">
+									A <a href="#sources">Source</a> to record all forms of <a href="#damage">Damage</a> on the Character.
+									<br />
+									<span class="minor c4">
+										For more detail, separate <a href="#sources">Sources</a> can be recorded for each instance of <a href="#damage">Damage</a>.
+									</span>
+								</td>
+							</tr>
+							
+							<tr class="c3">
+								<td class="mono">
+									Vigour -1
+								</td>
+								<td class="sbs-desc">
+									A <a href="#modifiers">Modifier</a> indicating <a href="#damage">Damage</a> of the given type to the Character.
+									<br />
+									This reduces their effectiveness by 1 for relevant <a href="#checks">Checks</a>.
+									<br />
+									The special name <a href="#vigour">Vigour</a> applies to every <a href="#checks">Check</a>.
+								</td>
+							</tr>
+							
+							<tr class="c3">
+								<td class="mono">
+									
+								</td>
+								<td class="sbs-desc minor">
 									Empty lines have no effect and can be used as convenient.
-								</span>
-							</td>
-						</tr>
-						
-						<tr class="c3">
-							<td class="mono">
-								# Damage
-							</td>
-							<td class="sbs-desc">
-								A <a href="#sources">Source</a> to record all forms of <a href="#damage">Damage</a> on the Character.
-								<br />
-								<span class="minor c4">
-									For more detail, separate <a href="#sources">Sources</a> can be recorded for each instance of <a href="#damage">Damage</a>.
-								</span>
-							</td>
-						</tr>
-						
-						<tr class="c3">
-							<td class="mono">
-								Vigour -1
-							</td>
-							<td class="sbs-desc">
-								A <a href="#modifiers">Modifier</a> indicating <a href="#damage">Damage</a> of the given type to the Character.
-								<br />
-								This reduces their effectiveness by 1 for relevant <a href="#checks">Checks</a>.
-								<br />
-								The special name <a href="#vigour">Vigour</a> applies to every <a href="#checks">Check</a>.
-							</td>
-						</tr>
-						
-						<tr class="c3">
-							<td class="mono">
-								
-							</td>
-							<td class="sbs-desc minor">
-								Empty lines have no effect and can be used as convenient.
-							</td>
-						</tr>
-						
-						<tr>
-							<td class="mono">
-								# Ring of Perception	x1
-							</td>
-							<td class="sbs-desc">
-								A <a href="#sources">Source</a> for a physical item in the Character's possession. <br />
-								<span class="c2">This Source has a Quantity (<span class="mono">x</span>) of 1, meaning the Character currently holds 1 of them.</span>
-							</td>
-						</tr>
-						
-						<tr>
-							<td class="mono">
-								Perception	+3
-							</td>
-							<td class="sbs-desc">
-								A <a href="#modifiers">Modifier</a> provided by the <a href="#sources">Source</a> above ("Ring of Perception").
-							</td>
-						</tr>
-						
-					</table>
-				
-					<div class="section">
-						<h3 id="modifiers">Modifiers</h3>
-						<p class="c10 aside notes">This section requires more work.</p>
-						<p>Modifiers are any attribute of a Character which increases or decreases their chance of passing a Check.<span class="minor"><br />For example: skills, traits, damage, buff and debuff effects, etc.</span></p>
-						
-						<p class="c3">
-							Modifier names define the 'scope' they are relevant in.
-						</p>
-					</div>
-					
-					<div class="section">
-						<h3 id="sources">Sources</h3>
-						<p>Sources are anything which can provide Modifiers to a Character.<span class="minor"><br />For example: items, buffs and debuffs, or the Character themselves.</span></p>
-					</div>
-					
-				</div>
-			
-				<div class="section c6">
-					<h2>Character Creation</h2>
-					<p class="c6 aside notes">This section requires more work.</p>
-			
-					<div class="section c2">
-						<h2>Campaign Limits</h2>
-						<p class="c10 aside notes">This section requires more work.</p>
-						<p>
-							Each Campaign can impose limits on which Characters can participate.
-							<br />
-							The common means to do so are detailed below.
-						</p>
-			
-						<div class="section c2">
-							<h2 id="balance">Balance</h2>
-							<p class="c7 aside caution">This implementation is somewhat inelegant and is likely to change.</p>
-							<p class="c10 aside notes">This section requires more work, specifically better detail levels, and some character-sheet examples.</p>
+								</td>
+							</tr>
 							
-							<p>
-								Balance is the current points spent improving a Character.
-								<br />
-								<span class="minor">
-									It starts at zero, and can go negative.
-								</span>
-							</p>
-							
-							<p></p>
-							
-							<p>
-								Any Modifier or Source which is intended as a permanent part of a Character counts towards Balance.
-								<br />
-								<span class="minor">
-									This includes everything the Player chooses.
-								</span>
-							</p>
-							
-							<p>
-								Modifiers contribute their total value to Balance, meaning the sum of their <span class="mono">+</span> and <span class="mono">-</span> values.
-							</p>
-							
-							<p>
-								Some Sources can also contribute to Balance, which are usually custom packages of Modifiers, such as racials. These are usually defined alongside a Balance-cost.
-							</p>
-							
-							<div class="aside">
-								<p>
-									On the Character Sheet, a Modifier or Source which contributes towards Balance can be marked with a letter <span class="mono">b</span> at the end of the line to make this easier to track.
-								</p>
-								<p>
-									Sources with a custom Balance-contibution can be marked as, for example <span class="mono">b+4</span> or <span class="mono">b-2</span> for plus 4 and minus 2 Balance respectively.
-								</p>
-							</div>
-							
-							<p>
-								The Storyteller should set a Balance limit for each campaign.
-								<br />
-								If a Character's Balance exceeds that limit, they are not allowed to participate in the Campaign.
-							</p>
-							
-							<p>The recommended default limit is 25.</p>
-						
-						</div>
-			
-						<div class="section c3">
-							<h2>Cognia</h2>
-							<p class="c10 aside notes">This section requires more work.</p>
-							
-							<p>
-								Cognia is a measure of the mental weight required to include this Character in a campaign accurately.
-							</p>
-
-							<p><a href="#balance">Balanced</a>-for Modifiers and Sources with <span class="mono">-</span> values increase Cognia (1 per Modifier/Source).</p>
-
-							<div class="c6 aside commentary">
-								<p>
-									Players are naturally motivated to remember Modifiers with <span class="mono">+</span> values, but not so for the <span class="mono">-</span> values. Given this, the Storyteller needs to always remember which Modifiers may apply, not just during Checks but during any interaction to which the Modifier might be relevant.
-								</p>
-								<p>
-									A Campaign with 5 Player-Characters, each of whom have 3 Negative Modifiers, would require the Storyteller to reliably remember 15 Modifiers at all times. This would be difficult, and thus this mechanism helps regulate this potential excess.
-								</p>
-							</div>
-
-							<p>
-								The Storyteller may set a Cognia limit for each campaign.
-								<br />
-								If a Character's Cognia exceeds that limit, they are not allowed to participate in the Campaign.
-							</p>
-
-							<p>It is recommended to start with a conservative Cognia limit of 2 per Character.</p>
-						
-						</div>
-					
-					</div>
-				
-				</div>
-				
-			</div>
-			
-			<div class="section c7">
-				<h1 id="tasks">Tasks</h1>
-				<p>
-					Anything a Character can attempt to do, but might not complete successfully is a Task.
-					<br />
-					Tasks are usually used with Checks, and don't need to be recorded otherwise.
-				</p>
-				
-				<p class="aside">
-					Most Tasks are implicit, are communicated as part of a Check, are Ephemeral, and only have a Workload rating.
-					<br />
-					For more advanced Tasks, such as a long project, it may be worth communicating the Task explicitly.
-				</p>
-				
-				<p>
-					Tasks are recorded as Sources, and defined by the following information:
-					<ul>
-						<li>Workload rating</li>
-						<li>Ephemeral or Persistent</li>
-						<li>Complexity rating (Defaults to 0)</li>
-						<li>Current Progress (Starts at 0)</li>
-					</ul>
-				</p>
-				
-				<div class="section">
-					<h2>Workload</h2>
-					<p>
-						The Workload of a task is the total Progress required to complete it.
-					</p>
-					<p>
-						The Storyteller may choose to tell Players the Workload, especially if the Character would be able to ascertain it.
-					</p>
-					
-				</div>
-				
-				<div class="section">
-					<h2>Ephemeral or Persistent</h2>
-					<p>
-						Ephemeral Tasks either Succeed or Fail as soon as they are progressed.
-						<br />
-						Most Tasks are Ephemeral.
-						<br />
-						Ephemeral Tasks don't usually need to be recorded.
-					</p>
-					<p>
-						Persistent Tasks can exist in a partially-completed state, and can be progressed by multiple Checks over time.
-					</p>
-					
-				</div>
-				
-				<div class="section">
-					<h2>Complexity Rating</h2>
-					<p>
-						A Task's Complexity Rating is the minimum Success Rating required to make any progress in it.
-					</p>
-					<p class="aside">
-						For example, for a Task with a Complexity of 6, if a Check to progress the Task has a Success Rating of 5, no progress is made.
-						<br />
-						If the Success Rating is 6, then 6 progress is made.
-					</p>
-					
-				</div>
-				
-				<div class="section">
-					<h2>Progressing a Task</h2>
-					<p>
-						First, run a Check for the Character, to determine the Success Rating in this Task.
-					</p>
-					<p>
-						If the Success Rating is greater than or equal to the Task's Complexity, add the Success Rating to the Task's Progress.
-					</p>
-					<p>
-						If the Progress is greater than or equal to the Workload, the Task completes.
-					</p>
-					
-					<div class="section">
-						<h3>Gradient Completion</h3>
-						<p>
-							As the Progress of a Task approaches the required amount, a less-than-total conclusion can be reached, ending the Task.
-						</p>
-						<p>
-							This is at the Storyteller's discretion, but should not be done if the Player wants to fully complete the Task.
-						</p>
-					
-					</div>
-					
-				</div>
-				
-			</div>
-			
-			<div class="section">
-				<h1 id="checks">Checks</h1>
-				<p class="cl7">Whenever a Character may fail at something they are trying to do, run a Check.</p>
-				<p class="c7">Checks are usually run to determine the level of success a Character has at a <a href="#tasks">Task</a>.</p>
-				
-				<div class="section cl7">
-					<h2>Difficulty</h2>
-					<p>
-						The Storyteller determines a Difficulty, usually between 1 and 10.
-					</p>
-					<p class="c4">
-						The Storyteller may choose to tell Players the difficulty<span class="c5">, especially if the Character would be able to ascertain it</span>.
-					</p>
-					<p class="c3">
-						The Storyteller may choose to use a range of values, allowing partial success.
-						<br />
-						This is called Gradient Difficulty.
-						<br />
-						<span class="minor">
-							For example, a Check might give a better result with a Success Rating of 3 than with 1, even though 6 is required for a complete success.
-						</span>
-					</p>
-				
-				</div>
-				
-				<div class="section">
-					<h2>Performance</h2>
-					<p class="c10 aside notes">This section requires more work, particularly in presentation.</p>
-					
-					<p class="c1">
-						Find Modifiers which are relevant to this Check.
-						<br />
-						<span class="ce1 minor">
-							Use the highest Modifier per source, one each for positive, one each for negative.
-							<br />
-						</span>
-						<span class="c2">
-							The Storyteller determines whether Modifiers are relevant.
-						</span>
-					</p>
-					
-					<p class="c2">
-						Find Modifiers with a relevant <span class="monospace">+</span> value.
-						<span class="c3 minor">
-							<br />
-							They are relevant if the upside of their scope (name) matches this Check.
-						</span>
-						<br />
-						<span class="cl3">The Player chooses one per Source<span class="c3">, or the highest per Source for NPCs</span>.</span>
-						<span class="c4">The highest one per Source is chosen, or if the Character is controlled by a Player, the Player may choose any one per Source.</span>
-					<p>
-					
-					<div class="section c3">
-						<h3>Passing Modifier</h3>
-						<p class="c10 aside notes">This section requires more work.</p>
-						<p>
-							If the <span class="monospace">+</span> Modifiers are too vague for the Check, a specifically-matching Modifier with at least +3 may be required to continue.
-							<br />
-							The value of this Modifier is not factored into the Challenge.
-						</p>
-					</div>
-					
-					<p class="c2">
-						Find Modifiers with a relevant <span class="monospace">-</span> value.
-						<span class="c3 minor">
-							<br />
-							They are relevant if the downside of their scope (name) matches this Check.
-						</span>
-						<br />
-						Use the largest one per Source.
-					<p>
-					
-					<p class="c5 aside">
-						If a Modifier matches weakly, its value can be reduced towards zero, by up to 3 points.
-					</p>
-					
-					<p>
-						Combine the relevant Modifiers' values to get your Success Rating.
-						<br />
-						<span class="c3">
-							<span class="monospace">+</span> values add to the total.
-							<br />
-							<span class="monospace">-</span> values make the total lower (subtract the absolute value from the total, ignoring the sign).
-						</span>
-					</p>
-					
-				</div>
-				
-				<div class="section">
-					<h3>Boost (Optional)</h3>
-					
-					<p>
-						The Character may choose to improve their chances by rolling 6-sided dice.
-						<br />
-						<span class="c4 minor"> If the Storyteller agrees, any RNG method the Storyteller can see can be used.</span>
-					</p>
-					
-					<p>
-						If two 1's are rolled in a single check, no further rolls are allowed, and the result is a Catastrophic Failure.
-						<br />
-						<span class="minor c3">
-							This incurs a major detrimental narrative side-effect<span class="c5">, unless none are applicable</span>.
-						</span>
-					</p>
-					
-					<p>
-						Otherwise, using the most recent roll, apply the given effect:
-						<table>
 							<tr>
-								<td>6</td>
-								<td><span class="dice-face">&#9861;</span></td>
-								<td>Increase Success Rating by 3</td>
+								<td class="mono">
+									# Ring of Perception	x1
+								</td>
+								<td class="sbs-desc">
+									A <a href="#sources">Source</a> for a physical item in the Character's possession. <br />
+									<span class="c2">This Source has a Quantity (<span class="mono">x</span>) of 1, meaning the Character currently holds 1 of them.</span>
+								</td>
 							</tr>
+							
 							<tr>
-								<td>5</td>
-								<td><span class="dice-face">&#9860;</span></td>
-								<td>Increase Success Rating by 2</td>
-							</tr>
-							<tr>
-								<td>4</td>
-								<td><span class="dice-face">&#9859;</span></td>
-								<td>Increase Success Rating by 1</td>
-							</tr>
-							<tr class="c2">
-								<td>3</td>
-								<td><span class="dice-face">&#9858;</span></td>
-								<td class="ignore">No Effect</td>
-							</tr>
-							<tr class="c2">
-								<td>2</td>
-								<td><span class="dice-face">&#9857;</span></td>
-								<td class="ignore">No Effect</td>
-							</tr>
-							<tr>
-								<td>1</td>
-								<td><span class="dice-face">&#9856;</span></td>
-								<td>Simple Failure</td>
+								<td class="mono">
+									Perception	+3
+								</td>
+								<td class="sbs-desc">
+									A <a href="#modifiers">Modifier</a> provided by the <a href="#sources">Source</a> above ("Ring of Perception").
+								</td>
 							</tr>
+							
 						</table>
-					</p>
 					
+						<div class="section">
+							<h3 id="modifiers">Modifiers</h3>
+							<p class="c10 aside notes">This section requires more work.</p>
+							<p>Modifiers are any attribute of a Character which increases or decreases their chance of passing a Check.<span class="minor"><br />For example: skills, traits, damage, buff and debuff effects, etc.</span></p>
+							
+							<p class="c3">
+								Modifier names define the 'scope' they are relevant in.
+							</p>
+						</div>
+						
+						<div class="section">
+							<h3 id="sources">Sources</h3>
+							<p>Sources are anything which can provide Modifiers to a Character.<span class="minor"><br />For example: items, buffs and debuffs, or the Character themselves.</span></p>
+						</div>
+						
+					</div>
+				
+					<div class="section c6">
+						<h2>Character Creation</h2>
+						<p class="c6 aside notes">This section requires more work.</p>
+				
+						<div class="section c2">
+							<h2>Campaign Limits</h2>
+							<p class="c10 aside notes">This section requires more work.</p>
+							<p>
+								Each Campaign can impose limits on which Characters can participate.
+								<br />
+								The common means to do so are detailed below.
+							</p>
+				
+							<div class="section c2">
+								<h2 id="balance">Balance</h2>
+								<p class="c7 aside caution">This implementation is somewhat inelegant and is likely to change.</p>
+								<p class="c10 aside notes">This section requires more work, specifically better detail levels, and some character-sheet examples.</p>
+								
+								<p>
+									Balance is the current points spent improving a Character.
+									<br />
+									<span class="minor">
+										It starts at zero, and can go negative.
+									</span>
+								</p>
+								
+								<p></p>
+								
+								<p>
+									Any Modifier or Source which is intended as a permanent part of a Character counts towards Balance.
+									<br />
+									<span class="minor">
+										This includes everything the Player chooses.
+									</span>
+								</p>
+								
+								<p>
+									Modifiers contribute their total value to Balance, meaning the sum of their <span class="mono">+</span> and <span class="mono">-</span> values.
+								</p>
+								
+								<p>
+									Some Sources can also contribute to Balance, which are usually custom packages of Modifiers, such as racials. These are usually defined alongside a Balance-cost.
+								</p>
+								
+								<div class="aside">
+									<p>
+										On the Character Sheet, a Modifier or Source which contributes towards Balance can be marked with a letter <span class="mono">b</span> at the end of the line to make this easier to track.
+									</p>
+									<p>
+										Sources with a custom Balance-contibution can be marked as, for example <span class="mono">b+4</span> or <span class="mono">b-2</span> for plus 4 and minus 2 Balance respectively.
+									</p>
+								</div>
+								
+								<p>
+									The Storyteller should set a Balance limit for each campaign.
+									<br />
+									If a Character's Balance exceeds that limit, they are not allowed to participate in the Campaign.
+								</p>
+								
+								<p>The recommended default limit is 25.</p>
+							
+							</div>
+				
+							<div class="section c3">
+								<h2>Cognia</h2>
+								<p class="c10 aside notes">This section requires more work.</p>
+								
+								<p>
+									Cognia is a measure of the mental weight required to include this Character in a campaign accurately.
+								</p>
+
+								<p><a href="#balance">Balanced</a>-for Modifiers and Sources with <span class="mono">-</span> values increase Cognia (1 per Modifier/Source).</p>
+
+								<div class="c6 aside commentary">
+									<p>
+										Players are naturally motivated to remember Modifiers with <span class="mono">+</span> values, but not so for the <span class="mono">-</span> values. Given this, the Storyteller needs to always remember which Modifiers may apply, not just during Checks but during any interaction to which the Modifier might be relevant.
+									</p>
+									<p>
+										A Campaign with 5 Player-Characters, each of whom have 3 Negative Modifiers, would require the Storyteller to reliably remember 15 Modifiers at all times. This would be difficult, and thus this mechanism helps regulate this potential excess.
+									</p>
+								</div>
+
+								<p>
+									The Storyteller may set a Cognia limit for each campaign.
+									<br />
+									If a Character's Cognia exceeds that limit, they are not allowed to participate in the Campaign.
+								</p>
+
+								<p>It is recommended to start with a conservative Cognia limit of 2 per Character.</p>
+							
+							</div>
+						
+						</div>
+					
+					</div>
 					
 				</div>
 				
-				<p class="cl3">
-					The Success Rating is compared to the Difficulty, and if it is greater or equal, the Challenge is successful, otherwise it fails.
-				</p>
-				<div class="section c3">
-					<h2 class="cl7">Completion</h2>
-					<p class="cl7">
-						The Storyteller determines the outcome by comparing the Success Rating to the Difficulty.
-						<br />
-						The result can be failure, partial success, or complete success.
-					</p>
-					<h2 class="c7">Success Rating</h2>
-					<p class="c7">
-						The Success Rating of this Check can now be used, including to progress a Task.
-					</p>
-				</div>
-				
-			</div>
-				
-			<div class="section c1">
-				<h1 id="vigour">Vigour</h1>
-				<p class="aside caution">The contents of this section are in flux.</p>
-				<p class="c10 aside notes">This section requires more work.</p>
-				<p class="c10 aside notes">Vigour may be renamed, likely to "Cohesion" or "Stability".</p>
-				<p class="ce1">Keep track of a Modifier called "Vigour", which starts at zero, and applies to all Checks.</p>
-			
-				<div class="section">
-					<h1>Reprieve</h1>
-					<p class="c10 aside notes">This section requires more work.</p>
-					<p class="">When a Character enters a comfortable situation, coming from a tense or hazardous one, they gain 1-3 Vigour depending on the level of comfort.</p>
-					
-				</div>
-			
-				<div class="section">
-					<h1>Collapse</h1>
-					<p class="c10 aside notes">This section requires more work.</p>
-					<p class="">When Vigour gets low enough, the Character collapses, and cannot take actions.</p>
-					
-				</div>
-			
-				<div class="section">
-					<h1>Focus</h1>
-					<p class="c10 aside notes">This section requires more work.</p>
-					<p class="">At any time, a Character can spend 1 Vigour, to "switch focus" to a new Modifier named at their choice, which has +2, removing the previous focus.</p>
-					
-				</div>
-				
-			</div>
-			
-			<div class="section c3">
-				<h1>Common Tasks</h1>
-				<p class="c10 aside notes">This section requires more work.</p>
-				<p class="c10 aside notes">This section's title should be improved.</p>
-				
-				<div class="section c10">
-					<h1>Combat</h1>
-					<p class="c10 aside notes">This section requires more work.</p>
-					
-				</div>
-				
-				<div class="section c10">
-					<h1 id="damage">Damage</h1>
-					<p class="c10 aside notes">This section requires more work.</p>
-					
-				</div>
-			
-				<div class="section c3">
-					<h1>Instant Reaction</h1>
-					
-					<p class="c6 aside notes">
-						This is intended for Characters with human-like sensory systems, in Campaigns running at relevant timescales.
-					</p>
-					
+				<div class="section c7">
+					<h1 id="tasks">Tasks</h1>
 					<p>
-						If a Character is confronted by a sudden change of circumstances for which they need to gather information using their senses in preparation for a potential reaction, the Storyteller can initiate an Instant Reaction.
+						Anything a Character can attempt to do, but might not complete successfully is a Task.
+						<br />
+						Tasks are usually used with Checks, and don't need to be recorded otherwise.
 					</p>
 					
 					<p class="aside">
-						An example of an Instant Reaction scenario is opening a door whilst expecting combat.
+						Most Tasks are implicit, are communicated as part of a Check, are Ephemeral, and only have a Workload rating.
+						<br />
+						For more advanced Tasks, such as a long project, it may be worth communicating the Task explicitly.
 					</p>
 					
 					<p>
-						The Player is told what they can immediately sense.
-						<br />
-						<span class="minor">
-							This will usually be very vague and general information about shapes, layout, etc.
-						</span>
-						<br />
-						<span class="minor">
-							For Characters with human-like senses, "immediately" means within one tenth of a second.
-						</span>
+						Tasks are recorded as Sources, and defined by the following information:
+						<ul>
+							<li>Workload rating</li>
+							<li>Ephemeral or Persistent</li>
+							<li>Complexity rating (Defaults to 0)</li>
+							<li>Current Progress (Starts at 0)</li>
+						</ul>
 					</p>
-					<p>
-						The Player can either choose to act instantly on the limited information, or wait a tiny bit longer for much more detailed information.
-						<br />
-						<span class="minor">
-							For Characters with human-like senses, the delay should be half a second.
-						</span>
-					</p>
-
+					
+					<div class="section">
+						<h2>Workload</h2>
+						<p>
+							The Workload of a task is the total Progress required to complete it.
+						</p>
+						<p>
+							The Storyteller may choose to tell Players the Workload, especially if the Character would be able to ascertain it.
+						</p>
+						
+					</div>
+					
+					<div class="section">
+						<h2>Ephemeral or Persistent</h2>
+						<p>
+							Ephemeral Tasks either Succeed or Fail as soon as they are progressed.
+							<br />
+							Most Tasks are Ephemeral.
+							<br />
+							Ephemeral Tasks don't usually need to be recorded.
+						</p>
+						<p>
+							Persistent Tasks can exist in a partially-completed state, and can be progressed by multiple Checks over time.
+						</p>
+						
+					</div>
+					
+					<div class="section">
+						<h2>Complexity Rating</h2>
+						<p>
+							A Task's Complexity Rating is the minimum Success Rating required to make any progress in it.
+						</p>
+						<p class="aside">
+							For example, for a Task with a Complexity of 6, if a Check to progress the Task has a Success Rating of 5, no progress is made.
+							<br />
+							If the Success Rating is 6, then 6 progress is made.
+						</p>
+						
+					</div>
+					
+					<div class="section">
+						<h2>Progressing a Task</h2>
+						<p>
+							First, run a Check for the Character, to determine the Success Rating in this Task.
+						</p>
+						<p>
+							If the Success Rating is greater than or equal to the Task's Complexity, add the Success Rating to the Task's Progress.
+						</p>
+						<p>
+							If the Progress is greater than or equal to the Workload, the Task completes.
+						</p>
+						
+						<div class="section">
+							<h3>Gradient Completion</h3>
+							<p>
+								As the Progress of a Task approaches the required amount, a less-than-total conclusion can be reached, ending the Task.
+							</p>
+							<p>
+								This is at the Storyteller's discretion, but should not be done if the Player wants to fully complete the Task.
+							</p>
+						
+						</div>
+						
+					</div>
 					
 				</div>
 				
-			</div>
-			
-		</div>
+				<div class="section">
+					<h1 id="checks">Checks</h1>
+					<p class="cl7">Whenever a Character may fail at something they are trying to do, run a Check.</p>
+					<p class="c7">Checks are usually run to determine the level of success a Character has at a <a href="#tasks">Task</a>.</p>
+					
+					<div class="section cl7">
+						<h2>Difficulty</h2>
+						<p>
+							The Storyteller determines a Difficulty, usually between 1 and 10.
+						</p>
+						<p class="c4">
+							The Storyteller may choose to tell Players the difficulty<span class="c5">, especially if the Character would be able to ascertain it</span>.
+						</p>
+						<p class="c3">
+							The Storyteller may choose to use a range of values, allowing partial success.
+							<br />
+							This is called Gradient Difficulty.
+							<br />
+							<span class="minor">
+								For example, a Check might give a better result with a Success Rating of 3 than with 1, even though 6 is required for a complete success.
+							</span>
+						</p>
+					
+					</div>
+					
+					<div class="section">
+						<h2>Performance</h2>
+						<p class="c10 aside notes">This section requires more work, particularly in presentation.</p>
+						
+						<p class="c1">
+							Find Modifiers which are relevant to this Check.
+							<br />
+							<span class="ce1 minor">
+								Use the highest Modifier per source, one each for positive, one each for negative.
+								<br />
+							</span>
+							<span class="c2">
+								The Storyteller determines whether Modifiers are relevant.
+							</span>
+						</p>
+						
+						<p class="c2">
+							Find Modifiers with a relevant <span class="monospace">+</span> value.
+							<span class="c3 minor">
+								<br />
+								They are relevant if the upside of their scope (name) matches this Check.
+							</span>
+							<br />
+							<span class="cl3">The Player chooses one per Source<span class="c3">, or the highest per Source for NPCs</span>.</span>
+							<span class="c4">The highest one per Source is chosen, or if the Character is controlled by a Player, the Player may choose any one per Source.</span>
+						<p>
+						
+						<div class="section c3">
+							<h3>Passing Modifier</h3>
+							<p class="c10 aside notes">This section requires more work.</p>
+							<p>
+								If the <span class="monospace">+</span> Modifiers are too vague for the Check, a specifically-matching Modifier with at least +3 may be required to continue.
+								<br />
+								The value of this Modifier is not factored into the Challenge.
+							</p>
+						</div>
+						
+						<p class="c2">
+							Find Modifiers with a relevant <span class="monospace">-</span> value.
+							<span class="c3 minor">
+								<br />
+								They are relevant if the downside of their scope (name) matches this Check.
+							</span>
+							<br />
+							Use the largest one per Source.
+						<p>
+						
+						<p class="c5 aside">
+							If a Modifier matches weakly, its value can be reduced towards zero, by up to 3 points.
+						</p>
+						
+						<p>
+							Combine the relevant Modifiers' values to get your Success Rating.
+							<br />
+							<span class="c3">
+								<span class="monospace">+</span> values add to the total.
+								<br />
+								<span class="monospace">-</span> values make the total lower (subtract the absolute value from the total, ignoring the sign).
+							</span>
+						</p>
+						
+					</div>
+					
+					<div class="section">
+						<h3>Boost (Optional)</h3>
+						
+						<p>
+							The Character may choose to improve their chances by rolling 6-sided dice.
+							<br />
+							<span class="c4 minor"> If the Storyteller agrees, any RNG method the Storyteller can see can be used.</span>
+						</p>
+						
+						<p>
+							If two 1's are rolled in a single check, no further rolls are allowed, and the result is a Catastrophic Failure.
+							<br />
+							<span class="minor c3">
+								This incurs a major detrimental narrative side-effect<span class="c5">, unless none are applicable</span>.
+							</span>
+						</p>
+						
+						<p>
+							Otherwise, using the most recent roll, apply the given effect:
+							<table>
+								<tr>
+									<td>6</td>
+									<td><span class="dice-face">&#9861;</span></td>
+									<td>Increase Success Rating by 3</td>
+								</tr>
+								<tr>
+									<td>5</td>
+									<td><span class="dice-face">&#9860;</span></td>
+									<td>Increase Success Rating by 2</td>
+								</tr>
+								<tr>
+									<td>4</td>
+									<td><span class="dice-face">&#9859;</span></td>
+									<td>Increase Success Rating by 1</td>
+								</tr>
+								<tr class="c2">
+									<td>3</td>
+									<td><span class="dice-face">&#9858;</span></td>
+									<td class="ignore">No Effect</td>
+								</tr>
+								<tr class="c2">
+									<td>2</td>
+									<td><span class="dice-face">&#9857;</span></td>
+									<td class="ignore">No Effect</td>
+								</tr>
+								<tr>
+									<td>1</td>
+									<td><span class="dice-face">&#9856;</span></td>
+									<td>Simple Failure</td>
+								</tr>
+							</table>
+						</p>
+						
+						
+					</div>
+					
+					<p class="cl3">
+						The Success Rating is compared to the Difficulty, and if it is greater or equal, the Challenge is successful, otherwise it fails.
+					</p>
+					<div class="section c3">
+						<h2 class="cl7">Completion</h2>
+						<p class="cl7">
+							The Storyteller determines the outcome by comparing the Success Rating to the Difficulty.
+							<br />
+							The result can be failure, partial success, or complete success.
+						</p>
+						<h2 class="c7">Success Rating</h2>
+						<p class="c7">
+							The Success Rating of this Check can now be used, including to progress a Task.
+						</p>
+					</div>
+					
+				</div>
+					
+				<div class="section c1">
+					<h1 id="vigour">Vigour</h1>
+					<p class="aside caution">The contents of this section are in flux.</p>
+					<p class="c10 aside notes">This section requires more work.</p>
+					<p class="c10 aside notes">Vigour may be renamed, likely to "Cohesion" or "Stability".</p>
+					<p class="ce1">Keep track of a Modifier called "Vigour", which starts at zero, and applies to all Checks.</p>
+				
+					<div class="section">
+						<h1>Reprieve</h1>
+						<p class="c10 aside notes">This section requires more work.</p>
+						<p class="">When a Character enters a comfortable situation, coming from a tense or hazardous one, they gain 1-3 Vigour depending on the level of comfort.</p>
+						
+					</div>
+				
+					<div class="section">
+						<h1>Collapse</h1>
+						<p class="c10 aside notes">This section requires more work.</p>
+						<p class="">When Vigour gets low enough, the Character collapses, and cannot take actions.</p>
+						
+					</div>
+				
+					<div class="section">
+						<h1>Focus</h1>
+						<p class="c10 aside notes">This section requires more work.</p>
+						<p class="">At any time, a Character can spend 1 Vigour, to "switch focus" to a new Modifier named at their choice, which has +2, removing the previous focus.</p>
+						
+					</div>
+					
+				</div>
+				
+				<div class="section c3">
+					<h1>Common Tasks</h1>
+					<p class="c10 aside notes">This section requires more work.</p>
+					<p class="c10 aside notes">This section's title should be improved.</p>
+					
+					<div class="section c10">
+						<h1>Combat</h1>
+						<p class="c10 aside notes">This section requires more work.</p>
+						
+					</div>
+					
+					<div class="section c10">
+						<h1 id="damage">Damage</h1>
+						<p class="c10 aside notes">This section requires more work.</p>
+						
+					</div>
+				
+					<div class="section c3">
+						<h1>Instant Reaction</h1>
+						
+						<p class="c6 aside notes">
+							This is intended for Characters with human-like sensory systems, in Campaigns running at relevant timescales.
+						</p>
+						
+						<p>
+							If a Character is confronted by a sudden change of circumstances for which they need to gather information using their senses in preparation for a potential reaction, the Storyteller can initiate an Instant Reaction.
+						</p>
+						
+						<p class="aside">
+							An example of an Instant Reaction scenario is opening a door whilst expecting combat.
+						</p>
+						
+						<p>
+							The Player is told what they can immediately sense.
+							<br />
+							<span class="minor">
+								This will usually be very vague and general information about shapes, layout, etc.
+							</span>
+							<br />
+							<span class="minor">
+								For Characters with human-like senses, "immediately" means within one tenth of a second.
+							</span>
+						</p>
+						<p>
+							The Player can either choose to act instantly on the limited information, or wait a tiny bit longer for much more detailed information.
+							<br />
+							<span class="minor">
+								For Characters with human-like senses, the delay should be half a second.
+							</span>
+						</p>
+
+						
+					</div>
+					
+				</div>
+				
+			</div> <!--content-->
+		
+		</div> <!--page-->
 		
 		<script>
 			const display = document.querySelector("#complexity-display");
@@ -1022,29 +1150,100 @@
 				let v = input.value;
 				for(let i = 1; i <= 10; i++) {
 					if(v >= i){
-						classes += " show-c" + i;
+						// classes += " show-c" + i;
+						body.classList.add("show-c" + i);
+					} else {
+						body.classList.remove("show-c" + i);
 					}
 					if(v < i){
-						classes += " show-cl" + i;
+						// classes += " show-cl" + i;
+						body.classList.add("show-cl" + i);
+					} else {
+						body.classList.remove("show-cl" + i);
 					}
 					if(v <= i){
-						classes += " show-cle" + i;
+						// classes += " show-cle" + i;
+						body.classList.add("show-cle" + i);
+					} else {
+						body.classList.remove("show-cle" + i);
 					}
+					body.classList.remove("show-ce" + i);
 				}
-				classes += " show-ce" + input.value;
-				body.className = classes.trim();
+				body.classList.add("show-ce" + input.value);
+				// classes += " show-ce" + input.value;
+				// body.className = classes.trim();
+				// body.className += classes;
 			}
 			input.addEventListener("input", updateDisplay);
 			input.addEventListener("change", updateTexts);
 			updateTexts();
 			
 			const bg = document.querySelector("#bg");
-			bg.style.backgroundImage = "url(\"images/bg/maxima_bg_" + Math.floor(Math.random() * 21) + ".jpg\")";
+			bg.style.backgroundImage = "url(\"images/bg/maxima_bg_" + Math.floor(Math.random() * 23) + ".jpg\")";
 			setTimeout(() => {
 				bg.style.opacity = 1;
 			},100);
 			
 			const header = document.querySelector("#header");
+			
+			// const controls = document.querySelector("#controls");
+			let atBottom = 0;
+			let atTop = 0;
+			let atScrolled = 0;
+			let pastHeaderSpace = 0;
+			function updateHeaderState() {
+				// partly from https://stackoverflow.com/questions/3898130/check-if-a-user-has-scrolled-to-the-bottom-not-just-the-window-but-any-element
+				if (Math.abs(body.scrollHeight - body.clientHeight - body.scrollTop) < 1) {
+					if(!atBottom){
+						// body.className += " bottom";
+						body.classList.add("bottom");
+						atBottom = 1;
+					}
+				} else if(atBottom) {
+					// body.className = body.className.replaceAll("bottom","").trim();
+					body.classList.remove("bottom");
+					atBottom = 0;
+				}
+				
+				if (body.scrollTop < 1) {
+					if(!atTop){
+						// body.className += " top";
+						body.classList.add("top");
+						atTop = 1;
+					}
+				} else if(atTop) {
+					// body.className = body.className.replaceAll("top","").trim();
+					body.classList.remove("top");
+					atTop = 0;
+				}
+				
+				if (body.scrollTop >= 1) {
+					if(!atScrolled) {
+						// body.className += " scrolled";
+						body.classList.add("scrolled");
+						atScrolled = 1;
+					}
+				} else if(atScrolled) {
+					// body.className = body.className.replaceAll("scrolled","").trim();
+					body.classList.remove("scrolled");
+					atScrolled = 0;
+				}
+				
+				if (body.scrollTop > currentHeaderSpace) {
+					if(!pastHeaderSpace) {
+						// body.className += " past-header";
+						body.classList.add("past-header");
+						pastHeaderSpace = 1;
+					}
+				} else if(pastHeaderSpace) {
+					// body.className = body.className.replaceAll("past-header","").trim();
+					body.classList.remove("past-header");
+					pastHeaderSpace = 0;
+				}
+			}
+			document.addEventListener("scroll", updateHeaderState);
+			setTimeout(updateHeaderState,50);
+			
 			const rt = document.querySelector(":root");
 			
 			var currentHeaderSpace = 0;
@@ -1057,8 +1256,17 @@
 				}
 			}
 			updateHeaderSpacer();
+			document.addEventListener("scroll", updateHeaderSpacer);
 			setInterval(updateHeaderSpacer,1000);
 			
+			if(body.scrollTop < 1) {
+				setTimeout(() => {
+					if(body.scrollTop < 1) {
+						body.scrollTop = 200;
+					}
+				},2000);
+			}
+			
 		</script>
 		
 	</body>
