@font-face {
    font-family: 'Aclonica';
    src: url('/fonts/Aclonica-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Alice';
    src: url('/fonts/Alice-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Amaranth';
    src: url('/fonts/Amaranth-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Audiowide';
    src: url('/fonts/Audiowide-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Berkshire Swash';
    src: url('/fonts/BerkshireSwash-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Emilys Candy';
    src: url('/fonts/EmilysCandy-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Gorditas';
    src: url('/fonts/Gorditas-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Henny Penny';
    src: url('/fonts/HennyPenny-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Kaushan Script';
    src: url('/fonts/KaushanScript-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Lindas Lament';
    src: url('/fonts/LindasLament.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Lovesick';
    src: url('/fonts/Lovesick.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Mystery Quest';
    src: url('/fonts/MysteryQuest-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Orbitron';
    src: url('/fonts/Orbitron-VariableFont_wght.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Press Start 2P';
    src: url('/fonts/PressStart2P-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Righteous';
    src: url('/fonts/Righteous-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Smooch';
    src: url('/fonts/Smooch-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Sonsie One';
    src: url('fonts/SonsieOne-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@keyframes loader {
	  0% { opacity: 0.25; }
	100% { opacity: 1; }
}

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

a {
	color: LightSkyBlue;
    font-weight: bold;
	text-decoration: none;
}

a[target='_blank']::after {
	content: '\2197';
}

a:hover {
	color: MediumOrchid;
}

body {
	background-attachment: fixed;
	background-color: rgb(24, 0, 24);
	background-image:
		linear-gradient(
			135deg,
			transparent 10%,
			rgba(0, 0, 0, 0.1) 10% 40%,
			transparent 40% 60%,
			rgba(0, 0, 0, 0.1) 60% 90%,
			transparent 90%),
		linear-gradient(
			-135deg,
			transparent 10%,
			rgba(0, 0, 0, 0.1) 10% 20%,
			rgba(0, 0, 0, 0.1) 20% 30%,
			transparent 30% 70%,
			rgba(0, 0, 0, 0.1) 70% 80%,
			rgba(0, 0, 0, 0.1) 80% 90%,
			transparent 90%); 	
	background-size: 1.5rem 1.5rem;
	color: FloralWhite;
	font: 11pt sans-serif;
	min-height: 100%;
	padding-bottom: 5rem;
	position: relative;
}

div.center {
	align-items: center;
	display: flex;
	flex-direction: column;
}

html {
	height: 100%;
}

table {
	border-spacing: 0;
}

table.frame {
	max-width: 98vw;
}

table.grid td,
table.grid th {
	padding: 4px 6px;
}

td.center {
	text-align: center;
}

.block {
	width: 48rem;
}

.button {
	background: linear-gradient(SkyBlue, RoyalBlue);
	border: 2px solid CornflowerBlue;
	border-radius: 8px;
	color: FloralWhite;
	cursor: pointer;
	display: inline;
	font-weight: bold;
	padding: 4px 8px;
	text-shadow: 1px 1px 1px DimGray, 2px 2px 2px Black;
	user-select: none;
}

.button.medium {
	margin-top: 2rem;
}

.button ~ .button {
	display: none;
}

.button:hover {
	background: linear-gradient(Orchid, Purple);
	border-color: DarkOrchid;
}

.capital {
	text-transform: capitalize;
}

.checkbutton {
	border-radius: 8px;
	color: FloralWhite;
	cursor: pointer;
	display: inline;
	font-weight: bold;
	padding: 4px 8px;
	text-shadow: 1px 1px 1px DimGray, 2px 2px 2px Black;
	user-select: none;
}

.checkbutton.disabled {
	background: linear-gradient(Silver, DimGray);
	text-decoration: line-through;
}

.checkbutton.enabled {
	background: linear-gradient(rgb(255, 105, 180), rgb(155, 5, 80));
}

.checkbutton:hover {
	background: linear-gradient(Orchid, Purple);
}

.emoji {
	cursor: default;
	font-family: 'Segoe UI Emoji', 'Noto Color Emoji', 'Twitter Color Emoji', 'Apple Color Emoji', 'Twemoji Mozilla';
	font-weight: normal;
	text-shadow: none;
}

.entries .paragraph {
	padding: 4px 8px;
}

.entries .heading.paragraph {
	font-family: 'Aclonica', cursive;
	font-size: 12pt;
	text-align: center;
}

.entries div.bold.fancy {
}

.entries .heading.paragraph:not(:first-child) {
	margin-top: 0.5rem;
}

.entries .thumbnails {
	padding: 1rem;
}

.entries > div > div:first-child {
	align-items: flex-start;
	justify-content: space-between;
	padding: 0 8px 4px 8px;
}

.entries > div > div:first-child > div:first-child {
	font-family: 'Sonsie One', cursive;
}

.entries > div > div:first-child > div:nth-child(2) {
	font-family: 'Amaranth', sans-serif;
	font-size: 12pt;
	padding-top: 4px;
	white-space: nowrap;
}

.entries > div:first-child {
	margin-top: 1rem;
}

.entries > div:not(:first-child) {
	margin-top: 2rem;
}

.entries ~ div.gradient.large {
	font-family: 'Aclonica', sans-serif;
	margin-bottom: -2rem;
	margin-top: 2rem;
}

.expandable {
	max-height: 10rem;
	overflow: hidden;
	position: relative;
}

.fancy {
	color: OldLace;
	text-shadow: 1px 1px 1px Gray, 2px 2px 2px DimGray;
}

.frame {
	background-color: rgb(16, 8, 16);
	border-radius: 4px;
	box-shadow:
		0 0 0 1px rgb(55, 0, 0),
		0 0 0 2px rgb(155, 5, 80),
		0 0 0 3px rgb(255, 105, 180),
		0 0 0 4px rgb(155, 5, 80),
		0 0 0 5px rgb(55, 0, 0);
	display: inline-block;
	padding: 2px 4px;
}

.gallery {
	font-family: 'Mystery Quest', sans-serif;
	font-size: 64pt;
}

.gallery ~ table td:last-child {
	text-align: right;
}

.gallery ~ .fancy {
	font-family: 'Alice', serif;
	margin-bottom: 0.5rem;
}

.gap {
	margin-top: 0.5rem;
}

.gradient {
	background: linear-gradient(Pink, DeepPink);
	background-clip: text;
	color: transparent;
}

.gradient a {
	background: linear-gradient(SkyBlue, CornflowerBlue);
	background-clip: text;
	color: transparent;
    font-weight: normal;
}

.gradient a:hover {
	background: linear-gradient(Orchid, DarkOrchid);
	background-clip: text;
}

.gray {
	filter: grayscale(100%);
}

.grid {
	background-color: rgb(16, 8, 16);
	border-radius: 4px 4px 0 0;
	box-shadow:
		0 0 0 1px rgb(155, 5, 80),
		0 0 0 2px rgb(55, 0, 0);
}

.grid tbody {
	display: block;
}

.grid td,
.grid th {
	border-left: rgb(255, 105, 180) solid 1px;
	border-bottom: rgb(255, 105, 180) solid 1px;
	box-shadow:
		inset 0 0 0 1px rgb(155, 5, 80),
		inset 0 0 0 2px rgb(55, 0, 0);
}

.grid td:last-child,
.grid th:last-child {
	border-right: rgb(255, 105, 180) solid 1px;
}

.grid th {
	border-top: rgb(255, 105, 180) solid 1px;
}

.grid th:first-child {
	border-radius: 4px 0 0 0;
}

.grid th:last-child {
	border-radius: 0 4px 0 0;
}

.grid tr:last-child td {
	border-bottom: rgb(255, 105, 180) solid 1px;
}

.large {
	font-size: 20pt;
}

.larger {
	font-size: 24pt;
}

.largest {
	font-size: 28pt;
}

.line {
	align-items: center;
	display: flex;
	justify-content: space-evenly;
}

.medium {
	font-size: 16pt;
}

.maximized div {
	font-weight: bold;
	cursor: pointer;
	margin: 0.5rem;
}

.maximized div::after {
	content: 'Show Less';
}

.minimized {
	background: linear-gradient(transparent, black);
	bottom: 0;
	height: 5rem;
	left: 0;
	position: absolute;
	right: 0;
}

.minimized div {
	bottom: 0.75rem;
	position: absolute;
}

.minimized div::after {
	content: 'Show More';
}

.numeric {
	font-family: 'Amaranth', sans-serif;
	font-size: 12pt;
	padding: 0 8px;
	text-align: center;
}

.paragraph {
	padding: 0.25rem 0.5rem;
	text-align: justify;
}

.selected {
	cursor: default;
}

.space {
	margin-top: 1rem;
}

.thumbnails {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: center;
}

.thumbnails div div:first-child {
	bottom: 96px;
	display: none;
	font-weight: bold;
	left: -100%;
	position: absolute;
	right: -100%;
	text-align: center;
	white-space: nowrap;
	z-index: 1;
}

.thumbnails div div:last-child {
	bottom: 8px;
	pointer-events: none;
	position: absolute;
	right: 4px;
	text-shadow: Black -1px -1px 2px, Black 1px -1px 2px, Black -1px 1px 2px, Black 1px 1px 2px;
}

.thumbnails div:hover div:first-child {
	display: inline-block;
}

.thumbnails div:hover img {
	box-shadow: 0 0 0 1px DarkOrchid, 0 0 0 2px Orchid, 0 0 0 3px DarkOrchid;
}

.thumbnails img {
	border-radius: 4px;
	box-shadow: 0 0 0 1px CornflowerBlue, 0 0 0 2px SkyBlue, 0 0 0 3px CornflowerBlue;
	cursor: zoom-in;
}

.thumbnails span {
	background-color: black;
	border-radius: 4px;
	box-shadow: 0 0 0 1px DarkOrchid, 0 0 0 2px Orchid, 0 0 0 3px DarkOrchid;
	cursor: default;
	padding: 2px 6px 4px 6px;
}

.thumbnails > div {
	position: relative;
}

.unselected {
	cursor: pointer;
	filter: grayscale(100%);
}

.unselected:hover {
	background: linear-gradient(Orchid, DarkOrchid);
	background-clip: text;
	filter: none;
	text-decoration: underline;
}

.updates > div:first-child {
	font-family: 'Orbitron', sans-serif;
	font-size: 12pt;
	font-weight: bold;
}

.updates + div {
	padding: 0 8px 4px 8px;
}

#advisory > div:nth-child(1) {
	font-size: 48px;
	margin-bottom: 12px;
	margin-top: -64px;
}

#advisory > div:nth-child(2) {
	font-family: 'Alice', serif;
	font-size: 24pt;
}

#copyright {
	align-items: baseline;
	border-radius: 0 4px 0 0;
	bottom: 0;
	font-size: 10pt;
	gap: 0.5rem;
	padding: 0 0.5rem 0.5rem 0.75rem;
	position: absolute;
	left: 0;
}

#copyright a {
	cursor: pointer;
	font-size: 14pt;
}

#fiction .center.frame.space :not(.paragraph) {
	font-weight: bold;
}

#fiction .fancy {
	font-family: 'Berkshire Swash', cursive;
}

#fiction .gap {
	padding-bottom: 0.25rem;
}

#fiction .gap.line > div {
	align-items: flex-start;
}

#fiction .line {
	gap: 0.5rem;
}

#fiction .nightflower {
	font-family: 'Emilys Candy', cursive;
	font-size: 32pt;
    font-weight: boldx;
}

#fiction > div:first-child {
	font-family: 'Gorditas', cursive;
	font-size: 72pt;
	position: relative;
	top: -0.5rem;
}

#gaming td[colspan] {
	border-left: none;
	font-size: 12pt;
	font-weight: bold;
	position: relative;
}

#gaming td[colspan] div:first-child {
	background-color: rgb(55, 0, 0);
	bottom: 0;
	height: 2px;
	left: -2px;
	position: absolute;
	width: 2px;
}

#gaming td[colspan] div:last-child {
	background-color: rgb(155, 5, 80);
	bottom: 0;
	height: 1px;
	left: -1px;
	position: absolute;
	width: 1px;
}

#gaming td:first-child:empty {
	border-right: none;
}

#gaming td:nth-child(5) {
	text-align: right;
}

#gaming th {
	cursor: default;
}

