@media screen {
  /*Plain*/
  #plain {
    /* Default (small) screens */
    /*Medium screens*/ }
    #plain body {
      background-color: #fdfdfd;
      color: #222;
      text-align: center;
      font-size: 1.2em;
      font-family: sans-serif;
      box-sizing: border-box; }
    #plain main, #plain figure {
      margin-left: 0em;
      padding-left: 0em; }
    #plain h1 {
      margin: 0em; }
    #plain figure {
      padding: 1em 0em 1em 0em;
      margin: 0;
      text-align: center;
      border: none; }
    #plain .cominavbox, #plain .cominavbox li {
      display: inline-block;
      padding: 0em; }
    #plain p + p, #plain li + li {
      margin-top: 0.5em; }
    #plain #skippy {
      display: none;
      text-align: left; }
    #plain #topnav li {
      display: inline-block; }
    #plain nav.toc ol {
      text-align: left;
      padding-left: 1em;
      margin-left: 1em; }
      #plain nav.toc ol li {
        display: list-item;
        list-style-type: decimal;
        padding-left: 0em;
        padding-top: 0em;
        padding-bottom: 0em; }
    #plain nav.toc ol ol, #plain nav.toc li {
      border: none; }
    #plain #commentary, #plain #transcript {
      text-align: left; }
    #plain .statline {
      font-weight: bold; }
    #plain a:link {
      color: #214184;
      text-decoration: underline; }
    #plain a:visited {
      color: #5c3566; }
    #plain a:hover {
      text-decoration: underline; }
    #plain a:hover, #plain a:focus, #plain a:active {
      color: #cc0000; }
    #plain a:focus, #plain a:active {
      outline-width: medium;
      outline-style: solid; }
    #plain footer p {
      margin-left: 0em;
      text-align: left; }
    #plain main > section {
      text-align: left; }
    #plain img, #plain embed, #plain object, #plain video {
      max-width: 100%;
      height: auto; }
    #plain .action {
      font-weight: bold; }
    #plain .charname {
      font-weight: bold; }
    #plain .char {
      text-align: left; }
    #plain .chartraits dt:after {
      content: ":"; }
    #plain .chartraits dd:after {
      content: "\A";
      white-space: pre; }
    #plain .chartraits dd {
      margin-left: 0em; }
    #plain .chartraits dt, #plain .chartraits dd {
      display: inline;
      white-space: pre-wrap; }
    #plain ul.tagslist, #plain .chapterarch {
      list-style-type: none;
      padding-left: 0em; }
    #plain ol.tagslist {
      text-align: left;
      list-style: decimal inside none; }
    #plain .page section {
      text-align: left; } }
  @media screen and (prefers-color-scheme: dark) {
    #plain body {
      background-color: #000;
      color: #fdfdfd; }
    #plain a:link {
      color: #9999ff; }
    #plain a:visited {
      color: #b97cff; }
    #plain a:active, #plain a:hover {
      color: #ff6666; } }
  @media screen and (min-width: 1024px) {
    #plain body {
      font-size: 1.5em; }
    #plain #transcript, #plain #commentary, #plain .archive, #plain .main, #plain ol.tagslist, #plain #toc, #plain .char, #plain .allchars {
      padding-left: 1em;
      padding-right: 1em;
      width: 80%;
      margin-top: 1em;
      margin-left: 1em;
      margin-right: 1em; }
    #plain .cominavbox, #plain .cominavbox li {
      margin-left: 1em;
      margin-right: 1em;
      margin-top: 0.5em; }
    #plain h1 {
      font-size: 1.5em; }
    #plain h2 {
      font-size: 1.2em; }
    #plain h3 {
      font-size: 1em; }
    #plain #topnav li {
      padding-top: 1em;
      padding-left: 1em;
      padding-right: 1em;
      padding-bottom: 0.8em;
      margin: 0em; }
    #plain .statline {
      font-size: 0.8em;
      text-align: right; }
    #plain footer p {
      font-size: 0.7em; }
    #plain .main {
      padding: 0.5em;
      margin: auto;
      width: 50%;
      text-align: left; }
      #plain .main p {
        margin-left: 0em; }
    #plain .char {
      text-align: left; }
      #plain .char img {
        margin: 1em;
        border: solid thin #222; }
      #plain .char .chartraits {
        overflow-wrap: break-word; } }
@media screen {
    #plain .webtoon img {
      display: block; }
    #plain #chapbook figure {
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0; } }
  @media screen and (min-width: 1366px) {
    #plain #chapbook:not(.webtoon) {
      display: grid;
      grid-gap: 1em;
      grid-template-columns: repeat(2, 1fr); }
    #plain #chapbook:not(.webtoon) .cominavbox {
      grid-column: span 2 / auto; }
    #plain #chapbook:not(.webtoon) .page {
      margin: 1em 0em;
      width: auto;
      max-width: 45vw; }
    #plain #chapbook:not(.webtoon) .comic {
      padding: 0;
      margin: 0; }
    #plain #chapbook.rtl {
      direction: rtl; }
      #plain #chapbook.rtl ul, #plain #chapbook.rtl section {
        direction: initial; }
    #plain #chapbook .page.double {
      max-width: initial;
      grid-column-end: span 2;
      width: auto; } }