css/003-sugarcube-overwrite/general.css

+/* Revert font to SC 2.36 */
+html {
+	font: 16px/1 Helmet,Freesans,sans-serif;
+}
+
+body {
+	overflow-x: hidden;
+}
+
+/* clears SugarCube's default transition */
+.passage {
+	transition: none;
+	-webkit-transition: none;
+}
+
+.passage-in {
+	opacity: 1 !important;
+}
+
+#passages {
+	/* max-width: 54em */
+	max-width: 100%;
+}
+
+/* makes HR colorflip compatible */
+hr {
+	background:#ccc;
+	border:0;
+}
+
+/* fix dialog title centering */
+#ui-dialog-title {
+	padding-left: 3.5em;
+}
+
+/* make buttons look nice */
+.passage button {
+	background-color: var(--button-color);
+	border: solid 2px var(--button-border-color);
+}
+.passage button:hover {
+	background-color: var(--button-hover-color);
+}
+
+select {
+	padding-top: 0.4em;
+	padding-bottom: 0.4em;
+	background-color: #111;
+}

css/003-sugarcube-overwrite/sidebar.css

+/* change some SC2 styles */
+
+/* make the sidebar more compact by reducing the space between major parts */
+#ui-bar-body {
+	/* height: calc(100% - 2.5em); */
+	/* margin: 2.5em 0; */
+	height: calc(100% - 1.5em);
+	margin: 1.5em 0;
+}
+
+#ui-bar-body > :not(:first-child) {
+	/* margin-top: 2em; */
+	margin-top: 1.5em;
+}
+
+#story-author {
+	/* margin-top: 2em; */
+	margin-top: 0;
+}
+
+/* make cheat text boxes fit in sidebar */
+#story-caption input {
+	min-width: 0;
+	width: calc(100% - 0.8em - 2px);
+}

css/arcologyBuilding/arcologyBuilding.css

+.building {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+}
+
+.building.basement {
+	border-top: solid 1px #333333;
+	margin-top: -1px;
+	background-image: repeating-linear-gradient(135deg, transparent, transparent 20px, #333333 20px, #333333 30px);
+}
+
+.building .row {
+	display: flex;
+	flex-direction: row;
+	width: 95%;
+	margin: 0 auto;
+	justify-content: center;
+}
+
+@media only screen and (min-width: 1600px) {
+	.building .row {
+		width: 70%;
+	}
+}
+
+.building .outerCell {
+	/* fill cell fully, part 1: trick to fill the full height even if content is smaller */
+	display: flex;
+	flex-direction: row;
+}
+
+.building .innerCell {
+	margin: 3px;
+	border: 5px solid;
+	padding: 2px;
+	text-align: center;
+	/* fill cell fully, part 2: full width */
+	width: 100%;
+	/* overwriting with the default background color to hide the basement indicator */
+	background-color: #111;
+}
+
+.building .decorative {
+	outline: white solid 5px;
+	outline-offset: -8px;
+	height: 2em;
+}
+
+/* introduction special formatting */
+/* makes all links unusable */
+.intro .building a {
+	color: white;
+	pointer-events: none;
+	cursor: default;
+}
+
+.intro .building .hotkey {
+	display: none;
+}
+
+/* penthouse formatting */
+.building .gridWrapper {
+	display: grid;
+}
+
+.building .gridWrapper.grid1 {
+	grid-template-columns: 100%;
+}
+
+.building .gridWrapper.grid2 {
+	grid-template-columns: repeat(2, 50%);
+}
+
+.building .gridWrapper.grid3 {
+	grid-template-columns: repeat(3, 33.3%);
+}
+
+.building .gridWrapper div {
+	display: inline flow-root;
+	line-height: 1.1;
+	padding-bottom: 0.3em;
+}
+
+.building .collapsed {
+	display: inline flow-root;
+	margin: 0 0.2em;
+}
+
+/* border color for each cell */
+.building .row .apartments {
+	border-color: limegreen;
+}
+
+.building .row .arcade {
+	border-color: deeppink;
+}
+
+.building .row .brothel {
+	border-color: violet;
+}
+
+.building .row .barracks {
+	border-color: olivedrab;
+}
+
+.building .row .club {
+	border-color: orchid;
+}
+
+.building .row .corporateMarket {
+	border-color: purple;
+}
+
+.building .row .dairy {
+	border-color: white;
+}
+
+.building .row .denseApartments {
+	border-color: seagreen;
+}
+
+.building .row .empty {
+	border-color: lightgray;
+}
+
+.building .row .farmyard {
+	border-color: brown;
+}
+
+.building .row .fsShops {
+	border-color: mediumpurple;
+}
+
+.building .row .manufacturing {
+	border-color: slategray;
+}
+
+.building .row .markets {
+	border-color: mediumorchid;
+}
+
+.building .row .nursery {
+	border-color: deepskyblue;
+}
+
+.building .row .luxuryApartments {
+	border-color: palegreen;
+}
+
+.building .row .pens {
+	border-color: goldenrod;
+}
+
+.building .row .penthouse {
+	border-color: teal;
+}
+
+.building .row .pit {
+	border-color: orangered;
+}
+
+.building .row .private {
+	border-color: red;
+}
+
+.building .row .shops {
+	border-color: thistle;
+}
+
+.building .row .sweatshops {
+	border-color: gray;
+}
+
+.building .row .transport-hub {
+	border-color: magenta;
+}
+
+.building .row .weaponsManufacturing {
+	border-color: springgreen;
+}
+
+#arcology-building-container {
+	margin-bottom: 2em;
+}