#gaming tr.bottom td:first-child {
	border-top: none;
	box-shadow:
		inset -1px -1px rgb(155, 5, 80),
		inset 1px 0 rgb(155, 5, 80),
		inset -2px -2px rgb(55, 0, 0),
		inset 2px 0 rgb(55, 0, 0);
}

#gaming tr.bottom td:not(:first-child) {
	border-top: rgb(255, 105, 180) solid 1px;
	box-shadow:
		inset 0 0 0 1px rgb(155, 5, 80),
		inset 0 0 0 2px rgb(55, 0, 0);
}

#gaming tr.middle td:first-child {
	border-bottom: none;
	box-shadow:
		inset -1px 0 rgb(155, 5, 80),
		inset 1px 0 rgb(155, 5, 80),
		inset -2px 0 rgb(55, 0, 0),
		inset 2px 0 rgb(55, 0, 0);
}

#gaming tr.middle td:not(:first-child) {
	border-bottom: none;
	border-top: rgb(255, 105, 180) solid 1px;
	box-shadow:
		inset 0 0 0 1px rgb(155, 5, 80),
		inset 0 0 0 2px rgb(55, 0, 0);
}

#gaming tr.top td:first-child {
	border-bottom: none;
	box-shadow:
		inset 0 0 rgb(155, 5, 80),
		inset 1px 1px rgb(155, 5, 80),
		inset 0 0 rgb(55, 0, 0),
		inset 2px 2px rgb(55, 0, 0);
}

