/* Generated by less 3.11.1 */
@font-face {
font-family: "font-a";
src: url(/css/font/chrono-vec.woff2);
}
@font-face {
font-family: "font-b";
src: url(/css/font/coding-font-tobi.woff2);
}
/*
// chrono.ttf
@body-font-name: @font-a;
@body-font-size: 16pt; // 12pt 16pt
@body-font-weight: normal;
@title-font-name: @font-a;
@title-font-size: 16pt; // 16pt 24pt
@title-font-weight: normal;
@website-section-size: 36pt; // 24pt 36pt
@website-logo-size: 36pt; // 24pt 36pt
*/
/* Website.less */
.touch-size-test {
width: 0.4in;
height: 0.4in;
background-color: blue;
}
body.SFW .NSFW {
display: none;
}
body::before {
grid-area: position;
content: "";
width: 15vw;
width: calc((100vw - 75rem) / 2);
min-width: 0.6pc;
height: 100%;
}
body::before {
width: calc((100vw - 75rem) / 2);
}
@media screen and (prefers-reduced-motion: no-preference) {
body::before {
animation: slideRight 200ms;
}
}
body.left::before {
width: 0;
}
@media screen and (prefers-reduced-motion: no-preference) {
body.left::before {
animation: slideLeft 200ms;
}
}
@keyframes slideRight {
0% {
width: 0;
}
100% {
width: calc((100vw - 75rem) / 2);
}
}
@keyframes slideLeft {
0% {
width: calc((100vw - 75rem) / 2);
}
100% {
width: 0;
}
}
body {
margin: 0;
display: grid;
grid-template-rows: auto minmax(auto, 30px) 30px auto;
grid-template-columns: min-content min-content 0.3in;
grid-template-areas: "position disclaimer ." "position header ." "position . ." "position page .";
will-change: opacity;
}
body main {
grid-area: page;
width: 75rem;
max-width: 99vw;
max-width: calc(100vw - 0.3in - 0.6pc);
padding-bottom: 0.6pc;
}
body #disclaimer {
grid-area: disclaimer;
width: 75rem;
max-width: 98vw;
max-width: calc(100vw - 0.3in - 0.6pc);
}
body #dismissDisclaimer {
grid-area: disclaimer;
}
body #header {
grid-area: header;
width: 75rem;
max-width: 98vw;
max-width: calc(100vw - 0.3in - 0.6pc);
z-index: 1;
margin-top: 0.6pc;
}
body #sidebar {
display: none;
}
@media screen and (prefers-reduced-motion: no-preference) {
@keyframes revealNavSide {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}
@keyframes hideNavSide {
0% {
transform: translateX(0);
opacity: 1;
}
99% {
transform: translateX(-99%);
opacity: 1;
}
100% {
transform: translateX(-100%);
opacity: 0;
}
}
@keyframes animThenHide {
0% {
opacity: 1;
}
99% {
opacity: 0;
}
100% {
opacity: 0;
}
}
}
/*
General styles
-----------
```
Heading 1
Some text
Some Link
Some text
Heading 2
Some text
Heading 3
Some text
Heading 4
Some text
Some text
Some text
- Item 1
- Item 2
- Item 3
Some text
Collapser Header
```
*/
/*
.window-bg
-----------
```
Heading Text
```
*/
/*
.outer-frame
-----------
```
Heading Text
Heading Text
```
*/
/*
.inner-frame
-----------
```
Heading Text
.
Heading Text
```
*/
.multi-frame {
border: solid #330f00 6px;
border-image: url(/css/window/multi-frame.png) 6 stretch;
}
.outer-frame {
border: solid #330f00 1px;
border-image: url(/css/window/outer-frame.png) 1 stretch;
}
.inner-frame {
border: solid #330f00 4px;
border-image: url(/css/window/inner-frame.png) 4 stretch;
background-size: auto 70%, auto 70%, auto;
background-position: left -3px, left 160%, top left;
margin: 1px 1px;
margin-bottom: 0;
}
.inset-frame {
border-top: solid #2e1408 1px;
border-bottom: solid #ba5c2a 1px;
border-left: solid #2e1408 1px;
border-right: solid #ba5c2a 1px;
}
.button-frame {
border: solid #330f00 4px;
border-image: url(/css/button/frame.png) 4 stretch;
}
.inner-shadow {
box-shadow: inset 0 3pt 3pt rgba(0, 0, 0, 0.7);
}
.window-bg-trans {
background-image: linear-gradient(#fff5, #0000), linear-gradient(#0000, #000b);
background-repeat: repeat-x, repeat-x;
background-size: length, length;
background-blend-mode: overlay, overlay;
background-position: top left, top left;
}
.window-bg {
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
}
.darken-bg {
background-image: linear-gradient(#0008, #0008);
}
/*
.dark-emerald-bg{
background-color: @area-bg-color;
border: solid @area-frame-color 1pt;
padding: @padding;
background-size: auto;
background-color: @site-bg-color;
.window-bg-color( @area-bg-color );
background-size: auto, auto, auto, auto;
}// .dark-emerald-bg
*/
.leaves-bg {
background-image: linear-gradient(#fff6, #0000), linear-gradient(#0000, #0008), url(/css/area-background.png);
background-color: #1e331c;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
}
.area-bg {
background-image: linear-gradient(#fff6, #0000), linear-gradient(#0000, #0008), url(/css/area-background.png);
background-color: #1e331c;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
}
.data-bg {
background-image: linear-gradient(#522914, #522914), linear-gradient(#ffff, #0000), linear-gradient(#fff6, #0004), linear-gradient(#522914, #522914), url(/css/window/grey/background.png);
background-color: #522914;
background-repeat: repeat, repeat-x, repeat-x, repeat, repeat;
background-size: auto, auto, auto, auto, auto;
background-blend-mode: soft-light, overlay, overlay, soft-light, normal;
background-position: top left, top left, top left, top left, top left;
}
.content-bg {
background-image: linear-gradient(#7b3e1e, #7b3e1e), url(/css/window/grey/background.png );
background-color: #522914;
background-blend-mode: overlay, normal;
background-repeat: repeat;
background-size: auto;
}
.image-bg {
background-color: #170902;
}
.image-frame {
border: solid #330f00 4px;
border-image: url(/css/window/inner-frame.png) 4 stretch;
background-size: auto 70%, auto 70%, auto;
background-position: left -3px, left 160%, top left;
margin: 1px 1px;
margin-bottom: 0;
}
.small-button,
button {
border: solid #330f00 4px;
border-image: url(/css/button/frame.png) 4 stretch;
background-color: #ba5c2a;
background-image: linear-gradient(#ba5c2a, #ba5c2a), linear-gradient(#ffff, #0000), linear-gradient(#fff6, #0004), linear-gradient(#ba5c2a, #ba5c2a), url(/css/window/grey/background.png);
background-color: #522914;
background-repeat: repeat, repeat-x, repeat-x, repeat, repeat;
background-size: auto, auto, auto, auto, auto;
background-blend-mode: soft-light, overlay, overlay, soft-light, normal;
background-position: top left, top left, top left, top left, top left;
color: white;
text-decoration: none;
font-family: "font-a", "ChicagoFLF", "Chicago", sans-serif;
font-size: 12pt;
text-shadow: 1px 1px 0 #181818, 0 1px 0 #181818;
position: relative;
top: 1px;
line-height: 1.1em;
box-shadow: 1px 1px rgba(0, 0, 0, 0.7);
}
.small-button a,
button a {
color: white;
text-decoration: none;
}
@media print {
.small-button,
button {
text-shadow: none;
}
}
button:hover {
filter: brightness(150%);
}
.anchor {
position: relative;
left: 0.5em;
margin-left: -1em;
visibility: hidden;
}
.anchor::before {
position: absolute;
margin-left: -0.3in;
display: inline-block;
min-width: 0.4in;
min-height: 0.4in;
z-index: 1;
visibility: visible;
opacity: 0;
content: "";
background-image: url("/css/link.svg");
background-repeat: no-repeat;
background-size: 0.8em;
background-position: center center;
}
h1 > .anchor::before {
top: -0.1em;
}
h2 > .anchor::before {
top: -0.4em;
}
h3 > .anchor::before {
top: -0.4em;
}
p > .anchor::before {
top: -0.5em;
}
nav .anchor {
border: 0;
background: none;
}
p:hover > .anchor::before,
h1:hover > .anchor::before,
h2:hover > .anchor::before,
h3:hover > .anchor::before {
opacity: 1;
}
/*
// remove default header style
border: 0;
background: none;
// Move to the left of the text
position: relative;
right: @anchor-offset;
margin-right: -@anchor-offset;
display: inline-block;
float: left;
min-width: @touch-size;
min-height: @touch-size;
//
text-align: right;
text-decoration: none;
visibility: hidden;
*/
a > img {
vertical-align: top;
}
.tooltip {
color: white;
text-decoration-line: underline;
text-decoration-style: dotted;
font-style: normal;
}
dfn {
color: white;
text-decoration-line: underline;
text-decoration-style: dotted;
font-style: normal;
}
a:has(>dfn) {
text-decoration: none;
}
a > dfn {
color: #ffcf63;
}
.loud,
em {
padding-right: 0.3em;
color: white;
}
strong,
.whisper {
color: #ba5c2a;
font-weight: normal;
}
/*
.siteWidth,
.banner
-----------
```
```
*/
.siteWidth,
.banner {
display: block;
}
.banner::after {
clear: both;
content: "";
display: block;
}
.img-banner,
img.siteWidth,
img.banner {
width: 75rem;
max-width: 100%;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
* {
box-sizing: border-box;
}
p,
h2 {
margin: 0;
}
html {
background-color: #35582b;
background-attachment: fixed;
background-image: url("/css/website-background.jpg");
}
body .codedemo {
background: url("/css/website-background.png");
background-color: #35582b;
}
.kalei html,
.kalei-style-page html,
.kalei a,
.kalei-style-page a,
.kalei p,
.kalei-style-page p,
.kalei pre,
.kalei-style-page pre {
text-shadow: none;
}
body .kalei-style-page .kalei-comments-container .codedemo {
text-shadow: 1px 1px 0 #181818, 0 1px 0 #181818;
}
body .kalei-style-page .kalei-comments-container .codedemo p {
text-shadow: 1px 1px 0 #181818, 0 1px 0 #181818;
}
.extendHeight,
.unfloat {
clear: both;
content: "";
display: block;
}
p:has(>.img-left)::after {
clear: both;
content: "";
display: block;
}
p:has(>.img-right)::after {
clear: both;
content: "";
display: block;
}
html {
color: #bdb6a5;
font-family: "font-a", "ChicagoFLF", "Chicago", sans-serif;
font-size: 12pt;
text-shadow: 1px 1px 0 #181818, 0 1px 0 #181818;
line-height: 1.2em;
}
@media print {
html {
text-shadow: none;
}
}
.hidden {
display: none;
}
p {
padding-left: 0.3pc;
padding-right: 0.3pc;
}
a {
color: #ffcf63;
text-underline-offset: 0em;
}
a:hover {
color: white;
}
a > h1,
a > h2,
a > h3,
a > h4,
a > h5 {
color: #ffcf63;
}
a > h1:hover,
a > h2:hover,
a > h3:hover,
a > h4:hover,
a > h5:hover {
color: white;
}
h1,
h2,
h3,
h4,
h5 {
font-weight: normal;
margin: 0;
padding-left: 0.3pc;
padding-right: 0.3pc;
color: #f5eedd;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
/*
h1{
font-size: @website-logo-size;
line-height: @website-logo-size;
}
*/
h1 {
font-size: 22pt;
line-height: 22pt;
}
h2,
h3,
h4,
h5 {
font-size: 14pt;
}
p + h1,
p + h2,
p + h3,
p + h4,
p + h5 {
margin-top: 0.3em;
}
li > h1,
li > h2,
li > h3,
li > h4,
li > h5 {
display: inline;
}
table > caption {
font-size: 14pt;
}
th {
font-weight: normal;
font-size: 14pt;
}
mark,
::selection {
background-color: white;
color: #653022;
text-shadow: none;
}
input::selection {
background-color: #93411a;
color: white;
}
iframe {
border: none;
}
time {
padding-left: 0.3pc;
padding-right: 0.3pc;
}
ul,
ol {
padding-left: 0.3pc;
padding-right: 0.3pc;
list-style-position: inside;
margin: 0;
line-height: inherit;
}
ul {
list-style-type: "• ";
}
hr {
border-top: solid #2e1408 1px;
border-bottom: solid #ba5c2a 1px;
margin-top: 30px;
}
details > summary {
list-style: none;
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
border: solid #330f00 4px;
border-image: url(/css/button/frame.png) 4 stretch;
display: inline-block;
min-width: 0.4in;
min-height: 0.4in;
vertical-align: top;
text-align: center;
line-height: 0.28in;
padding-right: 0.3pc;
display: block;
user-select: none;
-webkit-user-select: none;
padding-left: 0.3pc;
margin-bottom: -1px;
color: #ffcf63;
}
details > summary h1,
details > summary h2,
details > summary h3,
details > summary h4,
details > summary h5 {
color: #ffcf63;
}
details > summary > h1,
details > summary h2,
details > summary h3,
details > summary h4 {
display: inline;
}
details > summary:hover {
filter: brightness(150%);
color: white;
}
details > summary:hover h1,
details > summary:hover h2,
details > summary:hover h3,
details > summary:hover h4,
details > summary:hover h5 {
color: white;
}
details > summary::before {
display: inline-block;
content: url(/css/collapser/chevron.svg);
}
@media screen and (prefers-reduced-motion: no-preference) {
details > summary::before {
transition: transform 200ms;
}
}
details:not([open]) > summary:hover::before {
position: relative;
top: 2pt;
}
details[open] > summary:hover::before {
position: relative;
top: -2pt;
}
details[open] > summary::before {
transform: scaleY(-1);
}
details[open] > div,
details[open] > section {
margin-left: 1px;
margin-right: 1px;
padding-top: 0.3pc;
}
details:not([open])::after {
height: 0.3pc;
background-color: rgba(0, 0, 0, 0.7);
}
details::after {
display: block;
content: "";
border-bottom: solid #ba5c2a 1px;
margin-bottom: 0.3pc;
}
@media screen and (prefers-reduced-motion: no-preference) {
details[open]::after {
animation: slideDown 200ms ease-out;
}
}
@media screen and (prefers-reduced-motion: no-preference) {
details > div,
details > section {
overflow: hidden;
}
details > div > a > *,
details > section > a > *,
details > div > *,
details > section > * {
transition: transform 200ms;
}
details:not([open]) > div > a > *,
details:not([open]) > section > a > *,
details:not([open]) > div > *,
details:not([open]) > section > * {
transform: translateY(-50vh);
}
details[open] > div > a > *,
details[open] > section > a > *,
details[open] > div > *,
details[open] > section > * {
animation: slideDown 200ms ease-out;
}
@keyframes slideDown {
0% {
transform: translateY(-50vh);
}
100% {
transform: translateY(0);
}
}
}
details > div,
details > section {
box-shadow: inset 0 3pt 3pt rgba(0, 0, 0, 0.7);
background-image: linear-gradient(#fff6, #0000), linear-gradient(#0000, #0008), url(/css/area-background.png);
background-color: #1e331c;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
}
img {
width: 100%;
object-fit: contain;
}
.sharp img,
img.sharp {
image-rendering: optimizeSpeed;
/* Legal fallback */
image-rendering: crisp-edges;
/* CSS4 Proposed */
image-rendering: pixelated;
/* CSS4 Proposed */
image-rendering: -moz-crisp-edges;
/* Firefox */
image-rendering: -o-crisp-edges;
/* Opera */
-ms-interpolation-mode: nearest-neighbor;
/* IE8+ */
}
.img-left {
clear: both;
float: left;
margin-right: 0.3pc;
outline: solid red 1px;
}
.img-right {
clear: both;
float: right;
margin-left: 0.3pc;
outline: solid cyan 1px;
}
video {
width: 100%;
object-fit: contain;
}
pre {
white-space: pre-wrap;
margin: 0;
margin-top: 0.3pc;
color: #bdb6a5;
font-family: "font-a", "ChicagoFLF", "Chicago", sans-serif;
font-size: 12pt;
text-shadow: 1px 1px 0 #181818, 0 1px 0 #181818;
}
code {
display: inline-block;
white-space: pre-wrap;
tab-size: 2;
position: relative;
top: -1.5pt;
max-height: 480px;
overflow-y: auto;
}
code {
border: solid black 15px;
border-image: url(/css/code/tracter.svg) 15 repeat;
border-top: 0;
border-bottom: 0;
line-height: 1em;
background-image: repeating-linear-gradient(0deg, #dffcca 0, #dffcca 1em, #fdfff2 1em, #fdfff2 2em);
background-repeat: repeat-y;
background-attachment: local;
top: 0;
}
pre:has( >code ) {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 10px 0 -5px #fdfff2, 0 10px 1px -4px rgba(0, 0, 0, 0.15), 0 20px 0 -10px #fdfff2, 0 20px 1px -9px rgba(0, 0, 0, 0.15);
margin-bottom: 19.6px;
}
pre + pre {
margin-top: 2rem;
margin-top: calc(10px + 0.3pc * 6);
}
pre > code {
width: 100%;
vertical-align: bottom;
}
code {
text-shadow: none;
color: black;
font-family: "font-b", "CodingFontTobi", monospace;
font-size: 16px;
}
main iframe {
width: 100%;
height: 100vh;
max-height: 480px;
}
.button {
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
border: solid #330f00 4px;
border-image: url(/css/button/frame.png) 4 stretch;
display: inline-block;
min-width: 0.4in;
min-height: 0.4in;
vertical-align: top;
text-align: center;
line-height: 0.28in;
padding-left: 0.3pc;
padding-right: 0.3pc;
}
.button-hover {
filter: brightness(150%);
}
.button:hover {
filter: brightness(150%);
}
.controls {
background-image: linear-gradient(#fff6, #0000), linear-gradient(#0000, #0008), url(/css/area-background.png);
background-color: #1e331c;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
border-top: solid #2e1408 1px;
border-bottom: solid #ba5c2a 1px;
border-left: solid #2e1408 1px;
border-right: solid #ba5c2a 1px;
box-shadow: inset 0 3pt 3pt rgba(0, 0, 0, 0.7);
border-width: 2px;
border-top: none;
margin: 0.3pc;
border-spacing: 0.3pc;
}
.controls caption {
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
border: solid #330f00 1px;
border-image: url(/css/window/outer-frame.png) 1 stretch;
margin-top: 0.3pc;
}
.controls th {
border-left: none;
border-right: none;
border-top: none;
border-color: #ba5c2a;
text-align: left;
}
.controls tr:nth-of-type(2n) {
background-color: rgba(0, 0, 0, 0.5);
}
.controls td {
border: none;
}
@media print {
.controls {
display: none;
}
}
.license section {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-top: 0.3pc;
}
.license section p,
.license section h1,
.license section h2,
.license section h3,
.license section h4,
.license section h5 {
flex-basis: 100%;
}
.license section h4 {
margin-top: 0.6pc;
}
.license section .can,
.license section .cannot,
.license section .must {
min-width: 10em;
flex-grow: 1;
border: solid #330f00 1px;
border-image: url(/css/window/outer-frame.png) 1 stretch;
margin-block-start: 0;
margin-block-end: 0;
margin: 0.3pc;
}
.license section .can dt,
.license section .cannot dt,
.license section .must dt {
background-image: linear-gradient(#fff5, #0000), linear-gradient(#0000, #000b);
background-repeat: repeat-x, repeat-x;
background-size: length, length;
background-blend-mode: overlay, overlay;
background-position: top left, top left;
border: solid #330f00 4px;
border-image: url(/css/window/inner-frame.png) 4 stretch;
background-size: auto 70%, auto 70%, auto;
background-position: left -3px, left 160%, top left;
margin: 1px 1px;
margin-bottom: 0;
font-size: 14pt;
}
.license section .can dd,
.license section .cannot dd,
.license section .must dd {
margin-inline-start: 0.3pc;
}
.license section .can {
background-image: linear-gradient(#4d7147, #4d7147), url(/css/window/grey/background.png );
background-color: #385233;
background-blend-mode: overlay, normal;
background-repeat: repeat;
background-size: auto;
color: #73c15d;
}
.license section .cannot {
background-image: linear-gradient(#8b422f, #8b422f), url(/css/window/grey/background.png );
background-color: #653022;
background-blend-mode: overlay, normal;
background-repeat: repeat;
background-size: auto;
color: #ef8e6b;
}
.license section .must {
background-image: linear-gradient(#3c5168, #3c5168), url(/css/window/grey/background.png );
background-color: #293848;
background-blend-mode: overlay, normal;
background-repeat: repeat;
background-size: auto;
color: #81b0de;
}
body {
--seed: 1;
}
.window-sitter {
content: url(/css/sitter-area.png);
line-height: 0;
position: absolute;
left: -12px;
top: -31px;
background-image: url(/css/sitters.png);
background-position: left 0;
background-position: left calc(var(--sitter, 0) * 60px);
pointer-events: none;
z-index: 1;
max-width: 90vw;
overflow: hidden;
}
@media print {
.window-sitter {
display: none;
}
}
.blog article > h2,
section {
position: relative;
}
body.NSFW .blog article > h2::before,
body.NSFW section::before {
content: url(/css/sitter-area.png);
line-height: 0;
position: absolute;
left: -12px;
top: -31px;
background-image: url(/css/sitters.png);
background-position: left 0;
background-position: left calc(var(--sitter, 0) * 60px);
pointer-events: none;
z-index: 1;
max-width: 90vw;
overflow: hidden;
}
@media print {
body.NSFW .blog article > h2::before,
body.NSFW section::before {
display: none;
}
}
body.NSFW main {
position: relative;
}
body.NSFW main::before {
content: url(/css/sitter-area.png);
line-height: 0;
position: absolute;
left: -12px;
top: -31px;
background-image: url(/css/sitters.png);
background-position: left 0;
background-position: left calc(var(--sitter, 0) * 60px);
pointer-events: none;
z-index: 1;
max-width: 90vw;
overflow: hidden;
--sitter: calc((var(--seed, 1) - 1) * 1);
}
@media print {
body.NSFW main::before {
display: none;
}
}
body.NSFW .layout-project > h2 {
position: relative;
overflow: visible;
}
body.NSFW .layout-project > h2::before {
content: url(/css/sitter-area.png);
line-height: 0;
position: absolute;
left: -12px;
top: -31px;
background-image: url(/css/sitters.png);
background-position: left 0;
background-position: left calc(var(--sitter, 0) * 60px);
pointer-events: none;
z-index: 1;
max-width: 90vw;
overflow: hidden;
--sitter: calc(var(--seed, 1) * 4);
}
@media print {
body.NSFW .layout-project > h2::before {
display: none;
}
}
.blog article > h2:nth-child(2)::before,
section:nth-child(2)::before {
--sitter: calc(var(--seed, 1) * 11);
}
.blog article > h2:nth-child(7n+0)::before,
section:nth-child(7n+0)::before {
--sitter: calc(var(--seed, 1) * 3);
}
.blog article > h2:nth-child(7n+1)::before,
section:nth-child(7n+1)::before {
--sitter: calc(var(--seed, 1) * 1);
}
.blog article > h2:nth-child(7n+3)::before,
section:nth-child(7n+3)::before {
--sitter: calc(var(--seed, 1) * 2);
}
.blog article > h2:nth-child(7n+5)::before,
section:nth-child(7n+5)::before {
--sitter: calc((var(--seed, 1) - 2) * 1);
}
.blog article > h2:nth-child(6n+4)::before,
section:nth-child(7n+4)::before {
--sitter: calc(var(--seed, 1) * 3);
}
.blog article > h2:nth-child(7n+6)::before,
section:nth-child(7n+6)::before {
--sitter: calc(var(--seed, 1) * 4);
}
.blog article > h2:nth-child(7n+7)::before,
section:nth-child(7n+7)::before {
--sitter: calc(var(--seed, 1) * 5);
}
.blog article > h2:nth-child(7n+9)::before,
section:nth-child(7n+9)::before {
--sitter: calc(var(--seed, 1) * 6);
}
.blog article > h2:nth-child(7n+10)::before,
section:nth-child(7n+10)::before {
--sitter: calc(var(--seed, 1) * 7);
}
.blog article > h2:nth-child(7n+12)::before,
section:nth-child(7n+12)::before {
--sitter: calc(var(--seed, 1) * 8);
}
.blog article > h2:nth-child(7n+13)::before,
section:nth-child(7n+13)::before {
--sitter: calc(var(--seed, 1) * 9);
}
.blog article > h2:nth-child(7n+15)::before,
section:nth-child(7n+15)::before {
--sitter: calc(var(--seed, 1) * 5);
}
.blog article > h2:nth-child(7n+17)::before,
section:nth-child(7n+17)::before {
--sitter: calc(var(--seed, 1) * 11);
}
main > section:first-child:before {
display: none;
}
main > .main-attraction:first-child::before {
display: none;
}
details > section::before {
display: none;
}
.download-section::before {
display: none;
}
.content-section::before {
display: none;
}
.date-created::before {
display: none;
}
.author::before {
display: none;
}
/*
.imgSource
-----------
```
#
Inspiration
Created by: Nounanka
```
*/
.imgSource {
margin: 0.6pc 0.3pc;
border: solid #330f00 1px;
border-image: url(/css/window/outer-frame.png) 1 stretch;
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
display: inline-block;
max-width: 46%;
position: relative;
padding-top: 0.3pc;
}
.imgSource > p.text1 {
margin: 0 0.3pc;
padding: 0.3pc;
background-image: linear-gradient(#0008, #0008);
font-size: 10pt;
line-height: 10pt;
}
.imgSource img {
width: none;
max-width: 94%;
max-width: calc(100% - 0.3pc - 0.3pc);
margin: 0.3pc;
margin-bottom: 0;
margin-top: 0;
border: solid #330f00 1px;
border-image: url(/css/window/outer-frame.png) 1 stretch;
}
.imgSource img:hover {
filter: brightness(150%);
}
.imgSource > p.text2 {
margin: 0 0.3pc;
padding: 0.3pc;
color: #ba5c2a;
font-weight: normal;
background-image: linear-gradient(#0008, #0008);
font-size: 10pt;
line-height: 10pt;
hyphens: auto;
}
.imgSource figcaption {
line-height: 1em;
padding: 0 0.3pc;
margin: 0.3pc 0;
}
.imgSource aside {
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
border: solid #330f00 4px;
border-image: url(/css/button/frame.png) 4 stretch;
display: inline-block;
min-width: 0.4in;
min-height: 0.4in;
vertical-align: top;
text-align: center;
line-height: 0.28in;
padding-left: 0.3pc;
padding-right: 0.3pc;
display: block;
}
.imgSource aside:hover {
filter: brightness(150%);
}
/*
.imageSources
-----------
```
Images Used
#
Inspiration
Created by: Nounanka
```
*/
.imageSources > div {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.6pc;
padding: 0.3pc;
}
.imageSources > div .imgSource {
margin: 0 auto;
max-width: initial;
flex-basis: 48%;
flex-basis: calc(50% - (0.6pc / 2));
}
/*
.musicSources
-----------
```
Music Used
```
*/
.musicSources ul {
list-style-type: none;
}
.musicSources li {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 0.3pc;
border-top: solid #2e1408 1px;
border-bottom: solid #ba5c2a 1px;
border-left: solid #2e1408 1px;
border-right: solid #ba5c2a 1px;
background-image: linear-gradient(#7b3e1e, #7b3e1e), url(/css/window/grey/background.png );
background-color: #522914;
background-blend-mode: overlay, normal;
background-repeat: repeat;
background-size: auto;
}
.musicSources song-name {
flex-basis: 36%;
flex-basis: calc(36% - 0.3pc);
}
.musicSources song-origin,
.musicSources song-use {
flex-basis: 30%;
flex-basis: calc(30% - 0.3pc);
}
.musicSources song-name::before {
content: "🎵";
}
.musicSources song-name {
text-indent: -1.6em;
padding-left: 1.6em;
}
.musicSources song-origin::before {
content: "(";
}
.musicSources song-origin::after {
content: ")";
}
.musicSources song-use::before {
content: "Used for \"";
}
.musicSources song-use::after {
content: "\"";
}
@media screen and (max-width: 28em) {
.musicSources song-name::before {
content: "";
}
.musicSources song-name {
text-indent: 0;
padding-left: 0;
}
}
.main-attraction .projectLink,
.projectLink {
border: solid #330f00 1px;
border-image: url(/css/window/outer-frame.png) 1 stretch;
background-color: #170902;
height: 2em;
display: inline-block;
margin-top: -0.2em;
margin-bottom: -0.2em;
padding-right: 0.2em;
}
.main-attraction .projectLink > a > img,
.projectLink > a > img {
height: 2em;
width: auto;
vertical-align: middle;
margin-right: 0.2em;
min-height: initial;
}
.projectLink:hover {
filter: brightness(150%);
}
.imgLink {
display: inline-grid;
grid-template-columns: auto;
grid-template-rows: auto auto;
grid-template-areas: "caption" "image";
justify-items: stretch;
align-items: stretch;
text-decoration: none;
}
.imgLink .imgCaption {
grid-area: caption;
background-image: linear-gradient(#0008, #0008);
border: solid #330f00 4px;
border-image: url(/css/window/inner-frame.png) 4 stretch;
background-size: auto 70%, auto 70%, auto;
background-position: left -3px, left 160%, top left;
margin: 1px 1px;
margin-bottom: 0;
border-bottom: 0;
}
.imgLink img {
grid-area: image;
}
.externalLink {
position: relative;
}
.externalLink::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 2em;
height: 2em;
background-image: url(/css/link-external.svg);
background-size: contain;
transform: translate(-0.6pc, 0.6pc);
}
@media screen and (prefers-reduced-motion: no-preference) {
.externalLink::after {
transition: transform 200ms;
}
}
/*
.externalLink::after{
content: "";
position: absolute;
right: 0.8em;
width: 2em;
height: 2em;
background-image: url(/css/link-external.svg);
background-size: contain;
transform: translate( -@outer-padding, @outer-padding );
// if: anim allowed
@media screen and (prefers-reduced-motion: no-preference){
transition: transform @animSpeed;
}
}// .externalLink icon
*/
.externalLink:hover::after {
filter: brightness(150%);
}
@media screen and (prefers-reduced-motion: no-preference) {
.externalLink:hover::after {
transform: translate(0.6pc, -0.6pc);
}
}
/*
button-link
-----------
```
Download this file
```
*/
button-link {
text-align: center;
padding: 0.3pc;
border: solid #330f00 4px;
border-image: url(/css/button/frame.png) 4 stretch;
background-color: #ba5c2a;
background-image: linear-gradient(#ba5c2a, #ba5c2a), linear-gradient(#ffff, #0000), linear-gradient(#fff6, #0004), linear-gradient(#ba5c2a, #ba5c2a), url(/css/window/grey/background.png);
background-color: #522914;
background-repeat: repeat, repeat-x, repeat-x, repeat, repeat;
background-size: auto, auto, auto, auto, auto;
background-blend-mode: soft-light, overlay, overlay, soft-light, normal;
background-position: top left, top left, top left, top left, top left;
color: white;
text-decoration: none;
font-family: "font-a", "ChicagoFLF", "Chicago", sans-serif;
font-size: 12pt;
text-shadow: 1px 1px 0 #181818, 0 1px 0 #181818;
position: relative;
top: 1px;
line-height: 1.1em;
box-shadow: 1px 1px rgba(0, 0, 0, 0.7);
width: 50%;
margin-left: auto;
margin-right: auto;
display: block;
}
button-link a {
color: white;
text-decoration: none;
}
@media print {
button-link {
text-shadow: none;
}
}
button-link:hover {
filter: brightness(150%);
}
.footnote-backref {
clear: both;
display: block;
margin-top: 0.3pc;
}
.footnote-backref::after {
content: "";
display: block;
border-top: solid #2e1408 1px;
border-bottom: solid #ba5c2a 1px;
margin-top: 0.6pc;
margin-bottom: 0.6pc;
}
/* Website Header */
/* Website Navigation */
/*
Website Header
-----------
```
```
*/
:root {
--numNavRows: 1.98;
}
body.header {
--numNavRows: 1.98;
}
@media (max-width: 689.04px) {
:root {
--numNavRows: 2.96;
}
}
@media (max-width: 660.24px) {
body.header {
--numNavRows: 2.96;
}
}
@media (max-width: 498px) {
:root {
--numNavRows: 3.95;
}
}
@media (max-width: 469.2px) {
body.header {
--numNavRows: 3.95;
}
}
@media (max-width: 406.4px) {
:root {
--numNavRows: 4.94;
}
}
@media (max-width: 377.6px) {
body.header {
--numNavRows: 4.94;
}
}
@media (max-width: 318px) {
:root {
--numNavRows: 6.9;
}
}
@media (max-width: 289.2px) {
body.header {
--numNavRows: 6.9;
}
}
@media (max-width: 218.4px) {
:root {
--numNavRows: 12.8;
}
}
@media (max-width: 189.6px) {
body.header {
--numNavRows: 12.8;
}
}
#header {
height: calc(44.6px + (99.6px * var(--numNavRows)));
}
#header-test {
height: calc(44.6px + (99.6px * var(--numNavRows)));
background-color: blue;
opacity: 0.2;
position: absolute;
width: 100%;
}
body.header {
display: block;
background-color: transparent;
background: none;
max-width: 100vw;
}
body.header header {
display: block;
height: 44.6px;
position: relative;
}
body.header header .logo,
body.header header .logo img {
height: 100%;
width: initial;
font-size: 44.6px;
line-height: 44.6px;
}
body.header header .searchButton {
display: inline-block;
bottom: 0;
right: 0;
position: absolute;
}
body.header header .logo {
transition: opacity 200ms;
}
@media screen and (max-width: 267.6px) {
body.header header .logo {
opacity: 0;
}
}
body.header nav ul {
list-style: none;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
justify-items: center;
column-gap: 0.3pc;
flex-direction: column;
height: calc(90px * var(--numNavRows) + ((0.3pc * 2) * var(--numNavRows)));
padding-top: 0.3pc;
}
body.header nav ul a {
text-decoration: none;
}
body.header nav ul li {
display: inline-block;
text-align: center;
}
body.header nav ul li img {
object-fit: contain;
width: 90px;
height: 74px;
}
body.header nav ul li span {
display: block;
white-space: nowrap;
overflow: hidden;
}
@media screen and (prefers-reduced-motion: no-preference) {
body.header nav ul a:hover > img {
filter: brightness(150%);
}
}
/* Artist Profile Card */
.artist {
display: inline-grid;
vertical-align: top;
margin: 0.6pc 0.3pc;
border: solid #330f00 1px;
border-image: url(/css/window/outer-frame.png) 1 stretch;
background-image: linear-gradient(#be5422, #be5422), url(/css/window/grey/background.png );
background-color: #93411a;
background-blend-mode: overlay, normal;
background-repeat: repeat;
background-size: auto;
max-width: 140pt;
width: 100%;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas: "name" "thumb" "links" "caption";
}
.artist > .thumb {
grid-area: thumb;
border: solid #330f00 4px;
border-image: url(/css/window/inner-frame.png) 4 stretch;
background-size: auto 70%, auto 70%, auto;
background-position: left -3px, left 160%, top left;
margin: 1px 1px;
margin-bottom: 0;
min-height: auto;
height: auto;
height: min-content;
}
.artist > .name {
grid-area: name;
font-size: 14pt;
text-align: center;
color: #f5eedd;
border: solid #330f00 4px;
border-image: url(/css/window/inner-frame.png) 4 stretch;
background-size: auto 70%, auto 70%, auto;
background-position: left -3px, left 160%, top left;
margin: 1px 1px;
margin-bottom: 0;
}
.artist > .caption {
grid-area: caption;
text-align: right;
font-size: 10pt;
line-height: 10pt;
background-image: linear-gradient(#0008, #0008);
padding: 0.15pc 0.3pc;
margin-top: -1px;
font-style: italic;
min-height: 1.4em;
}
.artist > .links {
grid-area: links;
}
.artist > .links a {
display: block;
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
border: solid #330f00 4px;
border-image: url(/css/button/frame.png) 4 stretch;
display: inline-block;
min-width: 0.4in;
min-height: 0.4in;
vertical-align: top;
text-align: center;
line-height: 0.28in;
padding-left: 0.3pc;
padding-right: 0.3pc;
width: 100%;
}
.artist a:hover {
filter: brightness(150%);
}
/* download-list */
.download-list {
list-style: none;
position: relative;
padding-left: 0;
}
.download-list .hide {
opacity: 0;
display: block;
overflow: hidden;
}
.download-list .show {
opacity: 1;
display: block;
max-width: inherit;
max-height: inherit;
}
.download-list li {
display: inline-block;
}
@media print {
.download-list li {
display: none;
}
}
.download-list li + li {
margin: 0 -1.6pt;
}
.download-list a > span {
opacity: 0;
display: block;
overflow: hidden;
transform: opacity 200ms;
pointer-events: none;
position: absolute;
vertical-align: bottom;
bottom: 0;
left: 0;
color: #bdb6a5;
}
.download-list a:hover > span {
opacity: 1;
display: block;
max-width: inherit;
max-height: inherit;
}
.download-list li > a::before {
content: "";
display: inline-block;
width: 18px;
height: 24px;
vertical-align: bottom;
position: relative;
min-width: 0.4in;
text-align: center;
padding-top: 0.15in;
margin-top: -0.4in;
}
.download-list a:hover::before {
filter: brightness(150%);
}
.download-list .addon > a::before {
content: url(/css/download/addon.png);
}
.download-list .cbr > a::before {
content: url(/css/download/cbr.png);
}
.download-list .editor > a::before {
content: url(/css/download/editor.png);
}
.download-list .exe > a::before {
content: url(/css/download/exe.png);
}
.download-list .flash > a::before {
content: url(/css/download/flash.png);
}
.download-list .full-size > a::before {
content: url(/css/download/full-size.png);
}
.download-list .gif > a::before {
content: url(/css/download/gif.gif);
}
.download-list .main > a::before {
content: url(/css/download/main.png);
}
.download-list .misc > a::before {
content: url(/css/download/misc.png);
}
.download-list .music > a::before {
content: url(/css/download/music.png);
}
.download-list .pdf > a::before {
content: url(/css/download/pdf.png);
}
.download-list .source > a::before {
content: url(/css/download/source.png);
}
.download-list .text > a::before {
content: url(/css/download/text.png);
}
.download-list .video > a::before {
content: url(/css/download/video.png);
}
/* pairing */
.content-list {
list-style: none;
position: relative;
padding-top: 0.4pc;
}
.content-list .hide {
opacity: 0;
display: block;
overflow: hidden;
max-width: 0;
max-height: 0;
}
.content-list .show {
opacity: 1;
display: block;
max-width: inherit;
max-height: inherit;
}
.content-list > li {
display: inline-block;
}
.content-list > li + li {
margin: 0 0;
position: absolute;
}
.content-list > li + li.pairing {
margin: 0 -1pt;
position: static;
}
.content-list > li span {
opacity: 0;
display: block;
overflow: hidden;
max-width: 0;
max-height: 0;
pointer-events: none;
position: absolute;
vertical-align: top;
top: 0;
left: 0;
}
.content-list > li.pairing span {
opacity: 1;
display: block;
max-width: inherit;
max-height: inherit;
opacity: 0;
pointer-events: none;
position: absolute;
vertical-align: top;
top: 0;
left: 0;
}
.content-list > .pairing:hover span {
opacity: 1;
display: block;
max-width: inherit;
max-height: inherit;
}
.content-list > .pairing::before {
pointer-events: all;
opacity: 1;
content: "";
display: inline-block;
width: 29px;
height: 24px;
vertical-align: top;
position: relative;
top: calc(-24px + 1.1em);
}
@media print {
.content-list > .pairing::before {
display: none;
}
}
.content-list .best-girl::before {
content: url(/css/pairing/best-girl.svg);
}
.content-list .best-wom::before {
content: url(/css/pairing/best-wom.svg);
}
.content-list .girl-boy::before {
content: url(/css/pairing/girl-boy.svg);
}
.content-list .girl-girl::before {
content: url(/css/pairing/girl-girl.svg);
}
.content-list .man-girl::before {
content: url(/css/pairing/man-girl.svg);
}
.content-list .wom-boy::before {
content: url(/css/pairing/wom-boy.svg);
}
.content-list .wom-girl::before {
content: url(/css/pairing/wom-girl.svg);
}
.content-list .wom-wom::before {
content: url(/css/pairing/wom-wom.svg);
}
/* thumb-misc */
.thumb-misc::after {
content: "";
grid-row: pic-start / pic-end;
grid-column: 1;
margin-top: -3pc;
pointer-events: none;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
opacity: 0;
}
@media screen and (prefers-reduced-motion: no-preference) {
.thumb-misc::after {
transition: opacity 200ms;
}
}
.thumb-misc:hover::after {
opacity: 0.7;
}
.thumb-misc.picture::after {
background-image: url(/css/thumb-overlay/picture.svg);
}
.thumb-misc.video::after {
background-image: url(/css/thumb-overlay/video.svg);
}
.thumb-misc {
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
border: solid #330f00 1px;
border-image: url(/css/window/outer-frame.png) 1 stretch;
max-width: 100%;
width: 140pt;
margin-top: 3pc;
display: grid;
grid-template-rows: [pic-start] auto [pic-footer-start] 0.4in [pic-end] 0.4in [info-button-end] auto [info-footer-end];
}
.thumb-misc > .preview-image {
grid-row: pic-start / pic-end;
grid-column: 1;
}
.thumb-misc > .download-list {
grid-row: pic-footer-start / pic-end;
grid-column: 1;
}
.thumb-misc > .date-created {
grid-row: pic-footer-start / pic-end;
grid-column: 1;
}
.thumb-misc > .info-link {
grid-row: pic-end / info-button-end;
grid-column: 1;
}
.thumb-misc > .project-label {
grid-row: pic-end / info-button-end;
grid-column: 1;
}
.thumb-misc > .download-label {
grid-row: pic-end / info-button-end;
grid-column: 1;
}
.thumb-misc > .content-label {
grid-row: pic-end / info-button-end;
grid-column: 1;
}
.thumb-misc > .date-created-label {
grid-row: pic-end / info-button-end;
grid-column: 1;
}
.thumb-misc > .updates-label {
grid-row: pic-end / info-button-end;
grid-column: 1;
}
.thumb-misc > .brief-description {
grid-row: info-button-end / info-footer-end;
grid-column: 1;
}
.thumb-misc > .content-list {
grid-row: info-button-end / info-footer-end;
grid-column: 1;
}
.thumb-misc > .preview-image {
margin-top: -3pc;
object-fit: contain;
object-position: bottom;
margin-left: -1px;
}
.thumb-misc > .download-list {
align-self: end;
padding-bottom: 0.3pc;
z-index: 4;
white-space: nowrap;
width: 140pt;
}
.thumb-misc > .download-list span {
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
border: solid #330f00 4px;
border-image: url(/css/window/inner-frame.png) 4 stretch;
background-size: auto 70%, auto 70%, auto;
background-position: left -3px, left 160%, top left;
margin: 1px 1px;
margin-bottom: 0;
width: 140pt;
width: calc(140pt - 1px);
height: 0.4in;
font-size: 12pt;
text-align: center;
padding-top: 4.8pt;
margin-bottom: -0.4in;
margin-bottom: calc(-0.4in - 1px);
}
@media screen and (prefers-reduced-motion: no-preference) {
.thumb-misc > .download-list span {
transition: opacity 200ms;
}
}
.thumb-misc > .date-created {
text-align: right;
align-self: end;
border: solid #330f00 1px;
border-image: url(/css/window/outer-frame.png) 1 stretch;
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
margin-left: -1px;
z-index: 1;
}
.thumb-misc > .info-link {
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
border: solid #330f00 4px;
border-image: url(/css/button/frame.png) 4 stretch;
display: inline-block;
min-width: 0.4in;
min-height: 0.4in;
vertical-align: top;
text-align: center;
line-height: 0.28in;
padding-left: 0.3pc;
padding-right: 0.3pc;
z-index: 2;
}
.thumb-misc > .info-link:hover {
filter: brightness(150%);
}
.thumb-misc > .project-label,
.thumb-misc > .content-label,
.thumb-misc > .date-created-label,
.thumb-misc > .updates-label,
.thumb-misc > .download-label {
text-align: center;
padding-top: 4.8pt;
}
.thumb-misc > .project-label,
.thumb-misc > .content-label,
.thumb-misc > .date-created-label,
.thumb-misc > .updates-label,
.thumb-misc > .download-label {
margin: 0;
font-size: 12pt;
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
border: solid #330f00 4px;
border-image: url(/css/window/inner-frame.png) 4 stretch;
background-size: auto 70%, auto 70%, auto;
background-position: left -3px, left 160%, top left;
margin: 1px 1px;
margin-bottom: 0;
white-space: nowrap;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
text-overflow: clip;
overflow: hidden;
}
.thumb-misc > .project-label {
color: #ffcf63;
z-index: 3;
}
.thumb-misc > .content-label {
visibility: hidden;
padding-top: 3.8pt;
}
.thumb-misc > .content-label::before {
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
content: "Sexual Content";
visibility: visible;
display: block;
height: 100%;
overflow: hidden;
}
.thumb-misc > .brief-description {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 0.3pc;
}
.thumb-misc > .content-list {
text-align: center;
margin-bottom: 0.3pc;
}
.thumb-misc > .content-list span {
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
border: solid #330f00 4px;
border-image: url(/css/window/inner-frame.png) 4 stretch;
background-size: auto 70%, auto 70%, auto;
background-position: left -3px, left 160%, top left;
margin: 1px 1px;
margin-bottom: 0;
z-index: 3;
width: 140pt;
width: calc(140pt - 1px);
height: 0.4in;
font-size: 12pt;
padding-top: 4.8pt;
margin-top: -0.4in;
margin-top: calc(-0.4in + 1px);
white-space: nowrap;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
text-overflow: clip;
overflow: hidden;
}
@media screen and (prefers-reduced-motion: no-preference) {
.thumb-misc > .content-list span {
transition: opacity 200ms;
}
}
@media screen and (prefers-reduced-motion: no-preference) {
.thumb-misc > .project-label,
.thumb-misc > .content-list,
.thumb-misc > .brief-description {
transition: opacity 200ms;
}
}
.thumb-misc > .preview-image {
opacity: 1;
}
.thumb-misc > .download-list {
opacity: 1;
pointer-events: none;
}
.thumb-misc > .download-list li > a::before {
opacity: 0;
transform: translateX(-100%);
}
@media screen and (prefers-reduced-motion: no-preference) {
.thumb-misc > .download-list li > a::before {
transition: opacity 200ms, transform 200ms;
}
}
.thumb-misc > .download-list li:first-of-type > a::before {
opacity: 1;
transform: translateX(0);
}
.thumb-misc > .date-created {
opacity: 1;
pointer-events: none;
transform: translateY(100%);
margin-bottom: -1px;
}
@media screen and (prefers-reduced-motion: no-preference) {
.thumb-misc > .date-created {
transition: transform 200ms;
}
}
.thumb-misc > .info-link {
opacity: 1;
pointer-events: all;
}
.thumb-misc > .project-label {
opacity: 1;
pointer-events: none;
}
.thumb-misc > .download-label {
opacity: 0;
pointer-events: none;
}
.thumb-misc > .content-label {
opacity: 0;
pointer-events: none;
}
.thumb-misc > .date-created-label {
opacity: 0;
pointer-events: none;
}
.thumb-misc > .updates-label {
opacity: 0;
pointer-events: none;
}
.thumb-misc > .brief-description {
opacity: 1;
pointer-events: none;
}
.thumb-misc > .content-list {
opacity: 0;
pointer-events: none;
}
.thumb-misc:hover > .download-list {
opacity: 1;
pointer-events: all;
}
.thumb-misc:hover > .download-list:hover li > a::before {
opacity: 1;
transform: translateX(0);
}
.thumb-misc:hover > .date-created {
opacity: 1;
pointer-events: none;
transform: translateY(0);
}
.thumb-misc:hover > .info-link {
opacity: 1;
pointer-events: all;
}
.thumb-misc:hover > .project-label {
opacity: 0;
pointer-events: none;
}
.thumb-misc:hover > .download-label {
opacity: 0;
pointer-events: none;
}
.thumb-misc:hover > .content-label {
opacity: 0;
pointer-events: none;
}
.thumb-misc:hover > .date-created-label {
opacity: 0;
pointer-events: none;
}
.thumb-misc:hover > .updates-label {
opacity: 0;
pointer-events: none;
}
.thumb-misc:hover > .brief-description {
opacity: 0;
pointer-events: none;
}
.thumb-misc:hover > .content-list {
opacity: 1;
pointer-events: none;
}
/* List of Updates */
.list-of-updates ul {
padding: 0;
list-style-type: none;
width: 100%;
}
@media print {
.list-of-updates li {
page-break-inside: avoid;
break-inside: avoid;
}
}
/* Blog Page */
body > .blog,
body > .tutorial,
body > .blog_article3 {
max-width: 99vw;
max-width: calc(100vw - 0.3in);
margin-top: 0;
margin-left: auto;
margin-right: auto;
}
body:has(> .story),
body:has(> .blog_article) {
display: block;
}
.blog-content {
max-width: 40rem;
margin-left: auto;
margin-right: auto;
}
.blog-content > p > .imgLink > img {
height: 20pc;
width: 100%;
}
.blog-content > p > .imgLink {
object-fit: contain;
width: 49%;
}
.blog-content > p > .imgLink:nth-of-type(2n) {
float: left;
margin-right: 1%;
}
.blog-content > p > .imgLink:nth-of-type(2n+1) {
float: right;
margin-left: 1%;
}
.blog-content > p > .imgLink:nth-of-type(1n+4) {
margin-top: 0.3pc;
}
.blog-content > p > .imgLink:last-child:nth-of-type(2n) {
width: 100%;
height: auto;
}
.blog-content > .imgLink {
width: 100%;
}
.blog-content > .imgLink > img {
height: auto;
max-height: 20pc;
width: 100%;
}
.blog-content > a > img,
.blog-content > p > .imgLink > img {
border: solid #330f00 4px;
border-image: url(/css/window/inner-frame.png) 4 stretch;
background-size: auto 70%, auto 70%, auto;
background-position: left -3px, left 160%, top left;
margin: 1px 1px;
margin-bottom: 0;
background-color: #170902;
margin: 0;
}
.blog-content p > video {
object-fit: contain;
max-height: 20pc;
width: 49%;
}
.blog-content p > video:first-of-type {
float: left;
margin-right: 1%;
}
.blog-content p::after {
clear: both;
content: "";
display: block;
}
.blog-content p > video:first-child,
.blog-content p > video + video {
width: 49%;
max-height: 20pc;
}
.blog-content p > video:nth-of-type(2n) {
float: right;
}
.blog-content p > video + video:last-child:nth-of-type(2n+1) {
width: 100%;
height: auto;
}
.blog-content p > video:only-child {
width: 100%;
height: auto;
}
.blog-content video {
border: solid #330f00 4px;
border-image: url(/css/window/inner-frame.png) 4 stretch;
background-size: auto 70%, auto 70%, auto;
background-position: left -3px, left 160%, top left;
margin: 1px 1px;
margin-bottom: 0;
background-color: #170902;
margin: 0;
}
.blog-content video + * {
margin-top: 0.6pc;
}
.blog-content p::after {
clear: both;
content: "";
display: block;
}
.blog-content p + p {
margin-top: 1em;
}
.blog-content > .imgSource:only-of-type {
max-width: 100%;
display: block;
}
.blog-content > h2 > a {
margin-left: 0.3pc;
}
.blog-content > h3 {
padding-left: 0;
}
.blog-content > h3 > a {
margin-left: -0.6pc;
}
.blog .main-attraction,
.tutorial .main-attraction,
.blog_article3 .main-attraction {
padding-top: 0;
padding-bottom: 0.4in;
position: relative;
border-top: 0;
}
.blog .main-attraction article,
.tutorial .main-attraction article,
.blog_article3 .main-attraction article {
padding: 0;
}
.blog .main-attraction h1,
.tutorial .main-attraction h1,
.blog_article3 .main-attraction h1 {
margin-left: -0.6pc;
margin-right: -0.6pc;
}
.blog .main-attraction h2,
.tutorial .main-attraction h2,
.blog_article3 .main-attraction h2 {
border: solid #330f00 1px;
border-image: url(/css/window/outer-frame.png) 1 stretch;
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
display: block;
text-align: center;
padding: 0.3pc;
margin-left: -0.6pc;
margin-right: -0.6pc;
margin-bottom: 0.3pc;
margin-top: 30px;
overflow: visible;
}
.blog .main-attraction h2:first-child::before,
.tutorial .main-attraction h2:first-child::before,
.blog_article3 .main-attraction h2:first-child::before {
content: none;
}
.blog .main-attraction h2:first-child,
.tutorial .main-attraction h2:first-child,
.blog_article3 .main-attraction h2:first-child {
margin-top: 0;
}
@media print {
.blog .main-attraction h2 + *,
.tutorial .main-attraction h2 + *,
.blog_article3 .main-attraction h2 + * {
page-break-before: avoid;
break-before: avoid;
}
}
.blog .main-attraction article,
.tutorial .main-attraction article,
.blog_article3 .main-attraction article {
max-width: 40rem;
margin-left: auto;
margin-right: auto;
}
.blog .main-attraction article > p > .imgLink > img,
.tutorial .main-attraction article > p > .imgLink > img,
.blog_article3 .main-attraction article > p > .imgLink > img {
height: 20pc;
width: 100%;
}
.blog .main-attraction article > p > .imgLink,
.tutorial .main-attraction article > p > .imgLink,
.blog_article3 .main-attraction article > p > .imgLink {
object-fit: contain;
width: 49%;
}
.blog .main-attraction article > p > .imgLink:nth-of-type(2n),
.tutorial .main-attraction article > p > .imgLink:nth-of-type(2n),
.blog_article3 .main-attraction article > p > .imgLink:nth-of-type(2n) {
float: left;
margin-right: 1%;
}
.blog .main-attraction article > p > .imgLink:nth-of-type(2n+1),
.tutorial .main-attraction article > p > .imgLink:nth-of-type(2n+1),
.blog_article3 .main-attraction article > p > .imgLink:nth-of-type(2n+1) {
float: right;
margin-left: 1%;
}
.blog .main-attraction article > p > .imgLink:nth-of-type(1n+4),
.tutorial .main-attraction article > p > .imgLink:nth-of-type(1n+4),
.blog_article3 .main-attraction article > p > .imgLink:nth-of-type(1n+4) {
margin-top: 0.3pc;
}
.blog .main-attraction article > p > .imgLink:last-child:nth-of-type(2n),
.tutorial .main-attraction article > p > .imgLink:last-child:nth-of-type(2n),
.blog_article3 .main-attraction article > p > .imgLink:last-child:nth-of-type(2n) {
width: 100%;
height: auto;
}
.blog .main-attraction article > .imgLink,
.tutorial .main-attraction article > .imgLink,
.blog_article3 .main-attraction article > .imgLink {
width: 100%;
}
.blog .main-attraction article > .imgLink > img,
.tutorial .main-attraction article > .imgLink > img,
.blog_article3 .main-attraction article > .imgLink > img {
height: auto;
max-height: 20pc;
width: 100%;
}
.blog .main-attraction article > a > img,
.tutorial .main-attraction article > a > img,
.blog_article3 .main-attraction article > a > img,
.blog .main-attraction article > p > .imgLink > img,
.tutorial .main-attraction article > p > .imgLink > img,
.blog_article3 .main-attraction article > p > .imgLink > img {
border: solid #330f00 4px;
border-image: url(/css/window/inner-frame.png) 4 stretch;
background-size: auto 70%, auto 70%, auto;
background-position: left -3px, left 160%, top left;
margin: 1px 1px;
margin-bottom: 0;
background-color: #170902;
margin: 0;
}
.blog .main-attraction article p > video,
.tutorial .main-attraction article p > video,
.blog_article3 .main-attraction article p > video {
object-fit: contain;
max-height: 20pc;
width: 49%;
}
.blog .main-attraction article p > video:first-of-type,
.tutorial .main-attraction article p > video:first-of-type,
.blog_article3 .main-attraction article p > video:first-of-type {
float: left;
margin-right: 1%;
}
.blog .main-attraction article p::after,
.tutorial .main-attraction article p::after,
.blog_article3 .main-attraction article p::after {
clear: both;
content: "";
display: block;
}
.blog .main-attraction article p > video:first-child,
.tutorial .main-attraction article p > video:first-child,
.blog_article3 .main-attraction article p > video:first-child,
.blog .main-attraction article p > video + video,
.tutorial .main-attraction article p > video + video,
.blog_article3 .main-attraction article p > video + video {
width: 49%;
max-height: 20pc;
}
.blog .main-attraction article p > video:nth-of-type(2n),
.tutorial .main-attraction article p > video:nth-of-type(2n),
.blog_article3 .main-attraction article p > video:nth-of-type(2n) {
float: right;
}
.blog .main-attraction article p > video + video:last-child:nth-of-type(2n+1),
.tutorial .main-attraction article p > video + video:last-child:nth-of-type(2n+1),
.blog_article3 .main-attraction article p > video + video:last-child:nth-of-type(2n+1) {
width: 100%;
height: auto;
}
.blog .main-attraction article p > video:only-child,
.tutorial .main-attraction article p > video:only-child,
.blog_article3 .main-attraction article p > video:only-child {
width: 100%;
height: auto;
}
.blog .main-attraction article video,
.tutorial .main-attraction article video,
.blog_article3 .main-attraction article video {
border: solid #330f00 4px;
border-image: url(/css/window/inner-frame.png) 4 stretch;
background-size: auto 70%, auto 70%, auto;
background-position: left -3px, left 160%, top left;
margin: 1px 1px;
margin-bottom: 0;
background-color: #170902;
margin: 0;
}
.blog .main-attraction article video + *,
.tutorial .main-attraction article video + *,
.blog_article3 .main-attraction article video + * {
margin-top: 0.6pc;
}
.blog .main-attraction article p::after,
.tutorial .main-attraction article p::after,
.blog_article3 .main-attraction article p::after {
clear: both;
content: "";
display: block;
}
.blog .main-attraction article p + p,
.tutorial .main-attraction article p + p,
.blog_article3 .main-attraction article p + p {
margin-top: 1em;
}
.blog .main-attraction article > .imgSource:only-of-type,
.tutorial .main-attraction article > .imgSource:only-of-type,
.blog_article3 .main-attraction article > .imgSource:only-of-type {
max-width: 100%;
display: block;
}
.blog .main-attraction article > h2 > a,
.tutorial .main-attraction article > h2 > a,
.blog_article3 .main-attraction article > h2 > a {
margin-left: 0.3pc;
}
.blog .main-attraction article > h3,
.tutorial .main-attraction article > h3,
.blog_article3 .main-attraction article > h3 {
padding-left: 0;
}
.blog .main-attraction article > h3 > a,
.tutorial .main-attraction article > h3 > a,
.blog_article3 .main-attraction article > h3 > a {
margin-left: -0.6pc;
}
/* Layout of project thumbnails (gallery) */
.layout-thumbs h1 {
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
border: solid #330f00 1px;
border-image: url(/css/window/outer-frame.png) 1 stretch;
text-align: center;
position: relative;
}
.layout-thumbs h1 .back {
position: absolute;
left: 0.3pc;
font-size: 12pt;
}
.layout-thumbs h1 .back span {
width: 0;
display: inline-block;
overflow: hidden;
vertical-align: top;
}
.layout-thumbs h1 .back::before {
border: solid #330f00 4px;
border-image: url(/css/button/frame.png) 4 stretch;
background-color: #ba5c2a;
background-image: linear-gradient(#ba5c2a, #ba5c2a), linear-gradient(#ffff, #0000), linear-gradient(#fff6, #0004), linear-gradient(#ba5c2a, #ba5c2a), url(/css/window/grey/background.png);
background-color: #522914;
background-repeat: repeat, repeat-x, repeat-x, repeat, repeat;
background-size: auto, auto, auto, auto, auto;
background-blend-mode: soft-light, overlay, overlay, soft-light, normal;
background-position: top left, top left, top left, top left, top left;
color: white;
text-decoration: none;
font-family: "font-a", "ChicagoFLF", "Chicago", sans-serif;
font-size: 12pt;
text-shadow: 1px 1px 0 #181818, 0 1px 0 #181818;
position: relative;
top: 1px;
line-height: 1.1em;
box-shadow: 1px 1px rgba(0, 0, 0, 0.7);
display: inline-block;
content: url(/css/back-arrow.svg);
padding: 1pt 0;
margin-top: 0.15pc;
min-width: 0.4in;
}
.layout-thumbs h1 .back::before a {
color: white;
text-decoration: none;
}
@media print {
.layout-thumbs h1 .back::before {
text-shadow: none;
}
}
.layout-thumbs h1 .back:hover {
filter: brightness(150%);
}
.layout-thumbs > .message {
background-image: linear-gradient(#7b3e1e, #7b3e1e), url(/css/window/grey/background.png );
background-color: #522914;
background-blend-mode: overlay, normal;
background-repeat: repeat;
background-size: auto;
text-align: center;
}
.layout-thumbs > .message img {
height: 1em;
width: min-content;
object-fit: contain;
}
.layout-thumbs > ul {
background-image: linear-gradient(#fff6, #0000), linear-gradient(#0000, #0008), url(/css/area-background.png);
background-color: #1e331c;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
box-shadow: inset 0 3pt 3pt rgba(0, 0, 0, 0.7);
list-style-type: none;
display: flex;
flex-wrap: wrap;
padding: 0.3pc;
gap: 0.6pc;
justify-content: space-around;
align-content: space-around;
align-items: flex-end;
}
.layout-thumbs > ul > li {
display: inline-block;
}
.layout-thumbs > ul > li > .thumb-misc {
flex-shrink: 0;
flex-grow: 0;
}
.layout-thumbs > ul.hidden {
display: none;
}
/* Updates Page Layout */
.layout-updates {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
gap: 0.6pc;
row-gap: 30px;
}
.layout-updates > .list-of-updates {
flex-basis: 50rem;
flex-grow: 1;
flex-shrink: 1;
display: flex;
flex-wrap: wrap;
padding: 0.3pc;
padding-top: 0;
background-image: linear-gradient(#fff6, #0000), linear-gradient(#0000, #0008), url(/css/area-background.png);
background-color: #1e331c;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
border: solid #330f00 1px;
border-image: url(/css/window/outer-frame.png) 1 stretch;
}
.layout-updates > .list-of-updates > .updates-header-recent {
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
border: solid #330f00 1px;
border-image: url(/css/window/outer-frame.png) 1 stretch;
text-align: center;
flex-basis: 130%;
margin-left: -0.3pc;
margin-right: -0.3pc;
margin-bottom: 0.3pc;
}
.layout-updates > .list-of-updates > .button {
flex-grow: 1;
}
.layout-updates > .list-of-updates > .button + .button {
margin-left: 0.3pc;
}
.layout-updates > .thumbs-and-webrings {
flex-basis: 140pt;
flex-grow: 1;
flex-shrink: 0;
}
.layout-updates .badges,
.layout-updates .webrings {
margin-top: 30px;
padding-bottom: 0.6pc;
border: solid #330f00 1px;
border-image: url(/css/window/outer-frame.png) 1 stretch;
background-image: linear-gradient(#fff6, #0000), linear-gradient(#0000, #0008), url(/css/area-background.png);
background-color: #1e331c;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
row-gap: 0.3pc;
}
.layout-updates .badges img,
.layout-updates .webrings img {
width: initial;
}
.layout-updates .badges > h1,
.layout-updates .webrings > h1 {
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
border: solid #330f00 1px;
border-image: url(/css/window/outer-frame.png) 1 stretch;
text-align: center;
flex-basis: 100%;
}
.layout-updates .badges > div,
.layout-updates .webrings > div {
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
border: solid #330f00 4px;
border-image: url(/css/window/inner-frame.png) 4 stretch;
background-size: auto 70%, auto 70%, auto;
background-position: left -3px, left 160%, top left;
margin: 1px 1px;
margin-bottom: 0;
text-align: center;
white-space: nowrap;
}
.layout-updates .badges > .caption,
.layout-updates .webrings > .caption {
flex-basis: 100%;
}
/* Project Page Layouts */
.story article {
max-width: 40rem;
margin-left: auto;
margin-right: auto;
}
.layout-project {
display: grid;
align-content: flex-start;
justify-content: space-between;
margin-bottom: 0.6pc;
}
.layout-project > h1 {
grid-area: title;
}
.layout-project > .main-attraction {
grid-area: main-attraction;
}
.layout-project > #TableOfContents {
grid-area: toc;
}
.layout-project > .cool-info {
grid-area: cool-info;
}
.layout-project > .boring-info {
grid-area: boring-info;
}
.layout-project > h1 {
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
border: solid #330f00 1px;
border-image: url(/css/window/outer-frame.png) 1 stretch;
border-bottom: none;
padding-top: 0.3pc;
text-align: center;
position: relative;
z-index: -1;
}
@media print {
.layout-project > h1 {
display: none;
}
}
.layout-project > h1::after {
content: "";
display: block;
margin-left: -0.3625pc;
margin-right: -0.3625pc;
margin-left: calc(-0.3pc - 1px);
margin-right: calc(-0.3pc - 1px);
height: 0.6pc;
margin-top: 0.3pc;
background-position: -0.6pc;
background-image: linear-gradient(#7b3e1e, #7b3e1e), url(/css/window/grey/background.png );
background-color: #522914;
background-blend-mode: overlay, normal;
background-repeat: repeat;
background-size: auto;
box-shadow: inset 0 3pt 3pt rgba(0, 0, 0, 0.7);
border-left: solid #ba5c2a 1px;
border-right: solid #2e1408 1px;
}
.layout-project #TableOfContents {
border-top: solid #ba5c2a 1px;
border-left: solid #ba5c2a 1px;
max-width: 100%;
}
.layout-project #TableOfContents ul {
margin-left: auto;
margin-right: auto;
padding-top: 0.3pc;
}
.layout-project #TableOfContents h1 {
text-align: center;
}
.layout-project #TableOfContents li {
display: block;
}
.layout-project #TableOfContents li:hover {
filter: brightness(150%);
}
.layout-project #TableOfContents li > a {
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
border: solid #330f00 4px;
border-image: url(/css/button/frame.png) 4 stretch;
display: inline-block;
min-width: 0.4in;
min-height: 0.4in;
vertical-align: top;
text-align: center;
line-height: 0.28in;
padding-left: 0.3pc;
padding-right: 0.3pc;
text-align: left;
display: block;
}
@media print {
.layout-project #TableOfContents {
display: none;
}
}
.layout-project .main-attraction {
border: solid #330f00 1px;
border-image: url(/css/window/outer-frame.png) 1 stretch;
display: grid;
gap: 0.3pc;
padding: 0.6pc;
position: relative;
}
.layout-project .main-attraction p {
margin-top: 0.3pc;
margin-bottom: 0.6pc;
}
.layout-project .main-attraction img {
min-height: 20pc;
max-height: 100vh;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.layout-project .main-attraction .artist img {
min-height: auto;
}
.layout-project .main-attraction article > .imgLink {
width: 100%;
}
.layout-project .main-attraction article > .imgLink > img {
margin-left: auto;
margin-right: auto;
}
.layout-project .main-attraction embed {
width: 100%;
}
.layout-project .main-attraction a + embed:first-of-type {
vertical-align: top;
position: absolute;
width: 100%;
height: 100%;
max-height: 68vw;
top: 0;
left: 0;
padding-left: 0.6pc;
z-index: 1;
object-fit: contain;
}
.layout-project .updates iframe {
width: 100%;
}
.layout-project > .main-attraction iframe {
max-height: 100vh;
}
.layout-project > #TableOfContents {
background-image: linear-gradient(#7b3e1e, #7b3e1e), url(/css/window/grey/background.png );
background-color: #522914;
background-blend-mode: overlay, normal;
background-repeat: repeat;
background-size: auto;
}
.layout-project .boring-info {
align-self: start;
display: grid;
grid-template-areas: "desc-long desc-long" "updates updates" "license license" "date-created author";
}
.layout-project .boring-info .desc-brief {
grid-area: desc-long;
}
.layout-project .boring-info .desc-long {
grid-area: desc-long;
}
.layout-project .boring-info .date-created {
grid-area: date-created;
}
.layout-project .boring-info .author {
grid-area: author;
}
.layout-project .boring-info .updates {
grid-area: updates;
}
.layout-project .boring-info .license {
grid-area: license;
}
@media screen and (max-width: 25rem) {
.layout-project .boring-info {
grid-template-areas: "desc-long" "updates" "license" "date-created" "author";
}
}
.layout-project .boring-info .desc-brief {
padding-top: 0.3pc;
}
.layout-project .boring-info .desc-long {
background-image: linear-gradient(#fff6, #0000), linear-gradient(#0000, #0008), url(/css/area-background.png);
background-color: #1e331c;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
}
.layout-project .boring-info .about {
max-width: 40rem;
margin-left: auto;
margin-right: auto;
background: none;
box-shadow: none;
}
.layout-project .boring-info .about > p > .imgLink > img {
height: 20pc;
width: 100%;
}
.layout-project .boring-info .about > p > .imgLink {
object-fit: contain;
width: 49%;
}
.layout-project .boring-info .about > p > .imgLink:nth-of-type(2n) {
float: left;
margin-right: 1%;
}
.layout-project .boring-info .about > p > .imgLink:nth-of-type(2n+1) {
float: right;
margin-left: 1%;
}
.layout-project .boring-info .about > p > .imgLink:nth-of-type(1n+4) {
margin-top: 0.3pc;
}
.layout-project .boring-info .about > p > .imgLink:last-child:nth-of-type(2n) {
width: 100%;
height: auto;
}
.layout-project .boring-info .about > .imgLink {
width: 100%;
}
.layout-project .boring-info .about > .imgLink > img {
height: auto;
max-height: 20pc;
width: 100%;
}
.layout-project .boring-info .about > a > img,
.layout-project .boring-info .about > p > .imgLink > img {
border: solid #330f00 4px;
border-image: url(/css/window/inner-frame.png) 4 stretch;
background-size: auto 70%, auto 70%, auto;
background-position: left -3px, left 160%, top left;
margin: 1px 1px;
margin-bottom: 0;
background-color: #170902;
margin: 0;
}
.layout-project .boring-info .about p > video {
object-fit: contain;
max-height: 20pc;
width: 49%;
}
.layout-project .boring-info .about p > video:first-of-type {
float: left;
margin-right: 1%;
}
.layout-project .boring-info .about p::after {
clear: both;
content: "";
display: block;
}
.layout-project .boring-info .about p > video:first-child,
.layout-project .boring-info .about p > video + video {
width: 49%;
max-height: 20pc;
}
.layout-project .boring-info .about p > video:nth-of-type(2n) {
float: right;
}
.layout-project .boring-info .about p > video + video:last-child:nth-of-type(2n+1) {
width: 100%;
height: auto;
}
.layout-project .boring-info .about p > video:only-child {
width: 100%;
height: auto;
}
.layout-project .boring-info .about video {
border: solid #330f00 4px;
border-image: url(/css/window/inner-frame.png) 4 stretch;
background-size: auto 70%, auto 70%, auto;
background-position: left -3px, left 160%, top left;
margin: 1px 1px;
margin-bottom: 0;
background-color: #170902;
margin: 0;
}
.layout-project .boring-info .about video + * {
margin-top: 0.6pc;
}
.layout-project .boring-info .about p::after {
clear: both;
content: "";
display: block;
}
.layout-project .boring-info .about p + p {
margin-top: 1em;
}
.layout-project .boring-info .about > .imgSource:only-of-type {
max-width: 100%;
display: block;
}
.layout-project .boring-info .about > h2 > a {
margin-left: 0.3pc;
}
.layout-project .boring-info .about > h3 {
padding-left: 0;
}
.layout-project .boring-info .about > h3 > a {
margin-left: -0.6pc;
}
@media screen and (max-width: 75rem) {
.layout-project .boring-info .about .imageSources .imgSource {
flex-basis: 32%;
flex-basis: calc(33% - (0.6pc / 2));
}
}
@media screen and (max-width: 40rem) {
.layout-project .boring-info .about .imageSources .imgSource {
flex-basis: 48%;
flex-basis: calc(50% - (0.6pc / 2));
}
}
.layout-project .boring-info .author {
text-align: right;
}
.layout-project .boring-info .author h2,
.layout-project .boring-info .author p {
display: inline;
}
@media screen and (max-width: 25rem) {
.layout-project .boring-info .author {
text-align: left;
}
}
@media print {
.layout-project .boring-info {
display: none;
}
}
.layout-project .cool-info {
align-self: start;
display: grid;
}
.layout-project .cool-info .download-section {
grid-area: download-section;
}
.layout-project .cool-info .content-section {
grid-area: content-section;
}
.layout-project .cool-info .controls {
grid-area: controls;
}
.layout-project .cool-info .thumb-img {
grid-area: thumb-img;
}
@media screen and (min-width: 75rem) {
.layout-project .cool-info {
grid-template-columns: 140pt 1fr;
grid-template-areas: "thumb-img download-section" "thumb-img content-section" "thumb-img controls";
}
.layout-project .cool-info .thumb-img {
padding-right: 0.3pc;
}
}
@media screen and (max-width: 75rem) {
.layout-project .cool-info {
grid-template-columns: 1fr auto;
grid-template-areas: "download-section controls" "content-section controls" ". controls";
}
.layout-project .cool-info .thumb-img {
display: none;
}
}
@media screen and (max-width: 40rem) {
.layout-project .cool-info {
grid-template-columns: 1fr;
grid-template-areas: "download-section" "content-section" "controls";
}
.layout-project .cool-info .thumb-img {
display: none;
}
}
.layout-project .cool-info .download-section h3 {
opacity: 0;
height: 0;
}
.layout-project .cool-info .download-section li:hover span {
top: -1.3em;
}
.layout-project .cool-info .download-section span {
border: solid #330f00 1px;
border-image: url(/css/window/outer-frame.png) 1 stretch;
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
height: 1.2em;
overflow: hidden;
text-align: right;
display: inline-block;
position: absolute;
padding: 0 0.3pc;
top: 0;
}
@media screen and (prefers-reduced-motion: no-preference) {
.layout-project .cool-info .download-section span {
transition: top 200ms, opacity 200ms;
}
}
.layout-project .cool-info .download-section a::before {
margin: 4px -1pt;
min-height: 0.4in;
vertical-align: top;
padding: 0;
line-height: 0.4in;
}
.layout-project .cool-info .download-section > h2 {
width: 0;
height: 0;
}
.layout-project .cool-info .download-section .main > a::before {
border: solid #330f00 4px;
border-image: url(/css/button/frame.png) 4 stretch;
background-color: #ba5c2a;
background-image: linear-gradient(#ba5c2a, #ba5c2a), linear-gradient(#ffff, #0000), linear-gradient(#fff6, #0004), linear-gradient(#ba5c2a, #ba5c2a), url(/css/window/grey/background.png);
background-color: #522914;
background-repeat: repeat, repeat-x, repeat-x, repeat, repeat;
background-size: auto, auto, auto, auto, auto;
background-blend-mode: soft-light, overlay, overlay, soft-light, normal;
background-position: top left, top left, top left, top left, top left;
color: white;
text-decoration: none;
font-family: "font-a", "ChicagoFLF", "Chicago", sans-serif;
font-size: 12pt;
text-shadow: 1px 1px 0 #181818, 0 1px 0 #181818;
position: relative;
top: 1px;
line-height: 1.1em;
box-shadow: 1px 1px rgba(0, 0, 0, 0.7);
margin-left: 0.3pc;
content: "Download";
padding: 0 0.3pc;
width: auto;
min-height: 0.34791667in;
line-height: 0.36in;
}
.layout-project .cool-info .download-section .main > a::before a {
color: white;
text-decoration: none;
}
@media print {
.layout-project .cool-info .download-section .main > a::before {
text-shadow: none;
}
}
.layout-project .cool-info .download-section ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.layout-project .cool-info .download-section ul li {
min-width: 0.4in;
}
.layout-project .cool-info .download-section ul li + li {
margin: 0;
}
@media screen and (prefers-reduced-motion: no-preference) {
@keyframes popOver {
0% {
z-index: -1;
}
99% {
z-index: -1;
}
100% {
z-index: 2;
}
}
}
.layout-project .cool-info .content-section {
width: 0;
height: 0;
overflow: hidden;
}
.layout-project .cool-info .content-section.hasPairings {
width: auto;
height: 1.5em;
overflow: visible;
}
.layout-project .cool-info .content-section {
display: flex;
align-items: flex-end;
position: relative;
}
.layout-project .cool-info .content-section h2 {
display: inline;
flex-grow: 0;
align-self: flex-start;
text-overflow: clip;
}
.layout-project .cool-info .content-section ul {
flex-grow: 1;
padding: 0;
margin-left: 0.3pc;
}
.layout-project .cool-info .content-section li.pairing {
position: relative;
}
.layout-project .cool-info .content-section span {
z-index: 1;
margin-top: -2.5em;
background-color: #f5eedd;
color: black;
text-shadow: none;
padding: 0.3pc 0.6pc;
position: absolute;
width: 12em;
width: max-content;
height: 1.6em;
border-radius: 9.6pt;
text-align: center;
overflow: visible;
transform-origin: 1.5em 250%;
border: solid black 1px;
}
.layout-project .cool-info .content-section span::before {
content: url(/css/pairing/balloon-tail.svg);
position: absolute;
bottom: -14px;
left: 1.5em;
}
.layout-project .cool-info .content-section li span {
transform: scale(0.9);
}
@media screen and (prefers-reduced-motion: no-preference) {
.layout-project .cool-info .content-section li span {
transition: transform 200ms, opacity 200ms;
}
}
.layout-project .cool-info .content-section li:hover span {
transform: scale(1);
}
@media print {
.layout-project .cool-info {
display: none;
}
}
/* Visual Project */
.layout-project.visual .main-attraction {
background-image: linear-gradient(#7b3e1e, #7b3e1e), url(/css/window/grey/background.png );
background-color: #522914;
background-blend-mode: overlay, normal;
background-repeat: repeat;
background-size: auto;
}
.layout-project.visual .cool-info,
.layout-project.visual .boring-info {
background-image: linear-gradient(#522914, #522914), linear-gradient(#ffff, #0000), linear-gradient(#fff6, #0004), linear-gradient(#522914, #522914), url(/css/window/grey/background.png);
background-color: #522914;
background-repeat: repeat, repeat-x, repeat-x, repeat, repeat;
background-size: auto, auto, auto, auto, auto;
background-blend-mode: soft-light, overlay, overlay, soft-light, normal;
background-position: top left, top left, top left, top left, top left;
border: solid #330f00 1px;
border-image: url(/css/window/outer-frame.png) 1 stretch;
}
@media screen and (min-width: 75rem) {
.layout-project.visual {
grid-template-columns: 1fr 0.6pc 2fr;
grid-template-rows: auto auto auto 30px auto;
grid-template-areas: "title title title" "toc toc toc" "main-attraction main-attraction main-attraction" ". . ." "cool-info . boring-info";
}
}
@media screen and (max-width: 75rem) {
.layout-project.visual {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto 30px auto auto;
grid-template-areas: "title" "toc" "main-attraction" "." "cool-info" "boring-info";
}
}
.layout-project.visual .thumb-img {
display: none;
}
.layout-project.visual .cool-info {
align-self: start;
display: grid;
}
.layout-project.visual .cool-info .download-section {
grid-area: download-section;
}
.layout-project.visual .cool-info .content-section {
grid-area: content-section;
}
.layout-project.visual .cool-info .controls {
grid-area: controls;
}
.layout-project.visual .cool-info .thumb-img {
grid-area: thumb-img;
}
.layout-project.visual .cool-info .download-section span {
z-index: -1;
opacity: 1;
}
@media screen and (min-width: 75rem) {
.layout-project.visual .cool-info {
grid-template-columns: 1fr;
grid-template-areas: "download-section" "content-section" "controls";
}
}
@media screen and (min-width: 75rem) {
body.NSFW .layout-project.visual .boring-info {
position: relative;
}
body.NSFW .layout-project.visual .boring-info::before {
content: url(/css/sitter-area.png);
line-height: 0;
position: absolute;
left: -12px;
top: -31px;
background-image: url(/css/sitters.png);
background-position: left 0;
background-position: left calc(var(--sitter, 0) * 60px);
pointer-events: none;
z-index: 1;
max-width: 90vw;
overflow: hidden;
--sitter: calc(var(--seed, 1) * 2);
}
}
@media screen and (min-width: 75rem) and print {
body.NSFW .layout-project.visual .boring-info::before {
display: none;
}
}
/* Scrolling Project */
.layout-project.scrolling .cool-info,
.layout-project.scrolling .boring-info {
background-image: linear-gradient(#522914, #522914), linear-gradient(#ffff, #0000), linear-gradient(#fff6, #0004), linear-gradient(#522914, #522914), url(/css/window/grey/background.png);
background-color: #522914;
background-repeat: repeat, repeat-x, repeat-x, repeat, repeat;
background-size: auto, auto, auto, auto, auto;
background-blend-mode: soft-light, overlay, overlay, soft-light, normal;
background-position: top left, top left, top left, top left, top left;
border: solid #330f00 1px;
border-image: url(/css/window/outer-frame.png) 1 stretch;
}
.layout-project.scrolling .main-attraction {
background-image: linear-gradient(#7b3e1e, #7b3e1e), url(/css/window/grey/background.png );
background-color: #522914;
background-blend-mode: overlay, normal;
background-repeat: repeat;
background-size: auto;
}
.layout-project.scrolling .cool-info .download-section span {
z-index: -1;
}
.layout-project.scrolling .cool-info .download-section li:hover span {
animation: popOver 200ms;
z-index: 1;
}
@media screen and (min-width: 75rem) {
.layout-project.scrolling {
grid-template-columns: auto 1fr;
grid-template-rows: auto auto auto 30px auto;
grid-template-areas: "title title" "cool-info cool-info" "boring-info boring-info" ". ." "toc main-attraction";
}
.layout-project.scrolling #TableOfContents ul {
position: sticky;
position: -webkit-sticky;
padding-bottom: 0.3pc;
top: 0;
}
}
@media screen and (max-width: 75rem) {
.layout-project.scrolling {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto 30px auto auto;
grid-template-areas: "title" "cool-info" "boring-info" "." "toc" "main-attraction";
}
.layout-project.scrolling #TableOfContents ul {
position: sticky;
position: -webkit-sticky;
width: 40rem;
max-width: 100%;
}
}
@media screen and (max-width: 40rem) {
.layout-project.scrolling #TableOfContents ul {
width: auto;
margin-left: 0;
}
}
.layout-project.comic article > a > img {
max-height: 98vh;
object-fit: contain;
width: 100%;
}
.layout-project.comic article > a + a > img {
margin-top: 0.6pc;
}
@media print {
.layout-project.comic img {
page-break-inside: avoid;
break-inside: avoid;
}
}
body.NSFW .layout-project.scrolling .main-attraction::before {
display: inline-block;
}
body.NSFW .layout-project.scrolling .cool-info::before {
display: none;
}
/* Website Disclaimer */
#dismissDisclaimer:focus-visible + #disclaimer {
outline: solid black 2px;
border: solid white 2px;
}
#disclaimer {
width: 100%;
height: calc(27rem - 20vw);
min-height: 6em;
min-height: 10rem;
max-height: 15em;
}
#dismissDisclaimer {
opacity: 0;
width: 100%;
height: 100%;
}
#dismissDisclaimer:hover + #disclaimer {
filter: brightness(150%);
}
#dismissDisclaimer {
z-index: 1;
}
#dismissDisclaimer:checked + #disclaimer {
height: 0;
min-height: 0;
}
#dismissDisclaimer:checked {
display: none;
}
body.disclaimer {
height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
}
body.disclaimer aside {
width: 100%;
height: 100%;
min-height: 10rem;
max-height: 15em;
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
border: solid #330f00 4px;
border-image: url(/css/button/frame.png) 4 stretch;
padding: 0.3pc;
overflow: hidden;
display: grid;
grid-template-columns: min-content auto;
grid-template-rows: 22pt auto;
column-gap: 0.3pc;
align-items: start;
justify-items: start;
align-content: start;
justify-content: start;
grid-template-areas: "picture heading" "picture content";
}
body.disclaimer aside > .imgLink {
display: initial;
grid-template-columns: initial;
grid-template-rows: initial;
grid-template-areas: initial;
justify-items: initial;
align-items: initial;
}
body.disclaimer aside > .imgLink > img {
width: initial;
}
body.disclaimer aside > .imgLink {
grid-area: picture;
height: 100%;
}
body.disclaimer aside > .imgLink > img {
height: 100%;
max-width: 140pt;
object-position: top;
max-height: 95vh;
max-height: calc(100vh - 4px - 4px - 0.3pc - 0.3pc);
}
body.disclaimer aside > h2 {
font-size: 22pt;
line-height: 22pt;
grid-area: heading;
margin-left: 0.3pc;
text-align: center;
width: 100%;
}
body.disclaimer aside > div {
grid-area: content;
}
body.disclaimer aside > div > p + p {
margin-top: 1em;
}
body.disclaimer aside > div a {
z-index: 90;
}
body.disclaimer::before {
display: none;
}
/* Contact Page */
body:has( > .contact ) {
display: block;
}
.contact {
margin: 0.6pc auto;
background-image: linear-gradient(#fff6, #0000), linear-gradient(#0000, #0008), url(/css/area-background.png);
background-color: #1e331c;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
display: grid;
grid-template-rows: min-content auto;
grid-template-columns: auto auto;
grid-gap: 0.6pc;
grid-template-areas: "header header" "avatar list";
}
.contact > h1 {
grid-area: header;
}
.contact > a {
grid-area: avatar;
}
.contact > ul {
grid-area: list;
}
.contact > .date-label {
grid-area: header;
}
.contact > time {
grid-area: header;
}
.contact h1 {
border: solid #330f00 1px;
border-image: url(/css/window/outer-frame.png) 1 stretch;
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
display: block;
text-align: center;
padding: 0.3pc;
flex-basis: 100%;
padding-bottom: 0;
}
.contact .date-label,
.contact time {
text-align: right;
pointer-events: none;
padding-right: 0.6pc;
margin-bottom: -10pc;
}
@media screen and (prefers-reduced-motion: no-preference) {
.contact .date-label,
.contact time {
transition: opacity 200ms;
}
}
@media screen and (max-width: 40pc) {
.contact .date-label,
.contact time {
opacity: 0;
}
}
.contact .date-label {
line-height: 15.6pt;
}
.contact time {
line-height: 39.6pt;
}
.contact > .avatars {
width: 10pc;
align-items: normal;
grid-template-areas: "image";
}
@media screen and (prefers-reduced-motion: no-preference) {
.contact > .avatars {
transition: width 200ms;
}
}
.contact > .avatars .imgLink {
display: initial;
}
.contact > .avatars img {
border: solid #330f00 4px;
border-image: url(/css/window/inner-frame.png) 4 stretch;
background-size: auto 70%, auto 70%, auto;
background-position: left -3px, left 160%, top left;
margin: 1px 1px;
margin-bottom: 0;
background-color: #170902;
width: 100%;
margin-left: 0.6pc;
}
@media screen and (prefers-reduced-motion: no-preference) {
.contact > .avatars img {
transition: border-width 200ms;
}
}
.contact ul {
list-style: none;
display: flex;
flex-wrap: wrap;
padding: 0;
padding-right: 0.6pc;
padding-bottom: 0.6pc;
align-content: flex-start;
gap: 0.6pc;
}
.contact li {
flex-basis: 18pc;
height: min-content;
flex-grow: 1;
border: solid #330f00 1px;
border-image: url(/css/window/outer-frame.png) 1 stretch;
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
}
.contact li a {
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
border: solid #330f00 4px;
border-image: url(/css/button/frame.png) 4 stretch;
display: inline-block;
min-width: 0.4in;
min-height: 0.4in;
vertical-align: top;
text-align: center;
line-height: 0.28in;
padding-left: 0.3pc;
padding-right: 0.3pc;
width: 100%;
text-align: left;
line-height: inherit;
text-decoration: none;
}
.contact li img {
width: 5pc;
float: left;
display: inline-block;
margin-bottom: -0.3pc;
}
.contact li .title {
margin-bottom: 0.3pc;
text-decoration: underline;
}
.contact li .subtitle {
display: block;
color: #bdb6a5;
}
.contact li:hover {
filter: brightness(150%);
}
@media screen and (max-width: 33pc) {
.contact > .avatars {
width: 0;
}
.contact > .avatars img {
border-width: 0;
padding-left: 0;
}
}
/* search button */
.searchButton {
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
border: solid #330f00 4px;
border-image: url(/css/button/frame.png) 4 stretch;
display: inline-block;
min-width: 0.4in;
min-height: 0.4in;
vertical-align: top;
text-align: center;
line-height: 0.28in;
padding-left: 0.3pc;
padding-right: 0.3pc;
text-align: left;
padding: 0 0.3pc;
}
.searchButton img {
width: 0.8em;
height: 1em;
vertical-align: middle;
margin-right: 0.45pc;
}
.searchButton span {
display: inline-block;
text-decoration: underline;
width: 3.5em;
}
@media screen and (prefers-reduced-motion: no-preference) {
.searchButton span {
transition: width 200ms;
}
}
.searchButton form {
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
border: solid #330f00 4px;
border-image: url(/css/button/frame.png) 4 stretch;
display: inline-block;
min-width: 0.4in;
min-height: 0.4in;
vertical-align: top;
text-align: center;
line-height: 0.28in;
padding-left: 0.3pc;
padding-right: 0.3pc;
}
.searchButton input {
font-size: 12pt;
}
@media screen and (prefers-reduced-motion: no-preference) {
.searchButton input {
transition: width 200ms, padding 200ms, margin-right 200ms;
}
}
.searchButton button {
overflow: hidden;
}
@media screen and (prefers-reduced-motion: no-preference) {
.searchButton button {
transition: width 200ms, padding 200ms;
}
}
@media print {
.header li.searchButton {
display: none;
}
}
.searchButton.closed:hover {
filter: brightness(150%);
}
.searchButton.closed input {
width: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
border-left: 0;
border-right: 0;
}
.searchButton.closed button {
width: 0;
padding-left: 0;
padding-right: 0;
border-left-width: 0;
border-right-width: 0;
}
.searchButton.open {
padding-top: 4px;
border: solid #330f00 1px;
border-image: url(/css/window/outer-frame.png) 1 stretch;
}
.searchButton.open span {
width: 0;
display: inline-block;
}
.searchButton.open input {
width: 10em;
margin-right: 0.3pc;
padding: 1px 0.3pc;
border-top: solid #2e1408 1px;
border-bottom: solid #ba5c2a 1px;
border-left: solid #2e1408 1px;
border-right: solid #ba5c2a 1px;
}
.searchButton.open button {
min-width: 0.4in;
padding-left: 0.15pc;
padding-right: 0.15pc;
}
.searchButton.open a {
pointer-events: none;
}
/* Search Index */
iframe#directory {
max-height: inherit;
}
#search-index {
display: block;
background-image: linear-gradient(#fff6, #0000), linear-gradient(#0000, #0008), url(/css/area-background.png);
background-color: #1e331c;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
height: 100%;
padding-bottom: 0.3pc;
}
#search-index h1 {
position: sticky;
top: 0;
}
#search-index h1,
#search-index h2 {
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
border: solid #330f00 1px;
border-image: url(/css/window/outer-frame.png) 1 stretch;
text-align: center;
}
#search-index ul + h2 {
margin-top: 30px;
}
#search-index ul {
box-shadow: inset 0 3pt 3pt rgba(0, 0, 0, 0.7);
list-style-type: none;
}
#search-index li {
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
border: solid #330f00 4px;
border-image: url(/css/button/frame.png) 4 stretch;
display: inline-block;
min-width: 0.4in;
min-height: 0.4in;
vertical-align: top;
text-align: center;
line-height: 0.28in;
padding-left: 0.3pc;
padding-right: 0.3pc;
}
#search-index li:hover {
filter: brightness(150%);
}
#search-index ul {
display: flex;
flex-wrap: wrap;
gap: 0.3pc;
justify-content: space-evenly;
}
#search-index ul li {
flex-basis: 28%;
min-width: 8em;
}
/* Search Keywords */
#search-keywords {
display: block;
background-image: linear-gradient(#fff6, #0000), linear-gradient(#0000, #0008), url(/css/area-background.png);
background-color: #1e331c;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
height: 100%;
padding-bottom: 0.3pc;
}
#search-keywords h1 {
position: sticky;
top: 0;
z-index: 1;
}
#search-keywords h1,
#search-keywords h2 {
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
border: solid #330f00 1px;
border-image: url(/css/window/outer-frame.png) 1 stretch;
text-align: center;
}
#search-keywords ul + h2 {
margin-top: 30px;
}
#search-keywords ul {
box-shadow: inset 0 3pt 3pt rgba(0, 0, 0, 0.7);
list-style-type: none;
}
#search-keywords ul {
display: flex;
flex-wrap: wrap;
gap: 0.3pc;
justify-content: space-evenly;
}
#search-keywords ul li {
flex-basis: 28%;
min-width: 8em;
}
.keywordButton {
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
border: solid #330f00 1px;
border-image: url(/css/window/outer-frame.png) 1 stretch;
height: 0.66666667in;
min-width: 7pc;
position: relative;
padding: 0;
display: inline-flex;
flex-wrap: wrap;
}
.keywordButton > legend {
white-space: nowrap;
position: absolute;
text-align: center;
top: 0;
width: 100%;
pointer-events: none;
user-select: none;
-webkit-user-select: none;
padding-top: 0.3pc;
}
@media screen and (prefers-reduced-motion: no-preference) {
.keywordButton > legend {
transition-property: font-size, bottom;
transition-duration: 200ms;
}
}
.keywordButton > input {
margin: 0;
appearance: none;
flex: 1 1 auto;
}
.keywordButton > .include,
.keywordButton > .exclude {
border: solid #330f00 4px;
border-image: url(/css/window/inner-frame.png) 4 stretch;
background-size: auto 70%, auto 70%, auto;
background-position: left -3px, left 160%, top left;
margin: 1px 1px;
margin-bottom: 0;
content: "";
pointer-events: none;
position: absolute;
width: 50%;
height: 0.4in;
bottom: 0;
background-repeat: no-repeat;
background-position: center;
background-size: 0.28in;
mix-blend-mode: hard-light;
}
@media screen and (prefers-reduced-motion: no-preference) {
.keywordButton > .include,
.keywordButton > .exclude {
transition-property: width, color;
transition-duration: 200ms;
}
}
.keywordButton > .exclude {
background-image: url("/css/search/keyword-button/exclude.svg");
background-color: #93411a;
left: 0;
}
.keywordButton > .include {
background-image: url("/css/search/keyword-button/include.svg");
background-color: #35582b;
right: 0;
}
.keywordButton > input[value="ignore"] {
order: 3;
}
.keywordButton > input[value="include"] {
order: 4;
}
.keywordButton > input[value="exclude"] {
order: 2;
}
.keywordButton > .include {
width: 25%;
}
.keywordButton > .exclude {
width: 25%;
}
.keywordButton > input[value="exclude"]:hover ~ .exclude {
filter: brightness(150%);
}
.keywordButton > input[value="include"]:hover ~ .include {
filter: brightness(150%);
}
.keywordButton > input[value="ignore"]:hover ~ .include {
filter: brightness(150%);
}
.keywordButton > input[value="ignore"]:hover ~ .exclude {
filter: brightness(150%);
}
.keywordButton > input[value="ignore"]:checked {
flex: 0;
width: 0;
margin-top: 0;
}
.keywordButton > input[value="ignore"]:checked ~ input[value="exclude"] {
flex-grow: 1;
}
.keywordButton > input[value="ignore"]:checked ~ input[value="include"] {
order: 4;
flex-grow: 1;
}
.keywordButton > input[value="ignore"]:checked ~ .exclude {
width: 50%;
}
.keywordButton > input[value="ignore"]:checked ~ .include {
width: 50%;
}
.keywordButton > input[value="include"]:checked {
flex: 0;
width: 0;
margin-top: 0;
order: 1;
}
.keywordButton > input[value="include"]:checked ~ input[value="exclude"] {
flex-grow: 0.25;
}
.keywordButton > input[value="include"]:checked ~ legend {
font-size: 15pt;
bottom: -17pt;
}
.keywordButton > input[value="include"]:checked ~ .include {
width: 75%;
background-color: #73c15d;
}
.keywordButton > input[value="exclude"]:checked {
flex: 0;
width: 0;
margin-top: 0;
}
.keywordButton > input[value="exclude"]:checked ~ legend {
font-size: 9pt;
bottom: -5pt;
}
.keywordButton > input[value="exclude"]:checked ~ .exclude {
width: 75%;
background-color: #ef8e6b;
}
.keywordButton > input:focus-visible:after {
content: "";
width: 99%;
width: calc(100% - (1px * 2));
height: 99%;
height: calc(100% - (1px * 2));
display: inline-block;
outline: solid black 2px;
border: solid white 2px;
position: absolute;
left: -1px;
pointer-events: none;
z-index: 1;
}
/* Search Keyword iframe */
iframe#searchKeywords {
position: fixed;
top: 0;
right: 0;
margin-top: 0.6pc;
height: 98%;
height: calc(100% - 0.6pc);
width: 40rem;
width: calc(100% - 75rem - 0.6pc - 0.6pc);
max-width: 0;
max-height: 0;
z-index: 5;
will-change: opacity;
}
@media screen and (prefers-reduced-motion: no-preference) {
}
@media screen and (max-width: 102.4rem) {
iframe#searchKeywords {
width: 25rem;
margin-top: 54.2px;
height: 90%;
height: calc(100% - 44.6px);
}
}
iframe#searchKeywords.closed {
animation: disableKeyboardFocus 200ms;
visibility: hidden;
}
@media screen and (max-width: 102.4rem) {
iframe#searchKeywords.closed {
max-width: 0;
max-height: 0;
}
iframe#searchKeywords.open {
max-width: 100%;
max-height: 100%;
}
}
@media screen and (min-width: 102.4rem) {
iframe#searchKeywords.closed {
max-width: 0;
max-height: 100%;
}
iframe#searchKeywords.open {
max-width: 100%;
max-height: 100%;
}
}
@media screen and (min-width: 102.4rem) and (prefers-reduced-motion: no-preference) {
iframe#searchKeywords {
transition: max-width 200ms, margin-top 200ms;
}
}
@keyframes disableKeyboardFocus {
0% {
visibility: visible;
}
99% {
visibility: visible;
}
100% {
visibility: hidden;
}
}
/* Layout of 404 error page */
main.error_404 {
display: grid;
grid-template-rows: auto auto auto;
grid-template-columns: 140pt auto;
grid-template-areas: "title title" "icon text" "aside aside";
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
border: solid #330f00 1px;
border-image: url(/css/window/outer-frame.png) 1 stretch;
position: relative;
padding: 4px;
height: min-content;
}
main.error_404 > h1 {
grid-area: title;
text-align: center;
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
border: solid #330f00 4px;
border-image: url(/css/window/inner-frame.png) 4 stretch;
background-size: auto 70%, auto 70%, auto;
background-position: left -3px, left 160%, top left;
margin: 1px 1px;
margin-bottom: 0;
margin-top: -3px;
margin-left: -3px;
margin-right: -3px;
}
main.error_404 > a {
grid-area: icon;
}
main.error_404 p {
grid-area: text;
}
main.error_404 aside {
grid-area: aside;
background-image: linear-gradient(#fff6, #0000), linear-gradient(#0000, #0008), url(/css/area-background.png);
background-color: #1e331c;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
padding: 1em;
margin-top: 0.3pc;
padding-top: 0;
padding-bottom: 0;
box-shadow: inset 0 3pt 3pt rgba(0, 0, 0, 0.7);
}
main.error_404 aside .wb404_imagediv img {
background-color: white;
padding-top: 0.3pc;
float: left;
width: auto;
margin-right: 0.3pc;
margin-bottom: 1em;
}
body.rss {
background: inherit;
display: inherit;
max-width: inherit;
background-image: linear-gradient(#fff6, #0000), linear-gradient(#0000, #0008), url(/css/area-background.png);
background-color: #1e331c;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
}
body.rss > main {
max-width: inherit;
}
body.rss > main {
width: 100%;
}
body.rss > main > h1 {
display: none;
}
body.rss > main > .feedurl {
border: solid #330f00 1px;
border-image: url(/css/window/outer-frame.png) 1 stretch;
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
padding: 0.3pc;
display: flex;
align-items: flex-end;
}
body.rss > main > .feedurl > h3 {
display: inline;
}
body.rss > main > .feedurl > img {
width: auto;
margin-right: 0.3pc;
filter: invert() brightness(0.75) sepia(30%);
padding-bottom: 2pt;
}
body.rss > main > .feedurl > textarea {
flex-grow: 1;
}
body.rss > main > ul::before {
content: "Most recent first";
text-align: center;
display: block;
margin-top: 0.6pc;
margin-bottom: 0.6pc;
}
body.rss > main > ul > li .header h2 {
display: none;
}
body.rss > main > ul > li,
ul.rss > li {
margin-top: 0.6pc;
}
body.rss > main > ul > li:first-child,
ul.rss > li:first-child {
margin-top: 0.3pc;
}
body.rss > main > ul > li,
ul.rss > li {
border: solid #330f00 1px;
border-image: url(/css/window/outer-frame.png) 1 stretch;
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
display: block;
list-style: none;
font-size: 12pt;
}
body.rss > main > ul > li .header,
ul.rss > li .header {
background-image: linear-gradient(#fffa, #0000), linear-gradient(#0000, #000b), url(/css/window/background.png);
background-color: #522914;
background-repeat: repeat-x, repeat-x, repeat;
background-size: auto, auto, auto;
background-blend-mode: overlay, overlay, normal;
background-position: top left, top left, top left;
display: flex;
justify-content: space-between;
}
body.rss > main > ul > li .header h2,
ul.rss > li .header h2 {
flex-shrink: 1;
flex-basis: auto;
}
body.rss > main > ul > li .header time,
ul.rss > li .header time {
flex-shrink: 0;
flex-basis: max-content;
}
body.rss > main > ul > li .description > div,
ul.rss > li .description > div {
display: flex;
flex-wrap: wrap;
row-gap: 0.3pc;
justify-content: space-between;
padding-top: 0.3pc;
box-shadow: inset 0 3pt 3pt rgba(0, 0, 0, 0.7);
}
body.rss > main > ul > li .description > div p,
ul.rss > li .description > div p {
flex-shrink: 0;
margin-bottom: 0.3pc;
overflow: hidden;
word-wrap: break-word;
word-break: break-word;
}
@media screen and (min-width: 40rem) {
body.rss > main > ul > li .description > div p,
ul.rss > li .description > div p {
flex-basis: 49%;
}
}
@media screen and (max-width: 40rem) {
body.rss > main > ul > li .description > div p,
ul.rss > li .description > div p {
flex-basis: 100%;
}
}
body.rss > main > ul > li .description > div p a,
ul.rss > li .description > div p a {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
body.rss > main > ul > li .description > div p:only-child,
ul.rss > li .description > div p:only-child {
flex-basis: 100%;
}
@media screen and (min-width: 40rem) {
body.rss > main > ul > li .description > div > img,
ul.rss > li .description > div > img,
body.rss > main > ul > li .description > div > video,
ul.rss > li .description > div > video {
object-fit: contain;
max-height: 20pc;
width: 49%;
flex-grow: 0;
border: solid #330f00 4px;
border-image: url(/css/window/inner-frame.png) 4 stretch;
background-size: auto 70%, auto 70%, auto;
background-position: left -3px, left 160%, top left;
margin: 1px 1px;
margin-bottom: 0;
background-color: #170902;
}
body.rss > main > ul > li .description > div > a,
ul.rss > li .description > div > a {
width: 49%;
flex-grow: 0;
border: solid #330f00 4px;
border-image: url(/css/window/inner-frame.png) 4 stretch;
background-size: auto 70%, auto 70%, auto;
background-position: left -3px, left 160%, top left;
margin: 1px 1px;
margin-bottom: 0;
background-color: #170902;
}
body.rss > main > ul > li .description > div > a > img,
ul.rss > li .description > div > a > img {
object-fit: contain;
max-height: 20pc;
display: inline-block;
height: 100%;
}
body.rss > main > ul > li .description > div > a:first-child,
ul.rss > li .description > div > a:first-child {
width: 100%;
}
body.rss > main > ul > li .description > div > a:last-of-type:nth-of-type(even),
ul.rss > li .description > div > a:last-of-type:nth-of-type(even),
body.rss > main > ul > li .description > div > img:last-of-type:nth-of-type(even),
ul.rss > li .description > div > img:last-of-type:nth-of-type(even),
body.rss > main > ul > li .description > div > video:last-of-type:nth-of-type(even),
ul.rss > li .description > div > video:last-of-type:nth-of-type(even) {
flex-grow: 1;
}
}
@media screen and (max-width: 40rem) {
body.rss > main > ul > li .description > div > img,
ul.rss > li .description > div > img,
body.rss > main > ul > li .description > div > video,
ul.rss > li .description > div > video {
object-fit: contain;
max-height: 20pc;
width: 100%;
flex-grow: 1;
border: solid #330f00 4px;
border-image: url(/css/window/inner-frame.png) 4 stretch;
background-size: auto 70%, auto 70%, auto;
background-position: left -3px, left 160%, top left;
margin: 1px 1px;
margin-bottom: 0;
background-color: #170902;
}
body.rss > main > ul > li .description > div > a,
ul.rss > li .description > div > a {
width: 100%;
flex-grow: 1;
border: solid #330f00 4px;
border-image: url(/css/window/inner-frame.png) 4 stretch;
background-size: auto 70%, auto 70%, auto;
background-position: left -3px, left 160%, top left;
margin: 1px 1px;
margin-bottom: 0;
background-color: #170902;
}
body.rss > main > ul > li .description > div > a > img,
ul.rss > li .description > div > a > img {
object-fit: contain;
max-height: 20pc;
}
}
body.rss > main > ul > li .description > div::after,
ul.rss > li .description > div::after {
clear: both;
content: "";
display: block;
}
