/* Trap edition look: black page, light text, sidebars pinned to the viewport. */
@charset "UTF-8";
.landlord, .general, .leo, .mom, .bully, .fatso, .principal, .talking, .ned, .father, .julia, .succubus, .virus, .dev {
  display: block;
  position: relative;
  background: transparent;
  border-radius: .4em;
  padding: 10px;
  margin: 18px 0;
}

.mom {
  color: #f06292;
}

.general {
  color: #ffffff;
}

.succubus {
  color: #834bc7;
}

.virus {
  color: #ef9a9a;
}

.leo {
  color: PURPLE;
}

.bully {
  color: GREEN;
}

.fatso {
  color: BROWN;
}

.principal {
  color: #5959ff;
}

.warning {
  color: #ef5350;
}

.ned {
  color: #e65100;
}

.father {
  color: #ff3f3f;
}

.julia {
  color: ORANGE;
}

.landlord {
  color: TEAL;
}

.dev {
  color: #00ffc3;
}

.Warning {
  color: #ef5350;
}

html, body {
  background: #000;
  color: #bfbfbf;
}

body {
  font: 18px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#story {
  margin: 0;
}

#passages {
  max-width: none;
  margin: 0;
}

.passage {
  display: block;
  transform: none;
  transition: none;
}

.main-text {
  box-sizing: border-box;
  margin: 2.5em auto 2em;
  max-width: 54em;
  padding: 0 1.5em 1.5em;
}

.passage:has(.sidebar-left) .main-text {
  margin: 0 265px 2em 210px;
  max-width: none;
  padding: 64px 30px 24px;
}

.top-bar, .text {
  margin: 0;
}

.text {
  padding: 0 5%;
}

.version {
  font-size: 12px;
}

a {
  color: #bfbfbf;
  text-decoration: none;
  border-bottom: 2px solid #bbb;
  padding: 5px;
  display: inline-block;
}

a:hover {
  text-decoration: none;
  color: #cc8929;
  border-color: #cc8929;
}

a:active {
  text-decoration: none;
  color: #ffb040;
  border-color: #ffb040;
}

.code {
  color: #ffffff;
  padding: 3px 6px;
  background-color: #e91e63;
  border-radius: 5px;
}

tw-storydata {
  display: none;
}

#textbox-name {
  color: #eee;
  background: #1a1a1a;
}

.s-and-r-buttons {
  text-decoration: underline solid #bfbfbf;
  cursor: pointer;
}

.nobr {
  white-space: normal;
}

.IndentedBox {
  margin: .5rem 0 1rem 0;
  border: 1px solid #3a3a3a;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  padding-left: 0;
  list-style-type: none;
}

.IndentedBox p {
  line-height: 1.5rem;
  padding: 10px 20px;
  margin: 0;
  border-bottom: 1px solid #3a3a3a;
  background: #6161616e;
}

.main-text video,
.main-text img {
  max-width: 100%;
  height: auto;
}

/* Sidebars stay a fixed width and stick to the screen edges, so zoom
   does not squeeze the text column around the portraits. */
#sidebars {
  box-sizing: border-box;
}

.sidebar-left,
.sidebar-right {
  position: fixed;
  top: 0;
  z-index: 20;
  max-height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
  margin: 0;
  background: #000;
}

.sidebar-left {
  left: 0;
  width: 200px;
  padding: 0 8px 16px;
}

.sidebar-right {
  right: 0;
  width: 245px;
  padding: 8px;
}

.sidebar-right img,
.side-portrait {
  display: block;
  width: 225px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 6px;
}

.sidebar-left p {
  margin: 0;
  line-height: 1.5rem;
  padding: 10px 12px;
  border-bottom: 1px solid #3a3a3a;
  background: #6161616e;
  color: #bfbfbf;
}

.back-n-forward {
  display: flex;
  justify-content: space-around;
  cursor: pointer;
}

.arousal-bar {
  display: inline-block;
  background: #ef5350;
  transition: width 0.5s;
  border-radius: 5px;
  height: 20px;
  max-width: calc(100% - 24px);
  margin-left: 20px;
  vertical-align: middle;
}

.arousal-bar::before {
  content: "❤";
  color: #ef5350;
  margin-left: -20px;
}

.top-bar {
  position: fixed;
  top: 0;
  left: 200px;
  right: 245px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 16px;
  background: #000;
}

.passage:not(:has(.sidebar-left)) .top-bar {
  position: static;
  left: auto;
  right: auto;
}

.sexuality-track {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.sexuality-spacer {
  flex: 0 0 0;
  min-width: 0;
  height: 1px;
}

.sexuality-male, .sexuality-female {
  font-weight: 900;
}

.sexuality-heart {
  color: #ef5350;
  padding: 0 10px;
}

.sexuality-male {
  color: #5959ff;
}

.sexuality-female {
  color: #ad1457;
}

#ui-bar {
  display: none;
}

.toastify {
  padding: 12px 20px;
  color: #ffffff;
  display: inline-block;
  box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3);
  background: linear-gradient(135deg, #73a5ff, #5477f5);
  position: fixed;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  max-width: calc(50% - 20px);
  z-index: 2147483647;
}

.toastify.on {
  opacity: 1;
}

.toastify-right {
  right: 15px;
}

.toastify-left {
  left: 15px;
}

.toastify-bottom {
  bottom: -150px;
}

.toastify div {
  line-height: 1.35;
}

@media only screen and (max-width: 360px) {
  .toastify-right, .toastify-left {
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    max-width: fit-content;
  }
}

@media (max-width: 1100px) {
  .sidebar-left,
  .sidebar-right,
  .top-bar {
    position: static;
    width: auto;
    left: auto;
    right: auto;
    max-height: none;
  }

  .passage:has(.sidebar-left) .main-text {
    margin: 0 auto 2em;
    padding: 12px 16px 24px;
  }
}