#gaming tr.top td:last-child {
	border-bottom: none;
	box-shadow:
		inset -1px -1px rgb(155, 5, 80),
		inset 0 1px rgb(155, 5, 80),
		inset -2px -2px rgb(55, 0, 0),
		inset 0 2px rgb(55, 0, 0);
	padding-bottom: 6px;
}

#gaming tr:first-child th {
	cursor: pointer;
}

#gaming > div:nth-child(1) {
	font-family: 'Press Start 2P', cursive;
	font-size: 64pt;
}

#gaming > div:nth-child(2) {
	align-items: center;
	font-family: 'Righteous', cursive;
	gap: 0.5rem;
}

#gaming > div:nth-child(2) span {
	bottom: 4px;
	position: relative;
}

#gaming > div:nth-child(3) {
	display: grid;
	gap: 1rem;
	grid-template-columns: auto auto;
	grid-template-rows: repeat(auto);
	justify-content: flex-start;
}

#gaming > div:nth-child(3) .frame {
	padding: 2px 6px 4px 4px;
}

#gaming > div:nth-child(3) .gradient {
	font-family: 'Audiowide', cursive;
	line-height: 18pt;
}

#gaming > div:nth-child(3) .line {
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: flex-start;
	white-space: nowrap;
}

#gaming > div:nth-child(4) {
	display: none;
}

