/* FONT */
@font-face {
font-family:'Special Elite';
src:url(fonts/specialelite-regular-webfont.woff) format('woff');
}

/* RESET */
*{box-sizing:border-box;}

img{max-width:100%;height:auto;display:block;}

html,body{
margin:0;
padding:0;
min-height:100vh;
font-size:16px;
}

/* BACKGROUND */
body{
background:linear-gradient(
180deg,
#f3dcc4 10%,
#f6f1e8 40%,
#f6f1e8 75%
);
font-family:"Courier Prime",monospace;
display:flex;
align-items:center;
justify-content:center;
padding:60px 0;
image-rendering:pixelated;
}

/* FRAME */
.frame{
width:1000px;
background:#f6f1e8;

border:8px solid;
border-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><rect width="16" height="16" fill="%23efe7da" stroke="%23d8cfc2"/></svg>') 8;

box-shadow:
inset 0 0 0 1px #d8cfc2,
0 0 0 16px rgba(239,231,218,.5);

padding:30px;
margin:0 auto;
}

/* TABLE */
table.geocities{
width:100%;
border-collapse:collapse;
}

/* LEFT COLUMN */

.leftcol{
width:300px;
vertical-align:top;
position:relative;
padding-right:25px;
border-right:1px solid #e3d9cc;
overflow:hidden;
}

.left-art{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
filter:grayscale(35%) contrast(95%) brightness(98%);
}

/* MIDDLE */

.midcol{
width:500px;
vertical-align:top;
padding:0 25px;
}

.content-box{
margin-bottom:25px;
padding-bottom:20px;
border-bottom:1px solid #e6ded2;
}

.content-inner{
font-size:13px;
line-height:1.6;
color:#3e3832;
}

.content-inner h1{
font-family:'Special Elite',cursive;
font-size:17px;
text-align:center;
margin:0 0 12px 0;
border-bottom:1px solid #d8cfc2;
padding-bottom:6px;
letter-spacing:1px;
}

/* RIGHT COLUMN */

.rightcol{
width:180px;
vertical-align:top;
padding-left:25px;
border-left:1px solid #e3d9cc;

font-family:'Special Elite',monospace;
font-size:11px;
line-height:1.0;
letter-spacing:.5px;

color:#7a6f61;
}

.rightcol a{
font-size:13px;
font-weight:bold;
color:#5a4d3f;
}

/* NAV */

.nav-box{
margin-bottom:20px;
}

.nav-box small{
font-style:italic;
font-size:10px;
opacity:.7;
display:block;
margin-bottom:6px;
}

.nav-link{
display:block;
margin:5px 0;
letter-spacing:.5px;
color:#7a6f61;
}

.nav-link::before{
content:"– ";
opacity:.6;
}

/* LINKS */

a{
color:#6d5f4d;
text-decoration:none;
}

a:hover{
opacity:.6;
}

/* META */

.meta{
font-size:10px;
margin-top:15px;
opacity:.8;
}

.small{
font-size:10px;
margin-top:10px;
}

/* SCROLL AREA */

.webringscroll{
padding-right:5px;
overflow:scroll;
overflow-x:hidden;
height:30em;
}

/* media images watchlog */

.media{
position:relative;
overflow:hidden;
width:110px;
}

.media img{
width:110px;
border:2px solid #000;
display:block;
transition:transform .25s ease;
image-rendering:pixelated;
}

.media-caption{
position:absolute;
bottom:0;
left:0;
width:100%;

background:rgba(0,0,0,.75);
color:#fff;

font-size:10px;
font-family:"Courier Prime", monospace;

padding:4px 3px;
text-align:center;

opacity:0;
transform:translateY(6px);
transition:opacity .2s ease, transform .2s ease;
}

.medias{
display:grid;
grid-template-columns:repeat(auto-fill,110px);
gap:12px;
justify-content:center;
margin-top:10px;
}



.media:hover .media-caption{
opacity:1;
transform:translateY(0);

}

/* SELECTION */

::selection{
color:#ed7c68;
background-color:#ffdfc4;
}

/* SCROLLBAR */

::-webkit-scrollbar{
width:16px;
height:16px;
}

::-webkit-scrollbar-thumb{
background:#d6cfc2;
border:1px solid #b9b0a2;
}

/* DARK MODE */

html[data-dark] body{
background:linear-gradient(
180deg,
#1c1b1a 10%,
#121212 40%,
#0b0b0b 75%
);
}

html[data-dark] .frame{
background:#111;
border-color:#444;
box-shadow:0 0 0 8px #1c1c1c;
}

html[data-dark] .content-inner{
color:#d6d1c8;
}

html[data-dark] .nav-link,
html[data-dark] .rightcol{
color:#b8ad9c;
}

html[data-dark] a{
color:#d6c6a1;
}