css/art/art.css

+/* small trick to hide broken images */
+img {
+	text-indent: -10000px;
+}
+
+.imageColumn { /* TODO: this is mostly a copy of imageRef to get its flex features working properly. They can probably be removed from imageRef at some point */
+	display: flex;
+	flex-direction: column;
+	flex-wrap: wrap;
+	align-items: flex-start;
+	position: relative;
+	float: right;
+}
+
+.imageRef {
+	align-items: flex-start;
+	background-color: rgba(80, 80, 80, 0.5);
+	display: flex;
+	flex-direction: column;
+	flex-wrap: wrap;
+	position: relative;
+}
+
+.tinyImg {
+	border: 1px solid #333333;
+	float: left;
+	height: 8em;
+	width: 8em;
+}
+
+.smlImg {
+	height: 10em;
+	width: 10em;
+	float: left;
+}
+
+.smlImg > img, .smlImg > video {
+	height: auto;
+}
+
+.medImg {
+	height: 16em;
+	width: 16em;
+	float: right;
+	margin: 1em;
+}
+
+.medImg > img, .medImg > video {
+	height: auto;
+}
+
+.lrgRender {
+	border: 2px solid #333333;
+	float: right;
+	margin-left: 1em;
+	margin-top: 1em;
+	width: 33%;
+}
+
+.lrgVector {
+	border: 2px solid #333333;
+	float: right;
+	height: 40em;
+	margin-left: 1em;
+	margin-top: 1em;
+	width: 33%;
+}
+
+.lrgVector.custom {
+	height: auto;
+}
+
+.lrgRender > svg {
+	height: 40em;
+	position: relative;
+}
+
+object {
+	object-fit: scale-down;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+img.paperdoll {
+	position: absolute;
+	top: 0;
+	left: 0;
+	margin-left: 0;
+}
+
+img.assistant {
+	float: right;
+	border: 3px hidden;
+	object-fit: contain;
+}

css/art/genAI.css

+.ai-art-image {
+    transition: filter 0.5s ease-in-out;
+    position: relative;
+    float:right;
+    border:3px hidden;
+    object-fit:contain;
+    height:100%;
+    width:100%;
+    cursor: zoom-in;
+}
+.ai-art-image:not([src]) {
+    aspect-ratio:2/3;
+}
+
+.ai-art-container.refreshing {
+    overflow:hidden;
+}
+.ai-art-container.refreshing .ai-art-image {
+    filter: blur(5px);
+}
+
+.ai-art-progress {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: max(5%, 20px);
+    border-radius: 0;
+    border: none;
+    background: linear-gradient(to right, white 50%, rgba(0, 0, 0, 0.5) 50%);
+    background-size: 200%;
+    --progress: 0%;
+    background-position-x: calc(100% - var(--progress));
+    transition: background-position-x 1s linear, opacity 300ms ease-in-out;
+}
+.ai-art-progress::-webkit-progress-value {
+    background: none;
+}
+.ai-art-progress::-moz-progress-bar {
+    background: none;
+}
+.ai-art-progress[value="0"],
+.ai-art-progress[value="1"] {
+    opacity: 0;
+}
+.ai-art-progress[value="1"] {
+    transition: background-position-x 200ms linear, opacity 300ms 200ms ease-in-out;
+}
+.ai-art-progress[value="0"] {
+    transition: opacity 300ms ease-in-out;
+}
+
+.ai-spinner {
+    display: none;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 30px;
+    animation: spin 2s linear infinite;
+}
+
+.rightArrow {
+    right: 0;
+}
+
+.leftArrow {
+    left: 0;
+}
+
+.arrow {
+    display: none;
+    position: absolute;
+    bottom: 0;
+    cursor: pointer;
+    border: none;
+}
+
+.ai-art-container {
+    width: 100%;
+    height: 100%;
+    float: right;
+    border: 3px hidden;
+    object-fit: contain;
+}
+
+.ai-art-container.refreshing .ai-spinner {
+    display: block;
+}
+
+.ai-toolbar {
+    display: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+.ai-art-container:hover .ai-toolbar {
+    display: flex;
+    flex-direction: column;
+}
+
+.ai-art-container:hover .arrow {
+    display: block;
+}
+
+.ai-toolbar button {
+    /* position: absolute; */
+    min-width: 2rem;
+    min-height: 2rem;
+    cursor: pointer;
+    border: none;
+}
+
+.ai-art-container button {
+    background: rgba(0, 0, 0, 0.5);
+}
+
+.zoom-in::after {
+    font-family: "sc-icons";
+	content: " \f00e"; /* Zoom in icon */
+}
+
+.refresh-icon::after {
+    font-family: "sc-icons";
+	content: " \f2ea"; /* Refresh icon */
+}
+
+.lightbox {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0 0 0 / 0.2);
+}
+
+.lightbox-background {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.lightbox img {
+    max-width: 80%;
+    max-height: 80%;
+}
+
+.lightbox .close {
+    top: 4rem;
+    right: 4rem;
+    font-size: 2rem;
+    background: none;
+    position: absolute;
+    border: none;
+}
+
+@keyframes spin {
+    0% {
+        transform: translate(-50%, -50%) rotate(0deg);
+    }
+
+    100% {
+        transform: translate(-50%, -50%) rotate(360deg);
+    }
+}
+
+.ai-queue-overlay {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    background-color: #1a1a1a;
+    border-left: #333 2px solid;
+    border-top: #333 2px solid;
+    border-top-left-radius: 1em;
+    padding: 0.5em;
+
+}
+
+.ai-queue-overlay.hidden {
+    display: none;
+}
+
+.ai-queue-overlay .spinner {
+    display: inline-block;
+    width: 2.3em;
+}
+
+.ai-queue-overlay .spinner::after {
+    font-family: 'sc-icons';
+    content: "\f110";
+    position: absolute;
+    top: 50%;
+    left: 0.9em;
+    font-size: 25px;
+    animation: spin 3s linear infinite;
+}
+
+.ai-queue-overlay button {
+    font-family: 'sc-icons';
+    background-color: var(--button-color);
+    border: solid 2px var(--button-border-color);
+}
+
+.ai-queue-overlay button:hover {
+    background-color: var(--button-hover-color);
+}

css/corporation/corporation.css

+.founding {
+	font-size: 0.8em;
+	margin-top: -0.8em;
+	margin-left: 0.5em;
+	font-style: italic;
+}
+
+table.corporate {
+	border: 3px darkgreen double;
+	border-collapse: collapse;
+	min-width: 33%;
+}
+
+table.corporate tbody tr:nth-child(even) {
+	background-color: rgb(0, 30, 0);
+}
+
+table.corporate tbody tr:nth-child(odd) {
+	background-color: rgb(15, 40, 15);
+}
+
+table.corporate td {
+	vertical-align: top;
+}
+
+table.corporate tbody th, table.corporate thead th {
+	background-color: black;
+	font-weight: bold;
+}
+
+.minor-note {
+	font-size: 0.75em;
+	font-style: italic;
+}
+
+.majorText {
+	margin-top: 0.5em;
+	margin-bottom: 1.5em;
+}

css/css.md

+# CSS module
+
+This directory contains ALL style files for this project.
+
+## Structure
+
+Most of the structure should be self-explanatory, this is a list of the main rules when adding new styles
+
+* `general/`: Only Styles that can be used in many different places and are not part of a specific system may be added
+  here.
+
+* When adding styles that are only used in one place put them in a directory that matches the top directory of the
+  corresponding JS file in `src/` or `js/`.
+
+* There is no catch-all file, if there is no place where your style goes create one instead of mixing them together with
+  unrelated styles. This does mean there are many small files, but properly sorted and named this is preferable to one
+  large catch-all file.
+
+## Compiling
+
+During compiling all CSS files in this directory get combined and then added as a module, which means the styles are put
+directly into the `<head>` element of the final HTML file.

css/debugging/profileEvents.css

+.profile-events {
+	display: grid;
+	grid-template-columns: max-content max-content max-content auto;
+	grid-column-gap: 1em;
+}

css/endWeek/FCTV.css

+.fctv-remote {
+	text-align: center;
+	justify-items: center;
+	display: grid;
+	float: left;
+	width: min-content;
+	padding: 0.5em;
+	border: 3px white solid;
+	margin: 0 1em;
+}
+
+.fctv-remote-numbers {
+	display: grid;
+	grid-gap: 0.5em;
+	grid-template-columns: repeat(3, min-content);
+	justify-items: center;
+}
+
+.fctv-remote-button {
+	margin-top: 0.5em;
+}
+
+.fctv-remote-selected {
+	font-weight: bold;
+}

css/endWeek/endWeekAnim.css

+#init-screen > div.endweek-titleblock {
+	display: block;
+	margin-top: 5%;
+}
+
+div.endweek-maintitle {
+	display: block;
+	margin-bottom: 0.5em;
+}
+
+div.endweek-subtitle {
+	display: block;
+	font-size: smaller;
+	font-weight: lighter;
+}

css/endWeek/slavesReport.css

+div.slave-report {
+	margin-top: 1em;
+	margin-bottom: 1em;
+	float: inline-start;
+}

css/events/events.css

+div.event-section {
+	margin-top: 1em;
+	margin-bottom: 1em;
+}

css/facilities/dressingRoom.css

+.dressing-room-block {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.dressing-room-cell {
+    overflow: hidden;
+	display: inline-block;
+	width: 20em;
+	border: 1px solid var(--button-border-color);
+    margin: 1rem;
+    border-radius: 16px;
+}
+
+.dressing-room-title {
+    margin: 0.4rem 1.4rem;
+	display: grid;
+	align-items: left;
+}
+
+.dressing-room-label {
+	margin: .1rem;
+}
+
+
+.dressing-room-cell:hover { background: var(--button-hover-color) }

css/facilities/nursery.css

+.child-section {
+	margin-top: 1em;
+	margin-bottom: 1em;
+}

css/facilities/statistics.css

+table.facility-stats {
+  width: fit-content;
+  border: 2px solid white;
+  table-layout: auto;
+}
+
+.facility-stats td,
+.facility-stats th {
+  padding: 0 10px;
+}
+
+.facility-stats td:last-child,
+.facility-stats th:last-child {
+  border-left: 1px solid white;
+}
+
+.facility-stats td:nth-last-child(2),
+.facility-stats th:nth-last-child(2) {
+  border-left: 1px dashed white;
+}
+
+.facility-stats th:not(:first-child) {
+  text-align: right;
+}
+
+.facility-stats tr:first-child th {
+  padding-top: 10px;
+}
+
+.facility-stats tr:last-child td {
+  padding-bottom: 10px;
+}
+
+.facility-stats tbody tr:first-child th {
+  border-top: 1px solid white;
+  padding-top: 5px;
+}
+
+.facility-stats tbody tr:not(:first-child) th {
+  border-bottom: 1px dashed white;
+}
+
+.facility-stats tbody tr:not(:first-child) th:nth-last-child(4),
+.facility-stats tbody td:nth-last-child(4) {
+  border-left: 1px dashed white;
+}
+
+.facility-stats thead tr:last-child td {
+  padding-bottom: 5px;
+}
+
+.facility-stats tbody tr:last-child td {
+  padding-bottom: 5px;
+}
+
+.facility-stats tbody tr:nth-child(2n) td {
+  background: var(--background-light);
+}
+
+.facility-stats tbody tr:not(:first-child) {
+  font-size: 14px;
+}
+
+.facility-stats tfoot tr:first-child td {
+  border-top: 1px solid white;
+  padding-top: 5px;
+}
+
+.facility-stats tfoot tr:last-child {
+  font-weight: bold;
+}
+
+.facility-stats .value {
+  text-align: right;
+  font-family: monospace;
+}
+
+.facility-stats tfoot tr:last-child .value {
+  border-top: 3px double white;
+}
+
+.facility-stats .decimalZero {
+  opacity: 0.3;
+}

css/facilities/studio.css

+/* these colors have to be accessed directly for graph colors */
+:root {
+  --genre-color-paraphilia: yellow;
+  --genre-color-fetish: lightcoral;
+  --genre-color-generic: gray;
+  --genre-color-quirk: lawngreen;
+  --genre-color-general: white;
+}
+
+/* and they have to be accessed through classes for text */
+.genre.paraphilia {
+  color: var(--genre-color-paraphilia);
+}
+
+.genre.fetish {
+  color: var(--genre-color-fetish);
+}
+
+.genre.generic {
+  color: var(--genre-color-generic);
+}
+
+.genre.quirk {
+  color: var(--genre-color-quirk);
+}
+
+.genre.general {
+  color: var(--genre-color-general);
+}
+
+/* genre table styles */
+table.genre-stats {
+  width: fit-content;
+  border: 2px solid white;
+  table-layout: fixed;
+}
+
+.genre-stats td {
+  padding: 0 10px;
+  border: 1px solid white;
+}
+
+.genre-stats thead td {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.genre-stats tr:first-child td {
+  padding-top: 10px;
+}
+
+.genre-stats tr:last-child td {
+  padding-bottom: 10px;
+}
+
+.genre-stats tbody tr td:not(:first-child) {
+  text-align: left;
+}
+
+.genre-stats thead tr td.sort-asc::after {
+  content: "\25b4";
+}
+
+.genre-stats thead tr td.sort-desc::after {
+  content: "\25be";
+}

css/facilities/wardrobe.css

+.wardrobe-shopping-block {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.wardrobe-shopping-cell {
+	display: inline-block;
+	width: 20em;
+	border: 1px solid var(--button-border-color);
+}
+
+.wardrobe-shopping-cell:hover { background: var(--button-hover-color) }
\ No newline at end of file

css/futureSocieties/fsPassage.css

+.fs-recommend {
+	border: 1px solid;
+	padding: 2px;
+	border-radius: 3px;
+	font-size: smaller;
+}
+
+.fs-recommend-great {
+	border-color: green;
+	color: green;
+}
+
+.fs-recommend-good {
+	border-color: greenyellow;
+	color: greenyellow;
+}
+
+.fs-recommend-neutral {
+	border-color: gold;
+	color: gold;
+}
+
+.fs-recommend-bad {
+	border-color: red;
+	color: red;
+}
\ No newline at end of file

css/general/formatting.css

+/* Styles that mainly affect how text looks, but not where it is */
+
+.scene-intro,	/* setting at the beginning of a scene / subscene */
+.detail,		/* adds detail to an option: Do something. <span class="detail">Sentence that explains the effect/conditions */
+.note,			/* additional information not related to a specific option */
+.italics {
+	font-style: italic;
+}
+
+.icons {
+	font-family: 'sc-icons';
+}
+
+.story-label, .regularParties, .underline {
+	text-decoration: underline;
+}
+
+/* Note: Do not do a linebreak after span in HTML, because it will underline the automatic space it inserts: "Matilda_is a cow" */
+.slave-name {
+	color: pink;
+	font-weight: bold;
+	text-decoration: underline;
+	text-decoration-color: white;
+}
+
+.name {
+	font-weight: bold;
+}
+
+.custom-label {
+	color: yellow;
+	font-weight: bold;
+}
+
+/* strong & bold are deprecated, use custom classes instead */
+/* :not(.defiant) : quick fix to make defiant styles look correct */
+.major-link, .bold:not(.defiant), .strong {
+	font-weight: bold;
+}
+
+.monospace {
+	font-family: monospace;
+}
+
+.strikethrough {
+	text-decoration: line-through
+}
+
+.clear-formatting {
+	color: white;
+	font-weight: normal;
+	font-style: normal;
+}
+
+.clear-formatting a {
+	color: var(--link-color) !important;
+}
+
+.major-warning {
+	font-weight: bold;
+	color: red;
+}
+
+input:invalid {
+	border-color: #900;
+	background-color: rgba(255, 0, 0, 0.25);
+}
+
+input:focus:invalid {
+	outline: none;
+}
+
+input:out-of-range {
+	background-color: rgba(255, 0, 0, 0.25);
+	border: 2px solid #900;
+}
+
+.uppercase {
+	text-transform: uppercase;
+}
+
+
+dt {
+	font-weight: bold;
+}
+
+dd {
+	margin-bottom: 1em;
+}
+
+dt::after {
+	content: ":";
+}

css/general/layout.css

+/* Styles that mainly affect where text is, but not how it looks */
+
+h1, h2, h3, h4 {
+	margin-bottom: 0;
+	margin-top: 0.25em;
+}
+
+h1 + p, h2 + p, h3 + p, h4 + p {
+	margin-top: 0;
+}
+
+.center {
+	margin-left: auto;
+	margin-right: auto;
+	text-align: center;
+}
+
+div.flex-container {
+	display: flex;
+}
+
+/* makes the first line indented */
+div.indent, p.indent {
+	text-indent: 2em;
+}
+
+div.double-indent, p.double-indent {
+	text-indent: 4em;
+}
+
+/* makes every line indented */
+.choices, .choices {
+	margin-left: 2em;
+}
+
+.double-choices, .double-choices {
+	margin-left: 4em;
+}
+
+div.grid-2columns-auto {
+	display: grid;
+	grid-template-columns: auto auto;
+	grid-column-gap: 1em;
+}
+
+@media only screen and (min-width: 768px) {
+	div.grid-2columns-auto {
+		grid-template-columns: max-content auto;
+	}
+}
+
+div.grid-3columns-auto {
+	display: grid;
+	grid-template-columns: auto auto auto;
+	grid-column-gap: 1em;
+}
+
+@media only screen and (min-width: 768px) {
+	div.grid-3columns-auto {
+		grid-template-columns: max-content max-content auto;
+	}
+}
+
+div.grid-all-columns {
+	grid-column: 1 / -1;
+}
+
+.border-bottom {
+	border-bottom: 1px solid;
+}
+
+.margin-top {
+	margin-top: 1em;
+}
+
+.margin-bottom {
+	margin-bottom: 1em;
+}
+
+.margin-left {
+	margin-left: 2em;
+}
+
+.margin-right {
+	margin-right: 2em;
+}
+
+.margin-x {
+	margin-left: 2em;
+	margin-right: 2em;
+}
+
+.margin-y {
+	margin-top: 1em;
+	margin-bottom: 1em;
+}
+
+.margin-full {
+	margin: 1em;
+}
+
+.padding-left {
+	padding-left: 2em;
+}
+
+.padding-right {
+	padding-right: 2em;
+}
+
+.padding-x {
+	padding-left: 2em;
+	padding-right: 2em;
+}
+
+.padding-y {
+	padding-top: 1em;
+	padding-bottom: 1em;
+}
+
+.padding-full {
+	padding: 1em;
+}
+
+.padded-columns {
+	border-collapse: separate;
+	border-spacing: 1em 0;
+}
+
+.padded-columns td,
+.padded-columns th {
+	padding: 0 1em;
+}
+
+.padded-rows {
+	border-collapse: separate;
+	border-spacing: 0 1em;
+}
+
+.padded-rows td {
+	padding: 1em 0;
+}
+
+.space-evenly {
+	justify-content: space-evenly;
+}
+
+.absolute {
+	position: absolute;
+}
+
+/* puts a div in the right upper corner while not influencing the layout of the rest of the page */
+div.cheat-menu {
+	font-style: italic;
+	position: absolute;
+	right: 50px;
+	top: 40px;
+}
+
+input[type="text"].number {
+	min-width: 6em;
+	max-width: 6em;
+}