#gaming > div:nth-child(4) .button {
	border: none;
}

#gaming > div:nth-child(4) .fancy {
	font-family: 'Righteous', cursive;
}

#gaming > div:nth-child(4) .line {
	gap: 0.5rem;
	flex-wrap: wrap;
	justify-content: flex-start;
}

#gaming > div:nth-child(4) > div:first-child {
	max-width: 48rem;
}

#gaming > div:nth-child(5) {
	display: none;
}

#gaming > div:nth-child(5) .paragraph div.fancy {
	font-family: 'Righteous', cursive;
	font-size: 14pt;
}

#jenny {
	background: url("images/jenny.png") center no-repeat;
	height: 260px;
	margin: 0 auto;
	position: relative;
	width: 800px;
}

#jenny > div:nth-child(1) {
	font-family: 'Lindas Lament', cursive;
	font-size: 44px;
	left: 8px;
	position: absolute;
	top: 36px;
}

#jenny > div:nth-child(2) {
	gap: 8px;
	justify-content: center;
	left: 392px;
	position: absolute;
	top: 40px;
	width: 400px;
}

#jenny > div:nth-child(2) a {
	font-family: 'Henny Penny', cursive;
	font-size: 28px;
}

#jenny > div:nth-child(2) span {
	color: White;
	bottom: 4px;
	font-size: 12px;
	position: relative;
}

