/* System X */
/* (c)2015-2023 by Cizeta8088 */
/* CC BY-SA 4.0 */

/* main screen styles */

@media screen {
  html {
    overflow-y:scroll;
  }
  body {
    background:#000;
    font:1em Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin:0 auto;
    padding:0.5em;
    color:#fff;
    max-width:1280px;
  }
  h1 {
    padding:0;
    margin:0 0.2em 0.2em 0.2em;
    color:#0f0;
  }
  p {
    font-size:100%;
    text-align:justify;
    margin:0.1em;
  }
  a img {
    border:none;
  }
  #skiplink {
    position:absolute;
    left:-2000px;
  }
  #header {
    border-bottom:2px solid #f0f;
  }
  #content,#sidebar {
    background:#fff;
    color:#000;
    border:1px solid #0f0;
    box-shadow:2px 2px 3px #f0f;
  }
  #content {
    float:left;
    width:78.25%;
    margin-top:0.5em;
    margin-bottom:0.5em;
  }
  a:link {
    color:#009;
  }
  a:visited {
    color:#909;
  }
  a:hover {
    color:#900;
  }
  a:active {
    color:#d00;
  }
  #content a.nsfw::after {
    content:"[NSFW]";
    display:inline-block;
    font-size:60%;
    color:#eee;
    background:#d04040;
    margin-left:0.25em;
  }
  #content p {
    margin:0.1em 0.25em;
    line-height:1.25;
  }
  #content p:first-child {
    margin-top:0.2em;
  }
  #content h2 {
    color:#111;
    padding:0.1em 0.25em;
    margin:0;
  }
  #content>h2:first-child {
    margin-top:-3px;
  }
  #content h3 {
    padding:0 0.25em;
    margin:0;
  }
  #content ul {
    margin:0.2em 1em;
    padding:0 0.5em;
    font-size:90%;
  }
  #content li ul {
    margin:0 0.5em;
  }
  .example pre {
    font-size:120%;
    margin:0.75em;
    overflow-x:auto;
  }
  #toc {
    margin:0.75em;
    width:40%;
    border:2px solid #f0f;
    box-shadow:2px 2px 3px #0f0;
    background:#ccc;
  }
  #toc h2 {
    font-size:125%;
    background:#0f0;
    color:#000;
    padding:0.05em 0.125em;
  }
  .note, .warning, .example {
    margin:0.2em auto 0.3em auto;
    width:80%;
    border:2px solid;
    box-shadow:2px 2px 3px #0f0;
  }
  .note {
    border-color:#004080;
    background:#80ffff;
  }
  .warning {
    border-color:#ff8040;
    background:#ffff80;
  }
  .example {
    border-color:#f0f;
    background:#000000;
    color:#0f0;
  }
  #content .note h2, #content .warning h2, #content .example h2, 
  #content .note h3, #content .warning h3, #content .example h3 {
    padding:0.05em;
    margin:0;
  }
  #content .note h2, #content .warning h2, #content .example h2 {
    font-size:112.5%;
  }
  #content .note h2, #content .note h3 {
    background:#004080;
    color:#fff;
  }
  #content .warning h2, #content .warning h3 {
    background:#ff8040;
    color:#000;
  }
  #content .example h2, #content .example h3 {
    background:#f0f;
    color:#000;
  }
  #sidebar {
    margin-left:79%;
    margin-top:0.5em;
  }
  #sidebar h2 {
    margin:0;
    padding:0.1em 0.25em;
    background:#f0f;
    color:#000;
  }
  #sidebar ul {
    margin:0.5em;
    padding:0;
    list-style:none;
    background:#f0f;
    border-bottom:1px solid #222;
    box-shadow:2px 2px 3px #0f0;
  }
  #sidebar ul li {
    margin:0;
    color:#222;
    border-top:1px solid #222;
  }
  #sidebar ul li a {
    display:block;
    padding:0.25em 0.5em 0.25em 0.75em;
    border-right:1em solid #232;
    text-decoration:none;
    transition:all 0.1s ease;
  }
  #sidebar ul li a:link {
    color:#000;
    border-right-color:#171;
    background:#f0f;
  }
  #sidebar ul li a:visited {
    color:#333;
    border-right-color:#151;
    background:#c3c;
  }
  #sidebar ul li a:hover {
    color:#000;
    border-right-color:#1c1;
    background:#f5f;
  }
  #sidebar ul li a:active {
    color:#000;
    border-right-color:#1f1;
    background:#f7f;
  }
  #footer {
    clear:both;
    padding:0.1em;
    border-top:1px solid #f0f;
    margin-top:0.5em;
    color:#eee;
  }
  #footer p {
    font-size:80%;
    text-align:center;
  }
  #footer a:link {
    color:#77f;
  }
  #footer a:visited {
    color:#f7f;
  }
  #footer a:hover {
    color:#c55;
  }
  #footer a:active {
    color:#f55;
  }

  /* tables */

  table {
    width:75%;
    margin:1em auto;
    border:2px solid #f0f;
    box-shadow:2px 2px 3px #0f0;
    background:#fff;
    border-collapse:collapse;
  }  
  th {
    background:#0f0;
    border:1px solid #000;
    color:#000;
  }
  td {
    border:1px solid #000;
  }
  tr.nsfw td,td.nsfw {
    background:#d04040;
    color:#eee;
  }
  tr.good td,td.good {
    background:#9f9;
  }
  tr.neutral td,td.neutral {
    background:#ff9;
  }
  tr.bad td,td.bad {
    background:#f99;
  }
  tr.realbad td, td.realbad {
    background:#e00;
    color:#fff;
  }
 
  /* emphasis up to 11 */
  
  .to11 {
    animation:upto11 0.75s linear alternate infinite;
    text-shadow: 2px 2px 2px #606, -2px -2px 2px #090;
    color:white;
  }
  @keyframes upto11 {
    from {
      text-shadow:none;
      color:#2b2926;
    }
    to {
      text-shadow: -2px 2px 2px #00a3e0, 0px -2px 2px #d6006e, 2px 2px 2px #f5e617;
      color:transparent;
    }
  }
  
}

