@font-face {font-family: MyNeuro; src: url(Fonts/NeoNeuro.otf);}
@font-face {font-family: FuturaBody; src: url(Fonts/futura_light_bt.ttf);}
@font-face {font-family: Dings; src: url(Fonts/WINGDING.TTF);}

:root {--bar-width: 2.5rem; --bar-height: 0.4rem; --hamburger-gap: 0.4rem; --hamburger-margin: 10px; --animation-timing: 200ms ease-in-out; --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);}
.hamburger-menu {--x-width: calc(var(--hamburger-height) * 1.41421356237); display: flex; flex-direction: column; gap: var(--hamburger-gap); width: max-content; position: absolute; top: var(--hamburger-margin); z-index: 200; cursor: pointer;}
.hamburger-menu:has(input:hover)::before, .hamburger-menu:has(input:hover)::after, .hamburger-menu input:hover {box-shadow: 0 0 0.1em #F8EF00, 0 0 0.2em #F8EF00, 0 0 0.4em #F8EF00, 0 0 0.8em #F8EF00, 0 0 1.6em #F8EF00;}
.hamburger-menu:has(input:focus-visible)::before, .hamburger-menu:has(input:focus-visible)::after, .hamburger-menu input:focus-visible {box-shadow: 0 0 0.1em #0032A0, 0 0 0.2em #0032A0, 0 0 0.4em #0032A0, 0 0 0.8em #0032A0, 0 0 1.6em #0032A0;}
.hamburger-menu::before, .hamburger-menu::after, .hamburger-menu input {content: ""; width: var(--bar-width); height: var(--bar-height); background-color: #fff; border-radius: 9999px; transform-origin: left center; transition: opacity var(--animation-timing), width var(--animation-timing), rotate var(--animation-timing), translate var(--animation-timing); box-shadow: 0 0 0.1em #D00070, 0 0 0.2em #D00070, 0 0 0.4em #D00070, 0 0 0.8em #D00070, 0 0 1.6em #D00070;}
.hamburger-menu input {appearance: none; padding: 0; margin: 0; outline: none; pointer-events: none;}
.hamburger-menu:has(input:checked)::before{rotate: 45deg; width: var(--x-width); translate: 0 calc(var(--bar-height) / -2);}
.hamburger-menu:has(input:checked)::after{rotate: -45deg; width: var(--x-width); translate: 0 calc(var(--bar-height) / 2);}
.hamburger-menu input:checked {opacity: 0; width: 0;}
.table-of-contents {transition: translate var(--animation-timing); translate: 0 -300%; background-image: url('Images/NN - TOC BG.png'); width: 26rem; position: absolute; margin-top: calc(var(--hamburger-height) + 0.5rem); margin-left: calc(var(--hamburger-height) + 0.5rem); z-index: 100; border: solid 1px #fff; box-shadow: 0 0 0.1em #D00070, 0 0 0.2em #D00070, 0 0 0.4em #D00070, 0 0 0.8em #D00070; vertical-align: top; font-size: 0.9em; border-radius: 0.8em; corner-shape: scoop;}
.interior {box-shadow: inset 0 0 0.1em #D00070, inset 0 0 0.2em #D00070, inset 0 0 0.4em #D00070, inset 0 0 0.8em #D00070; height: 100%; width: calc(100%-8px); border-radius: 0.8em; corner-shape: scoop; padding: 0px 2px 16px 2px;}
.table-of-contents h3 {margin: 0.2em 0 0.2em 0.5em; font-size: 1em; border-bottom: none; border-top: 1px solid #27D1F4; width: 100%; padding-top: 0.2em;}
.table-of-contents h4 {margin: 0.2em 0 0.2em 0.5em; font-size: 1em;}
.hamburger-menu:has(input:checked) + .table-of-contents {translate: 0;}

Neuro {font-family: 'MyNeuro'; font-size: 1.0em;}
.blueDots {font-family: 'Dings'; color: #FFF; text-shadow: 0 0 0.1em #0136AC, 0 0 0.2em #0136AC, 0 0 0.4em #0136AC, 0 0 0.8em #0136AC, 0 0 1.6em #0136AC;}
.blueSpots {font-family: 'Dings'; color: #0136AC;}
.redDots {font-family: 'Dings'; color: #FFF; text-shadow: 0 0 0.1em #D00070, 0 0 0.2em #D00070, 0 0 0.4em #D00070, 0 0 0.8em #D00070, 0 0 1.6em #D00070;}
.redSpots {font-family: 'Dings'; color: #D00070;}
.standout {display: inline-block; float: right;}
.copyright {padding-top: 2.5em; padding-bottom: 2.5em;}
.copyright:before {display: block; text-align: center; padding-bottom: 0.5em; font-size: 11pt; color: white; text-shadow: 0.0em 0.0em 0.1em #0032A0, 0.0em 0.0em 0.2em #0032A0, 0.0em 0.0em 0.4em #0032A0, 0.0em 0.0em 0.8em #0032A0, 0.0em 0.0em 1.6em #0032A0; content: 'Game Version A.20260411'}
.copyright:after {color: #FFFFFF63; content: "NeoNeuro, NeuroSystem, all other related product names, and their respective logos are trademarks of Lynn Zero in the U.S.A. and other countries. All NeoNeuro characters, character names, and the distinctive likenesses thereof are property of Lynn Zero and the writers who created them. This material is protected under the copyright laws of the United States of America. Any reproduction or unauthorized use of the material or artwork contained herein is prohibited without the express written permission of Lynn Zero. Any similarity to actual people, organizations, places, or events included herein is coincidental. © 2022-2026 Lynn Zero";}

.container {display: grid; max-width: 700px; padding: 0 8px 0 8px; justify-self: center; grid-template-rows: repeat(auto-fit, 1fr); grid-template-columns: repeat(auto-fit, minmax(1fr, 1fr)); grid-gap: 12px /*rows*/ 8px /*columns*/;}
.full-span {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-gap: 8px /*rows*/ 12px /*columns*/;}
.half-span {width: 100%;}
.indentBop {margin-left: 1em;}

.page {justify-self: center; margin: 0 0.5em 0 0.5em; display: grid; grid-template-rows: repeat(4, auto-fit); grid-template-columns: repeat(1, minmax(10em, 1fr));}
.element {justify-self: center; display: grid; grid-template-rows: repeat(4, auto-fit); grid-template-columns: repeat(auto-fit, minmax(19em, 1fr)); grid-gap: 0.5em 2em;}

body {background-color: black; background-image: url('/Images/Website BG 01.png'); background-repeat: no-repeat; background-attachment: fixed; background-color: #000; background-position: top center; text-align: justify; color: white; margin: 0; padding: 0; font-size: 13pt; font-family: 'FuturaBody';}
blueTracker {color: #FFF; text-shadow: 0 0 0.1em #0032A0, 0 0 0.2em #0032A0, 0 0 0.4em #0032A0, 0 0 0.8em #0032A0, 0 0 1.6em #0032A0;}
redTracker {color: #FFF; text-shadow: 0 0 0.1em #D00070, 0 0 0.2em #D00070, 0 0 0.4em #D00070, 0 0 0.8em #D00070, 0 0 1.6em #D00070;}
statName {font-size: 1.5em; color: #FFF; text-shadow: 0 0 0.1em #D00070, 0 0 0.2em #D00070, 0 0 0.4em #D00070, 0 0 0.8em #D00070, 0 0 1.6em #D00070;}
statDie {font-size: 1.5em; color: #FFF; text-shadow: 0 0 0.1em #0136AC, 0 0 0.2em #0136AC, 0 0 0.4em #0136AC, 0 0 0.8em #0136AC, 0 0 1.6em #0136AC;}
charName {font-weight: bold; font-family: 'MyNeuro'; text-shadow: 0 0 0.1em #D00070, 0 0 0.2em #D00070, 0 0 0.4em #D00070, 0 0 0.8em #D00070, 0 0 1.6em #D00070, 0 0 3.2em #D00070; font-size: 1.5em; margin: 0.5em 0 -0.4em 0; text-align: center;}
charDeets {color: white; font-size: 13pt; font-family: 'FuturaBody'; text-shadow: none; text-decoration: none;}
.list {padding-left: 1em; text-indent: -1em; color: #B8F0FB; margin: 0 0 0 0;}
.blue {color: #B8F0FB; margin-top: 0;}
.charInfo {margin: 0 0 0 1em;}
.charInfo+h6 {margin-top: 2px;}

em {color: #27D1F4;}
strong {color: #FFFFFF; text-shadow: 0 0 0.1em #D00070, 0 0 0.2em #D00070, 0 0 0.4em #D00070, 0 0 0.8em #D00070; font-style: bold;}
highlight {color: #F8EF00;}
special {color: white; font-family: 'FuturaBody'; font-size: 13pt; opacity: 0.5; text-shadow: none; text-decoration: none;}
upCost {font-family: 'FuturaBody'; color: #F8EF00; font-size: 0.6em; opacity: 0.6;}
item {color: #27D1F4; font-weight: bold;}
itemDetail {color: #999999;}
lynnNote {color: #FFFFFF; text-shadow: 0 0 0.1em #800080, 0 0 0.2em #800080, 0 0 0.4em #800080, 0 0 0.8em #800080; font-weight: bold; text-transform: uppercase;}

a:link {color: inherit; text-decoration: none;}
a:visited {color: inherit; text-decoration: none;}
a:hover {color: #FFFFFF; text-shadow: 0 0 0.1em #F8EF00, 0 0 0.2em #F8EF00, 0 0 0.4em #F8EF00, 0 0 0.8em #F8EF00, 0 0 1.6em #F8EF00;}
a:hover em {color: #FFFFFF; text-shadow: 0 0 0.1em #F8EF00, 0 0 0.2em #F8EF00, 0 0 0.4em #F8EF00, 0 0 0.8em #F8EF00, 0 0 1.6em #F8EF00;}
a:active {color: #FFFFFF; text-shadow: 0 0 0.1em #F8EF00, 0 0 0.2em #F8EF00, 0 0 0.4em #F8EF00, 0 0 0.8em #F8EF00, 0 0 1.6em #F8EF00;}

.tableOfContents {border: none;}
.tableOfContents tr td {vertical-align: top;}
.tableOfContents ul {margin-left: 1em; margin-top: 1em;}
.tableOfContents ul ul {margin-top: 0;}

.trackerBox {border-collapse: collapse; font-family: 'MyNeuro'; width: 100%;}
.trackerBox tr td {margin: 0; padding: 0;}
.trackerBox tr td h5, .trackerBox tr td h6 {margin-top: 0; margin-bottom: 0;}

.tableOption {border-collapse: collapse; font-size: 0.85em; width: 100%;}
.tableOption thead {border: solid 1px #27D1F487;}
.tableOption thead tr {color: #B8F0FB; text-align: left; vertical-align: bottom; font-weight: bold;}
.tableOption th, .tableOption td {padding: 2px 5px; color: #58EEFF; text-align: left;}
.tableOption tbody tr {vertical-align: top;}
.tableOption tbody tr:nth-of-type(odd) {background-color: #16C0E344;}
.tableOption tbody tr:nth-of-type(even) {background-color: #27D1F429;}
.tableOption tbody tr:last-of-type {border-bottom: solid 1px #27D1F487;}
.tableOption .chance {text-align: right; width: 51px;}
.tableOption .center {text-align: center;}
.tableOption .third {width: 100px;}
.tableOption .widerChance {text-align: right; width: 57px;}

.tableFixed {border-collapse: collapse; font-size: 0.85em; width: 100%;}
.tableFixed thead {border: solid 1px #D00070CC;}
.tableFixed thead tr {color: #D00070; text-align: left; vertical-align: bottom; font-weight: bold;}
.tableFixed th, .tableFixed td {padding: 2px 5px; color: #FDE; text-align: left;}
.tableFixed tbody tr {vertical-align: top;}
.tableFixed tbody tr:nth-of-type(odd) {background-color: #73003271;}
.tableFixed tbody tr:nth-of-type(even) {background-color: #57002655;}
.tableFixed tbody tr:last-of-type {border-bottom: solid 1px #D00070CC;}
.tableFixed .chance {text-align: right; min-width: 51px;}
.tableFixed .center {text-align: center;}
.tableFixed .right {text-align: right;}
.tableFixed .margin {padding-right: 0.3em;}
.tableFixed .widerChance {text-align: right; width: 57px;}

.tableCharacter {border-collapse: collapse; font-size: 0.85em; width: 100%; text-align: right; color: #EAB5FF; background-color: #57087733; border-bottom: solid 1px #681988CC;}
.tableCharacter thead {border: solid 1px #681988CC; padding: 1em;}
.tableCharacter thead tr th {background-color: #57087755; color: #FFFFFF; text-shadow: 0 0 0.1em #D00070, 0 0 0.2em #D00070, 0 0 0.4em #D00070, 0 0 0.8em #D00070; padding: 2px 4px 2px 4px;}
.tableCharacter tbody tr td {padding: 2px 4px 2px 4px;}
.tableCharacter .tableBreak {border-top: solid 1px #681988CC;}
.tableCharacter strong {color: #B8F0FB; text-shadow: none;}
.tableCharacter special {color: #B8F0FB;}

ul {margin: 0; padding: 0 0 0 1em; color: #B8F0FB;}
ul li {text-indent: -0.5em; list-style-type: none;}
ul li:before {font-family: 'Dings'; display: inline-block; width: 0.5em; font-size: 0.8em; content: "t"; color: #FFF; text-shadow: 0 0 0.1em #D00070, 0 0 0.2em #D00070, 0 0 0.4em #D00070, 0 0 0.8em #D00070, 0 0 1.6em #D00070;}
ul ul li:before {content: "s"; font-size: 1.0em;}

ol {margin-top: 0; padding: 0 0 0 1.55em; color: #B8F0FB; list-style-type: none;}
ol li {text-indent: -0.8em; counter-increment: item;}
ol li:before {font-family: 'FuturaBody'; display: inline-block; width: 1em; font-size: 0.8em; font-weight: bold; content: counter(item) "."; color: #FFF; text-shadow: 0 0 0.1em #D00070, 0 0 0.2em #D00070, 0 0 0.4em #D00070, 0 0 0.8em #D00070, 0 0 1.6em #D00070;}

.noteFrame {border: solid 2px #FFF; margin-top: 0.25em; box-shadow: 0 0 0.1em #27D1F4, 0 0 0.2em #27D1F4, 0 0 0.4em #27D1F4, 0 0 0.8em #27D1F4; border-radius: 0.8em; corner-shape: scoop;}
.noteInt {background-color: #27D1F432; box-shadow: inset 0 0 0.1em #27D1F4, inset 0 0 0.2em #27D1F4, inset 0 0 0.4em #27D1F4, inset 0 0 0.8em #27D1F4; margin-top: 0; padding: 8px; border-radius: 0.75em; corner-shape: scoop; text-align: justify;}
.noteInt h4 {font-size: 1em; margin: 0 0 -0.9em 0; text-align: center;}
.noteInt p {font-size: 0.9em; margin-bottom: 0.5em;}
.boxFrame {border: solid 2px #FFF; margin-top: 4.25em; margin-bottom: 0; box-shadow: 0 0 0.1em #F8EF00, 0 0 0.2em #F8EF00, 0 0 0.4em #F8EF00, 0 0 0.8em #F8EF00; border-radius: 1em; corner-shape: scoop;}
.boxInt {background-color: #F8EF0032; box-shadow: inset 0 0 0.1em #F8EF00, inset 0 0 0.2em #F8EF00, inset 0 0 0.4em #F8EF00, inset 0 0 0.8em #F8EF00; margin-top: 0; padding: 1em; border-radius: 0.95em; corner-shape: scoop; text-align: center;}
.boxInt h4 {margin: 0 0 0.25em 0;}

first {font-family: 'MyNeuro'; color:#FFFFFF; font-size: 36.3pt; float: left; line-height: 95%; margin-bottom: -5px; margin-right: 2px; padding-top: 0.02em;}
h0, h1, h2, h3, h4, h5, h6 {font-weight: bold; font-family: 'MyNeuro';}
h0, h1, h2 {text-shadow: 0 0 0.1em #D00070, 0 0 0.2em #D00070, 0 0 0.4em #D00070, 0 0 0.8em #D00070, 0 0 1.6em #D00070, 0 0 3.2em #D00070;}
h3, h4 {color: #27D1F4; letter-spacing: 0.02em;}
h0 {font-size: 60pt; margin: 2.0em 0 -0.8em 0;}
h1 {font-size: 2.3em; margin: 1.2em 0 -0.25em 0;}
h2 {font-size: 1.5em; margin: 0.5em 0 -0.4em 0;}
h3 {font-size: 1.2em; margin: 0.5em 0 -0.3em 0; border-bottom: 2px solid #27D1F4; width: 100%;}
h4 {font-size: 1.1em; margin: 0.5em 0 -0.35em 0;}
h5 {font-size: 1.1em; font-weight: normal; margin: 0.5em 0 -0.35em 0; text-shadow: 0 0 0.1em #D00070, 0 0 0.2em #D00070, 0 0 0.4em #D00070, 0 0 0.8em #D00070, 0 0 1.6em #D00070, 0 0 3.2em #D00070;}
h6 {font-size: 1.1em; font-weight: normal; margin: 0.5em 0 0 0.5em; text-shadow: 0 0 0.1em #0136AC, 0 0 0.2em #0136AC, 0 0 0.4em #0136AC, 0 0 0.8em #0136AC, 0 0 1.6em #0136AC, 0 0 3.2em #0136AC;}
h3+p {padding-top: 0.75em;}
quote {font-weight: bold; color: #FFFFFF; text-shadow: 0 0 0.1em #D00070, 0 0 0.2em #D00070, 0 0 0.4em #D00070, 0 0 0.8em #D00070;}
quoteName {font-weight: bold; color: #FFFFFF; text-shadow: 0 0 0.1em #0032A0, 0 0 0.2em #0032A0, 0 0 0.4em #0032A0, 0 0 0.8em #0032A0; margin-top: -0.3em;}

/* Hover tooltip */
.tooltip {position: relative; display: inline-block;}
.tooltip .tooltiptext {visibility: hidden; width: 100%; background-color: #00000094; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; position: absolute; z-index: 1;}
.tooltip:hover .tooltiptext {visibility: visible;}

/* Art Box      /Images/NN Title 06.png        */
.neoNeuroBanner {background-image: url('/Images/NN Title 06.png'); background-size: 100%; background-position: center; background-repeat: no-repeat; height: 325px; width: 100%; margin-top: -3em; margin-bottom: -0.8em;}
.characterBetty {background-image: url('/Images/Characters/NN_Character_Portrait_Betty_00.png'); background-size: 100%; background-position: center; background-repeat: no-repeat; height: 397px; width: 100%;}
.characterBetts {background-image: url('/Images/Characters/NN_Character_Portrait_Betty_01.png'); background-size: 100%; background-position: center; background-repeat: no-repeat; height: 397px; width: 100%;}
.characterBetty:hover, .characterBetts:hover {background-image: url('/Images/Characters/NN_Character_Portrait_Betty_02.png');}
.characterBetty3 {background-image: url('/Images/Characters/NN_Character_Portrait_Betty_03.png'); background-size: 100%; background-position: center; background-repeat: no-repeat; height: 397px; width: 100%;}
.characterOctober1 {background-image: url('Images/Characters/NN_Character_Portrait_October_00.png'); background-size: 100%; background-position: center; background-repeat: no-repeat; height: 397px; width: 100%;}
.characterOctober1:hover {background-image: url('/Images/Characters/NN_Character_Portrait_October_01.png');}
.characterRuby1 {background-image: url('/Images/Characters/NN_Character_Portrait_Ruby_00.png'); background-size: 100%; background-position: center; background-repeat: no-repeat; height: 397px; width: 100%;}
.characterRuby2 {background-image: url('/Images/Characters/NN_Character_Portrait_Ruby_01.png'); background-size: 100%; background-position: center; background-repeat: no-repeat; height: 397px; width: 100%;}
.characterXiuMing1 {background-image: url('/Images/Characters/NN_Character_Portrait_Xiu_Ming_00.png'); background-size: 100%; background-position: center; background-repeat: no-repeat; height: 397px; width: 100%;}
.housingHigh3Bed {background-image: url('Images/Housing/HighStreets_3Bedroom_Transparent.png'); background-size: 100%; background-position: center; background-repeat: no-repeat; height: 481px; width: 100%;}