@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;}
.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.20260131'}
.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;}

body {background-color: black; background-image: url('/Images/Website BG 00.png'); background-attachment: fixed; background-position: top center; text-align: justify; color: white; margin: 0; padding: 0; font-size: 1.1em; font-family: 'FuturaBody';}
.list {padding-left: 1em; text-indent: -1em; color: #B8F0FB; margin: 0 0 0 0;}
.blue {color: #B8F0FB; margin-top: 0;}

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: #999999;}
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;}

.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 .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.15em; color: #B8F0FB; list-style-type: none;}
ol li {text-indent: -0.65em; counter-increment: item;}
ol li:before {font-family: 'FuturaBody'; display: inline-block; width: 0.80em; 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: 30pt; float: left; line-height: 95%; margin-bottom: -5px; margin-right: 2px; padding-top: 0.02em;}
h0, h1, h2, h3, h4 {font-weight: bold;}
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-family: 'MyNeuro'; font-size: 60pt; margin: 2.0em 0 -0.8em 0;}
h1 {font-family: 'MyNeuro'; font-size: 2.3em; margin: 1.2em 0 -0.25em 0;}
h2 {font-family: 'MyNeuro'; font-size: 1.5em; margin: 0.5em 0 -0.4em 0;}
h3 {font-family: 'MyNeuro'; font-size: 1.2em; margin: 0.5em 0 -0.3em 0; border-bottom: 2px solid #27D1F4; width: 100%;}
h4 {font-family: 'MyNeuro'; font-size: 1.1em; margin: 0.5em 0 -0.35em 0;}
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%;}