:root {
 --crtfilter: none;
}

img {
 max-width: 100%;
}
body {
 font-size: 125%;
 background-color: #336698;
 background-image: url("/img/starfield.svg");
 font-family: sans-serif;
 max-width: 100%;
}

/* scanline filter, stolen from bbs.kawa-kun.com */
body:after {
 content: "";
 position: fixed;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 2px);
 pointer-events: none;
 background-attachment: fixed;
 background-size: cover;
 z-index: 99999998;
 display: var(--crtfilter);
}

pre {
 max-width: 100%;
 overflow: scroll;
}

.iconbox {
 display: grid;
 grid-gap: 0.25em;
 grid-auto-flow: column;
 grid-auto-columns: minmax(0, 1fr);
}
.icon-wrapper {
 display: inline-block;
 color: white !important;
 text-align: center;
}
.displaywindow > .iconbox > .icon-wrapper, .content > .iconbox > .icon-wrapper {
 color: black !important;
}
.showindexlabel, .showdisplaylabel { 
 cursor: pointer;
}
.indexicon, .displayicon {
 cursor: pointer;
 text-decoration-line: underline;
 text-decoration-style: dotted;
}
.indexicon:hover, .displayicon:hover {
 text-decoration-style: solid;
}

.rowlink {
 width: 100%;
 display: inline-block;
}

.main {
 display: flex;
}
.main > div:nth-of-type(even) {
 flex-shrink: 0;
 flex-basis: 70%;
}
.wclosebutton {
 width: 0.666em;
 height: 0.666em;
 border: 1px solid #b38f00;
 display: inline-block;
 background-image: linear-gradient(to bottom right, #fffcf5, #ffcb00);
 margin-left: 0.25em;
 margin-right: 0.25em;
}

.content {
 padding: 1em;
 flex-shrink: 0;
 flex-basis: 70%;
 background: white;
 border: 1px solid #9d9d9d;
}
.tocwrapper {
 background: white;
 border: 1px solid #9d9d9d;
 padding-top: 0.25em;
}
.toc {
}

.twrapper {
 border-left: 1px solid #9d9d9d;
 display: inline-block;
}
.title {
 border-top: 1px solid #9d9d9d;
 border-right: 1px solid #9d9d9d;
 background: linear-gradient(#ffefb4, #ffcb00);
 padding: 2px;
 display: inline-block;
 border-bottom: 0px;
 line-height: 1.5em;
 font-size: 1em;
 text-decoration: none;
 color: black;
 padding-right: 0.5em
}

@media only screen and (max-width: 600px) {
 .main {
  flex-direction: column;
 }
 .main > div:not(:first-child) {
  margin-top: 0.5em;
 }
 .desktoponly {
  display: none !important;
 }
 .showindex:not(:checked) ~ .indexwindow {
  display: none;
 }
 .showindex:checked ~ div > .indexicon {
  display: none;
 }
}

.showindex, .showdisplay {
 display: none;
}
/*
.showindex:checked ~ .toc {
 display: block;
}
*/

.showdisplay:not(:checked) ~ .displaywindow {
 display: none;
}
.showdisplay:checked ~ div > .displayicon {
 display: none;
}

.toc > a:nth-of-type(even) {
 background: #ddd;
}
.toc > a {
 display: block;
 max-width: 100%;
 padding-top: 0.25em;
 padding-bottom: 0.25em;
}
.findex {
 width: 100%;
}
.findex > tbody > tr:nth-of-type(even) {
 background: #ddd;
}

a:link {
 color: blue;
 text-decoration: none;
}
a:visited {
 color: blue;
 text-decoration: none;
}
a:hover {
 color: red;
 text-decoration: underline;
}
a:active {
 color: red;
 text-decoration: underline;
}

.title-image {
 max-width: 90%;
 object-fit: contain;
}

@media only screen and (min-width: 601px) {
 .mobileonly {
  display: none !important;
 }
 .main > div:nth-of-type(even) {
  max-width: 70%;
 }
}