/* RESPONSIVE */
@media (max-width:900px){
  .frame{ width:95%; padding:20px; }
  table.geocities, tbody, tr { display:block; width:100%; }
  .leftcol,.midcol,.rightcol{
    display:block;
    width:100%;
    border:none;
    padding:0;
    margin-bottom:25px;
  }
  .left-art{
    height:auto;
    object-fit:contain;
  }
}
         ::-webkit-scrollbar {
         width: 16px;
         height: 16px;
         }
         ::-webkit-scrollbar-track {
         background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFElEQVQIW2M4fPz0////GYAYyAIASnoKpV3w4kgAAAAASUVORK5CYII=");
         image-rendering: pixelated;
         -webkit-filter: grayscale(100%);
         -moz-filter: grayscale(100%);
         -ms-filter: grayscale(100%);
         -o-filter: grayscale(100%);
         filter: grayscale(100%);
         }
         ::-webkit-scrollbar-track:active {
         background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFElEQVQIW2M4fPz0////GYAYyAIASnoKpV3w4kgAAAAASUVORK5CYII=");
         -webkit-filter: grayscale(100%);
         -moz-filter: grayscale(100%);
         -ms-filter: grayscale(100%);
         -o-filter: grayscale(100%);
         filter: grayscale(100%);
         }
         ::-webkit-scrollbar-thumb {
         border-top: 1px solid #cccccc;
         border-left: 1px solid #cccccc;
         border-right: 1px solid black;
         border-bottom: 1px solid black;
         box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
         width: 16px;
         height: 16px;
         background-color: #cccccc;
         z-index: 1;
         }
         ::-webkit-scrollbar-corner {
         background-color: #cccccc;
         }
         ::-webkit-resizer {
         width: 16px;
         height: 16px;
         background-color: #cccccc;
         background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR4Ae3MgQUAMBRDwU5fFF05lb/CARTBw2Ulof0DxPtcwp3hNuEYnjbcEW4TjuFpwx3h9gMWGgZ2Y/PT2gAAAABJRU5ErkJggg==");
         background-position: bottom right;
         background-repeat: no-repeat;
         image-rendering: pixelated;
         }
         ::-webkit-scrollbar-button,
         .scroll::-webkit-scrollbar-button {
         border-top: 1px solid #cccccc;
         border-left: 1px solid #cccccc;
         border-right: 1px solid black;
         border-bottom: 1px solid black;
         box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
         display: block;
         width: 16px;
         height: 16px;
         background-color: #cccccc;
         image-rendering: pixelated;
         background-repeat: no-repeat;
         background-position: center center;
         }
         ::-webkit-scrollbar-button:active,
         .scroll::-webkit-scrollbar-button:active {
         background-position: 2px 2px;
         }
         ::-webkit-scrollbar-button:horizontal:decrement,
         .scroll::-webkit-scrollbar-button:horizontal:decrement {
         background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHklEQVQY02NgoBT8xyX8H5fwf1zCpOjAYwceV1EEAAO2D/HsQ4vsAAAAAElFTkSuQmCC");
         }
         ::-webkit-scrollbar-button:horizontal:increment,
         .scroll::-webkit-scrollbar-button:horizontal:increment {
         background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHUlEQVQY02NgIB/8xy3xH7fEf9wS/0nUQZqrKAYAK44P8ZRmzLQAAAAASUVORK5CYII=");
         }
         ::-webkit-scrollbar-button:vertical:decrement,
         .scroll::-webkit-scrollbar-button:vertical:decrement {
         background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGklEQVR4AWMYxuA/SYphmETFhDX9x4mHGQAAcL4P8dQiMq8AAAAASUVORK5CYII=");
         }
         ::-webkit-scrollbar-button:vertical:increment,
         .scroll::-webkit-scrollbar-button:vertical:increment {
         background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAF0lEQVQY02NgoBf4jwJxSOHQhcNAOgMAWWAP8Rv2U3UAAAAASUVORK5CYII=");
         }
         ::-webkit-scrollbar-button:horizontal:increment:start,
         .scroll::-webkit-scrollbar-button:horizontal:increment:start {
         display: none;
         }
         ::-webkit-scrollbar-button:horizontal:decrement:end,
         .scroll::-webkit-scrollbar-button:horizontal:decrement:end {
         display: none;
         }
         ::-webkit-scrollbar-button:vertical:increment:start,
         .scroll::-webkit-scrollbar-button:vertical:increment:start {
         display: none;
         }
         ::-webkit-scrollbar-button:vertical:decrement:end,
         .scroll::-webkit-scrollbar-button:vertical:decrement:end {
         display: none;
         }
         ::-webkit-scrollbar-button:active,
         .scroll::-webkit-scrollbar-button:active {
         border-top: 1px solid #868a8e;
         border-left: 1px solid #868a8e;
         border-bottom: 1px solid #868a8e;
         border-right: 1px solid #868a8e;
         box-shadow: none;
         }  
        /* --- UPDATE BOX --- */
        .update-box {
            border: 20px solid transparent;
            border-image-source: url("../images/borders/13.png");
            border-image-slice: 100;
            border-image-repeat: round;
            border-image-outset: 0px;
        }

        .update-box h2 {
            font-family: 'Special Elite', cursive;
            font-size: 13px;
            margin: 8px 0 8px 0;
            text-align: center;
        }

        .update-box ul {
            font-family: "Courier Prime", monospace;
            font-size: 10px;
            line-height: 1.4;
            padding-left: 14px;
            margin: 0;
        }
         .dark-toggle {
         text-align: center;
         margin-bottom: 6px;
         }
         .dark-toggle button {
         font-family: "Courier Prime", monospace;
         font-size: 11px;
         padding: 2px 6px;
         background: #fff;
         border: 1px solid #000;
         color: #000;
         cursor: pointer;
         }
         html[data-dark] body {
         background: linear-gradient(180deg,
         #1c1b1a 10%,
         #121212 40%,
         #0b0b0b 75%);
         color: #eaeaea;
         }
         html[data-dark] table.geocities,
         html[data-dark] .leftcol,
         html[data-dark] .midcol,
         html[data-dark] .content-box {
         background: #111;
         border-color: #555;
         }
         html[data-dark] a {
         color: #d6c6a1;
         }
         html[data-dark] #feed-reader .feed-entry {
         background-image: url("images/blogbg-dark.jpg");
         }