#jenny + div {
	font-family: 'Aclonica', sans-serif;
	font-size: 32px;
	position: relative;
	top: -32px;
}

#jenny + div + noscript + div {
	margin-top: -20px;
}

#journal table {
	border-spacing: 1rem;
}

#journal .button {
	border: none;
}

#journal > div:nth-child(2) .line {
	gap: 0.5rem;
	flex-wrap: wrap;
	justify-content: flex-start;
	max-width: 48rem;
}

#journal > div:first-child {
	font-family: 'Aclonica', sans-serif;
	font-size: 48pt;
}

#loader {
	display: inline-block;
	height: 8rem;
	left: calc(50vw - 4rem);
	position: absolute;
	top: calc(50vh - 4rem);
	width: 8rem;
	z-index: 8;
}

#loader div {
	animation: loader 1.2s linear infinite;
	background: HotPink;
	border-radius: 50%;
	height: 1rem;
	position: absolute;
	width: 1rem;
}

#loader div:nth-child(1) {
	animation-delay: 0s;
	left: 3.6rem;
	top: 0.8rem;
}

#loader div:nth-child(2) {
	animation-delay: 0.1s;
	left: 5.1rem;
	top: 1.1rem;
}

#loader div:nth-child(3) {
	animation-delay: 0.2s;
	left: 6.2rem;
	top: 2.2rem;
}

#loader div:nth-child(4) {
	animation-delay: 0.3s;
	left: 6.6rem;
	top: 3.6rem;
}

#loader div:nth-child(5) {
	animation-delay: 0.4s;
	left: 6.2rem;
	top: 5.1rem;
}

#loader div:nth-child(6) {
	animation-delay: 0.5s;
	left: 5.1rem;
	top: 6.2rem;
}

#loader div:nth-child(7) {
	animation-delay: 0.6s;
	left: 3.6rem;
	top: 6.6rem;
}

#loader div:nth-child(8) {
	animation-delay: 0.7s;
	left: 2.2rem;
	top: 6.2rem;
}

#loader div:nth-child(9) {
	animation-delay: 0.8s;
	left: 1.1rem;
	top: 5.1rem;
}

#loader div:nth-child(10) {
	animation-delay: 0.9s;
	left: 0.8rem;
	top: 3.6rem;
}

#loader div:nth-child(11) {
	animation-delay: 1.0s;
	left: 1.1rem;
	top: 2.2rem;
}

#loader div:nth-child(12) {
	animation-delay: 1.1s;
	left: 2.2rem;
	top: 1.1rem;
}

#menu {
	cursor: default;
	font-size: 14pt;
	padding-bottom: 5px;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 3;
}

#menu .gradient {
	font-family: 'Lindas Lament', cursive;
	font-size: 18pt;
}

#menu > div:first-child {
	border-radius: 0 0 0 4px;
	gap: 1rem;
	padding: 0.1rem 1rem 0.1rem 1rem;
	transition: border-radius 0.25s 0.5s linear;
}

#menu > div:first-child > div:last-child {
	transition: color 0.25s 0.5s linear;
}

#menu > div:last-child {
	gap: 1rem;
	padding: 0 1rem;
	position: absolute;
	left: calc(100% + 10px);
	top: calc(100% + 0px);
	transition: transform 0.25s 0.5s ease-out;
}

#menu > div:last-child > div.line {
	align-items: baseline;
	gap: 0.25rem;
	padding: 0.1rem 0 0.25rem 0;
	position: relative;
}

#menu > div:last-child > div.line > div:last-child {
	display: none;
	font-size: 12pt;
	padding: 0.25rem 0.5rem;
	position: absolute;
	text-align: center;
	top: 100%;
	white-space: nowrap;
}