/* scale fonts down for smaller screens */

@media screen and (min-width:600px) and (max-width:960px) {
  body {
    font-size: 0.8em;
  }
}

/* very small screen styles */

@media screen and (max-width:599px) {
  body {
    font-size:1em;
    padding-bottom:7.5em;
  }
  h1 {
    text-align:center;
  }
  #content {
    float:none;
    width:100%;
    margin:0.5em auto;
  }
  #toc {
    width: 75%;
    margin:1em auto;
  }
  #content a {
    display:inline-block;
    padding:0.3em;
    border:2px outset;
    border-radius:2px;
    text-decoration:none;
    color:#111;
  }
  #content a:link {
    border-color:#69f;
    background:#99e;
  }
  #content a:visited {
    border-color:#c9c;
    background:#e9e;
  }
  #content a:active {
    border-color:#f66;
    background:#e99;
    border-style:inset;
  }
  #content h2 a {
    display: inline;
    padding:0;
    border:none;
    text-decoration:underline;
  }
  #content h2 a:link {
    color:#00e;
    background:transparent;
  }
  #content h2 a:visited {
    color:#551a8b;
    background:transparent;
  }
  #content h2 a:active {
    color:#f66;
    background:#600;
  }
  #sidebar {
    position:fixed;
    width:100%;
    left:0;
    bottom:0;
    margin:0;
    border-width:2px 0 0 0;
    box-shadow:0 -2px 1px #222;
    overflow-x:scroll;
  }
  #sidebar h2 {
   display:none;
  }
  #sidebar ul {
    display:flex;
    background:transparent;
    border:none;
    box-shadow:none;
  }
  #sidebar ul li {
    flex:1;
    margin:0.25em;
    border:1px solid #000;
    border-radius:4px;
  }
  #sidebar ul li a {
    padding:0.5em 0.33em;
    text-align:center;
    border:3px outset #f0f;
    font-size:100%;
  }
  #sidebar ul li a:visited {
    border:3px outset #c3c;
  }
  #sidebar ul li a:active {
    border:3px inset #f7f;
  }
}

/* add padding for larger screens */

@media screen and (min-width:1100px) {
  body {
    padding:4em 5em;
  }
  #content {
    width:70%
  }
  #sidebar {
    margin-left:73%;
  }
  #header {
    margin-bottom:2em;
  }
  #content,#sidebar {
    margin-bottom:2em;
  }
  #content {
    margin-top:0;
  }
  #toc {
    margin:1.25em;
    width:37.5%;
  }
  #toc>ul, #toc>ol {
    font-size:100%;
    margin:1em 2em;
  }
  #content h2 {
    margin:0 0 0.5em 0;
    padding:0.25em;
  }
  #content h3 {
    margin-left:0.25em;
  }
  #content p {
    margin:0.25em 1.25em;
  }
  #content p:first-child {
    margin-top:0.5em;
  }
  #content>ol, #content>ul {
    margin:1em 1.25em;
  }
  #content li {
    margin:0.2em;
  }
  .note,.warning {
    margin:1.25em auto;
  }
  #content .note h3,#content .warning h3 {
    padding:0.2em;
  }
  #sidebar ul {
    margin:1.25em;
  }
  #sidebar h2 {
    padding:0.25em;
  }
}

/* print styles */

@media print {
  body {
    font-family:Palatino,"Palatino Linotype","Book Antiqua",georgia,serif;
  }
  body, #content {
    margin:0;
    padding:0;
  }
  a {
    text-decoration:none;
    color:black;
  }
  h1 {
    border-bottom:2pt solid black;
    text-align:center;
    text-shadow:2pt 2pt #ccc;
  }
  h2 {
    text-align:center;
    margin:0;
    border-bottom:1pt dashed black;
  }
  h3 {
    margin:0;
  }
  .note,.warning {
    margin:1em auto;
    width:75%;
    border: 1pt solid black;
  }
  .note h3,.warning h3 {
    margin:0;
    border-bottom:1pt dashed black;
    text-align:center;
  }
  .note p,.warning p {
    text-indent:0;
  }
  p {
    padding:0;
    margin:0;
    text-indent:1em;
  }
  #content p a {
    word-wrap:break-word;
  }
  #content p a:after {
    content:" ["attr(href)"]";
    font-size:80%;
  }
  #sidebar,#skiplink,#toc {
    display:none;
  }
  #footer {
    border-top:1pt solid black;
    margin-top:1em;
    text-align:center;
  }
  .to11 {
    color:red;
    text-shadow:1pt 1pt black;
  }
  #footer p {
    text-indent:0;
  }
  table {
    border:1pt solid black;
    border-collapse:collapse;
  }
  th,td {
    border:0.5pt solid black;
  }
  #content .example {
    border:1pt solid black;
    margin:24pt auto;
    padding:8pt;
    width:75%;
  }
  #content .example pre {
    white-space:pre-wrap;
  }
}