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

/* main screen styles */

@media screen {
  html {
    overflow-y:scroll;
  }
  body {
    background:#0095b6;
    font:1em Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin:0 auto;
    padding:0.5em;
    color:#e6faff;
    max-width:1280px;
  }
  h1 {
    padding:0;
    margin:0 0.2em 0.2em 0.2em;
    color:#e6faff;
  }
  p {
    font-size:100%;
    text-align:justify;
    margin:0.1em;
  }
  a img {
    border:none;
  }
  #skiplink {
    position:absolute;
    left:-2000px;
  }
  #header {
    border-bottom:2px solid #00d0ff;
  }
  #header p {
    font-size:75%;
    font-style:italic;
    margin:-1em 0 0.5em 0.75em;
  }
  #content,#sidebar {
    background:#e6faff;
    color:#000;
    border:1px solid #006880;
    box-shadow:1px 1px 2px rgba(0,0,0,0.25);
  }
  #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:#d00000;
    margin-left:0.25em;
    vertical-align:middle;
  }
  #content a.regwall::after {
    content:"[REGWALL 😡]";
    display:inline-block;
    font-size:60%;
    color:#0000d0;
    margin-left:0.25em;
    vertical-align:middle;
  }
  #content a.paywall::after {
    content:"[PAYWALL 🤑]";
    display:inline-block;
    font-size:60%;
    color:#00d000;
    margin-left:0.25em;
    vertical-align:middle;
  }
  #content a.nsfw.regwall::after {
    content:"[NSFW REGWALL 😡]";
    display:inline-block;
    font-size:60%;
    color:#b000b0;
    margin-left:0.25em;
    vertical-align:middle;
  }
  #content a.nsfw.paywall::after {
    content:"[NSFW PAYWALL 🤑]";
    display:inline-block;
    font-size:60%;
    color:#f04000;
    margin-left:0.25em;
    vertical-align:middle;
  }
  #content p {
    margin:0.1em 0.25em;
    line-height:1.25;
  }
  #content p:first-child {
    margin-top:0.2em;
  }
  #content h2 {
    color:#000;
    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 ul li.nsfw::marker {
    color:#d04040;
  }
  #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 #006880;
    box-shadow:1px 1px 2px rgba(0,0,0,0.25);
    background:#bff3ff;
  }
  #toc h2 {
    font-size:125%;
    background:#006880;
    color:#e6faff;
    padding:0.05em 0.125em;
  }
  .note, .warning, .example {
    margin:0.2em auto 0.3em auto;
    width:80%;
    border:2px solid;
    box-shadow:1px 1px 2px rgba(0,0,0,0.25);
  }
  .note {
    border-color:#005366;
    background:#bff3ff;
  }
  .warning {
    border-color:#ff9100;
    background:#ffe3bf;
  }
  .example {
    border-color:#006880;
    background:#bff3ff;
    color:#000;
  }
  #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:#005366;
    color:#e6faff;
  }
  #content .warning h2, #content .warning h3 {
    background:#ff9100;
    color:#ffe3bf;
  }
  #content .example h2, #content .example h3 {
    background:#006880;
    color:#e6faff;
  }
  #sidebar {
    margin-left:79%;
    margin-top:0.5em;
  }
  #sidebar h2 {
    margin:0;
    padding:0.1em 0.25em;
    background:#006880;
    color:#e6faff;
  }
  #sidebar ul {
    margin:0.5em;
    padding:0;
    list-style:none;
    background:#0095b6;
    border-bottom:1px solid #222;
    box-shadow:1px 1px 2px rgba(0,0,0,0.25);
  }
  #sidebar ul li {
    margin:0;
    color:#e6faff;
    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.05s ease;
  }
  #sidebar ul li a:link {
    color:#e6faff;
    border-right-color:#bf0000;
    background:#0095b6;
  }
  #sidebar ul li a:visited {
    color:#b8c8cc;
    border-right-color:#800000;
    background:#206e80;
  }
  #sidebar ul li a:hover {
    color:#e6faff;
    border-right-color:#cc0000;
    background:#00a7cc;
  }
  #sidebar ul li a:active {
    color:#e6faff;
    border-right-color:#ff0000;
    background:#00d0ff;
  }
  #footer {
    clear:both;
    padding:0.1em;
    border-top:1px solid #00d0ff;
    margin-top:0.5em;
    color:#e6faff;
  }
  #footer p {
    font-size:80%;
    text-align:center;
  }
  #footer a:link {
    color:#00d0ff;
  }
  #footer a:visited {
    color:#f7e6ff;
  }
  #footer a:hover {
    color:#80e8ff;
  }
  #footer a:active {
    color:#ffeae6;
  }
  /* tables */

  table {
    width:75%;
    margin:1em auto;
    border:2px solid #0095b6;
    box-shadow:1px 1px 2px rgba(0,0,0,0.25);
    background:#bff3ff;
    border-collapse:collapse;
  }  
  th {
    background:#0095b6;
    border:1px solid #000;
    color:#e6faff;
  }
  td {
    border:1px solid #000;
  }
  tr.nsfw td,td.nsfw {
    background:#d04040;
    color:#fff;
  }
  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;
    }
  }
  
  /* picture galleries */

  .pixcontainer {
    display:flex;
    flex-flow:row wrap;
    justify-content:space-evenly;
    align-items:center;
    align-content:space-evenly;
    width:90%;
    margin:1em auto;
    border:1px solid #0095b6;
    box-shadow:1px 1px 2px rgba(0,0,0,0.25);
    background:#bff3ff;
  }
  .pic {
    flex-basis:28%;
    background:#e6faff;
    border:1px solid #0095b6;
    text-align:center;
    margin:1em 0;
    padding:0.5em;
    box-shadow:1px 1px 2px rgba(0,0,0,0.25);
  }
  .pic.nsfw {
    background:#d04040;
    border-color:#000;
    color:#fff;
  }
  .pic h3 {
    font-size:100%;
  }
  .pic a:link img {
    border:0.5em solid;
  }
  .pic img {
    width:80%;
  }
  .pic p {
    text-indent:0;
    text-align:center;
    font-size:80%;
  }
  
}