#menu > div:last-child > div.line:hover > div:last-child {
	display: block;
}

#menu:hover > div:first-child {
	border-radius: 0;
	transition: border-radius 0.25s linear;
}

#menu:hover > div:first-child > div:last-child {
	color: HotPink;
	transition: color 0.25s linear;
}

#menu:hover > div:last-child {
	transform: translate(calc(-100% - 5px), 0);
	transition: transform 0.25s ease-in;
}

#navigation .frame {
	padding: 0.2rem 0.4rem;
}

#navigation .line {
	gap: 1rem;
}

#navigation > div {
	position: relative;
}

#navigation > div > div:first-child {
	left: calc(100% + 1rem);
}

#navigation > div > div:first-child > div:first-child,
#navigation > div > div:last-child > div:last-child {
	color: HotPink;
}

#navigation > div > div:first-child,
#navigation > div > div:last-child {
	position: absolute;
	white-space: nowrap;
}

#navigation > div > div:last-child {
	border-radius: 4px 0 0 4px;
	padding-right: 1rem;
	right: 100%;
}

#nightflower {
	background: url("images/nightflower.png") center no-repeat;
	height: 400px;
	margin: 0 auto;
	position: relative;
	width: 800px;
}

#nightflower > a {
	background: linear-gradient(SkyBlue, RoyalBlue);
	border: 2px solid CornflowerBlue;
	border-radius: 8px;
	color: FloralWhite;
	font-family: 'Kaushan Script', cursive;
	font-size: 32px;
	height: 52px;
	left: 552px;
	line-height: 44px;
	padding-left: 5px;
	position: absolute;
	text-shadow: 1px 1px 1px DimGray, 2px 2px 2px Black;
	top: 232px;
	width: 96px;
}

#nightflower > a:hover {
	background: linear-gradient(Orchid, Purple);
	border-color: DarkOrchid;
}

#nightflower > div {
	font-family: 'Lovesick', cursive;
	font-size: 96px;
	left: 20px;
	position: absolute;
	top: 40px;
}

#story .nightflower {
	font-family: 'Emilys Candy', cursive;
	font-size: 56pt;
    font-weight: normal;
}

#story .block {
	width: 40rem;
}

#story .fancy.large {
	font-family: 'Smooch', cursive;
}

#story .fancy.larger.space {
	font-family: 'Berkshire Swash', sans-serif;
}

#up {
	display: none;
	height: calc(100% - 100vh);
	position: absolute;
	right: 2rem;
	top: calc(100vh);
}

#up > div {
	gap: 0;
	height: 3rem;
	position: sticky;
	top: calc(100vh - 5rem);
	width: 3rem;
}

#up > div > div:first-child {
	transform: translateY(-1rem);
}

#up > div > div:last-child {
	font-size: 10pt;
	margin-top: -1rem;
}

#viewer {
	background-color: rgba(8, 0, 8, 0.9);
	bottom: 0;
	display: none;
	left: 0;
	overflow: hidden;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 4;
}

#viewer .frame {
	padding: 0;
}

#viewer > div:last-child {
	position: relative;
}

#viewer > div:last-child img {
	opacity: 0;
	position: relative;
	transition: height 0.25s ease, opacity 0.5s ease, width 0.25s ease;
	z-index: 5;
}

#viewer > div:last-child > div:first-child {
	background-color: rgb(16, 8, 16);
	border-radius: 8px;
	font-family: 'Righteous';
	padding: 4px 8px;
	position: absolute;
	top: calc(-16pt + -20px);
	white-space: nowrap;
}

#viewer > div:last-child > div:last-child {
	cursor: default;
	font-weight: bold;
	position: fixed;
	transition: top 0.25s ease;
	width: 48rem;
}

#viewer > div:last-child > div:last-child:hover {
	z-index: 6;
}

#viewer > div:last-child > div:last-child > div:last-child {
	background-color: rgb(16, 0, 16);
	border-radius: 8px;
	bottom: -4px;
	padding: 8px;
	position: absolute;
}

#viewer > div:last-child > div:nth-child(2) div {
	bottom: 4px;
	font-size: 16pt;
	font-weight: bold;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	z-index: 6;
}

#viewer > div:last-child > div:nth-child(2):hover div {
	opacity: 0.5;
}

#viewer > div:nth-child(2) {
	cursor: pointer;
	top: 4px;
	font-size: 24px;
	opacity: 0.5;
	position: absolute;
	left: 4px;
}

#viewer > div:nth-child(3) {
	height: 40px;
	right: 0;
	top: 0;
	width: 40px;
}

#viewer > div:nth-child(4) {
	left: 0;
	transform: translateY(-50%);
}

#viewer > div:nth-child(5) {
	right: 0;
	transform: translateY(-50%);
}

#viewer > div:nth-child(3),
#viewer > div:nth-child(4),
#viewer > div:nth-child(5) {
	color: HotPink;
	cursor: pointer;
	font-size: 40px;
	opacity: 0.5;
	position: absolute;
	text-align: center;
}

#viewer > div:nth-child(4),
#viewer > div:nth-child(5) {
	top: 50%;
	width: 60px;
}

#viewer > div:nth-child(6) {
	align-items: center;
	bottom: 0;
	cursor: default;
	font-size: 12pt;
	font-weight: bold;
	gap: 1rem;
	left: 0;
	position: absolute;
}

#viewer > div:nth-child(6) > div:first-child {
	color: HotPink;
	font-size: 32pt;
	opacity: 0.5;
}

#viewer > div:nth-child(6) > div:not(:first-child) {
	opacity: 0;
	padding-top: 0.5rem;
	transition: opacity 0.25s ease;
}

#viewer > div:nth-child(6) div.emoji {
	font-size: 10pt;
}

#viewer > div:nth-child(2):hover,
#viewer > div:nth-child(3):hover,
#viewer > div:nth-child(4):hover,
#viewer > div:nth-child(5):hover,
#viewer > div:nth-child(6) div:first-child:hover,
#viewer > div:nth-child(6) div:first-child:hover ~ div {
	opacity: 1;
}

#viewer > div:nth-child(7) {
	bottom: 0;
	color: HotPink;
	cursor: default;
	font-family: 'Alice', serif;
	font-weight: bold;
	opacity: 0.5;
	padding: 0.5rem;
	position: absolute;
	right: 0;
}

#viewer > div:nth-child(8) {
	background-color: black;
	background-position: center;
	background-repeat: no-repeat;
	bottom: 0;
	cursor: zoom-out;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	transition: opacity 0.5s ease;
	visibility: hidden;
	z-index: 7;
}

#year .block {
	margin-top: 2rem;
	padding: 0.25rem 0.5rem;
}

#year .block .line {
	align-items: center;
	justify-content: space-between;
}

#year .block .line.medium > div:nth-child(2) {
	font-family: 'Mystery Quest', sans-serif;
	margin-top: 0.2rem;
}

#year .block .line.medium + div {
	font-weight: bold;
}

#year .block .line.medium + div > div {
	padding-top: 0.2rem;
}

#year .block > div:not(.thumbnails) .fancy {
	font-family: 'Righteous', cursive;
}

#year .block > div:nth-child(4):not(.thumbnails) {
	padding: 0.25rem 0;
}

#year .dislike span {
	color: Red;
}

#year .like span {
	color: LimeGreen;
}

#year div.paragraph {
	padding: 0.25rem 0.1rem;
}

#year div.thumbnails:not(:empty) {
	padding: 0.5rem 0;
}

#year div[title] {
	color: Gray;
	cursor: default;
	font-size: 14pt;
	line-height: 14pt;
}

#year div[title] span {
	color: HotPink;
}

#year > div:first-child > div:first-child {
	font-family: 'Press Start 2P', cursive;
	font-size: 9pt;
}

#year > div:first-child > div:first-child > div:first-child {
	margin-top: -1rem;
}

#year > div:first-child > div:last-child {
	font-family: 'Press Start 2P', cursive;
	font-size: 64pt;
}

#year > div:nth-child(2) {
	font-size: 12pt;
	padding: 0.25rem;
	width: 24rem;
}