/* 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:#e6faff;
  }
  #content a:link {
    border-color:#0095b6;
    background:#00a7cc;
  }
  #content a:visited {
    border-color:#7c00b6;
    background:#8b00cc;
    color:#f7e6ff;
  }
  #content a:active {
    border-color:#b62100;
    background:#cc2500;
    color:#ffeae6;
    border-style:inset;
    outline:none;
  }
  #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:transparent;
    border:none;
  }
  #sidebar {
    position:fixed;
    width:100%;
    left:0;
    bottom:0;
    margin:0;
    border-width:2px 0 0 0;
    box-shadow:0 -2px 1px rgb(0,0,0,0.25);
    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:link {
    padding:0.5em 0.33em;
    text-align:center;
    border:3px outset #0095b6;
    font-size:100%;
  }
  #sidebar ul li a:visited {
    border:3px outset #206e80;
  }
  #sidebar ul li a:active {
    border:3px inset #00d0ff;
    outline:none;
  }
}

/* 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;
    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:0.5em 1.25em 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;
  }
  #pixcontainer {
    display:flex;
    flex-flow:row wrap;
    justify-content:space-evenly;
    align-items:center;
    align-content:space-evenly;
    width:90%;
    margin:1em auto;
    border:1pt solid black;
  }
  .pic {
    flex-basis:22.5%;
    border:0.5pt solid black;
    text-align:center;
    margin:1em 0;
  }
  .pic h3 {
    font-size:100%;
  }
  .pic img {
    width:80%;
  }
  .pic p {
    text-indent:0;
    text-align:center;
    font-size:80%;
  }
}