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

body {
margin: 0px;
padding: 32px 15px;
font-family: Arial, Tahoma, sans-serif;
font-size: 11px;
line-height: 1.35;
color: #777;
background:
    url(/assets/stars-anim.gif) no-repeat top center,
    radial-gradient(circle,#e0f3f2 0%,#edf8f7 38%,transparent 68%) center 80px / 800px 800px no-repeat,
    #f4f4f4;}
  
 

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

a:hover {color: #555;}

b {color: #666;}
i {font:italic 11px georgia; color:#aaa;letter-spacing:1px;}

.clock {
display: block;
margin: 0px auto 5px;
border: 0px;}
  


/* Scanline animation */  
  
.bg-animation {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 300;
opacity: 0.10;}

.bg-animation:before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(
to bottom,
transparent 50%,
rgba(90, 120, 130, 0.42) 51%);
background-size: 100% 4px;
animation: scanlines 0.2s linear infinite;}

@keyframes scanlines {
from {background:linear-gradient(
to bottom,
transparent 50%,
rgba(90, 120, 130, 0.42) 51%);
background-size: 100% 4px;}
to {background:
linear-gradient(
to bottom,
rgba(90, 120, 130, 0.22) 50%,
transparent 51%);
background-size: 100% 4px;}
}



/* The layout */

.container {
max-width: 760px;
margin: auto;}
  
.layout {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 8px;}

.sidebar {
width: 160px;
flex-shrink: 0;}

.main {
min-width: 0;
flex: 1;}
  
  
  
/* Header */
  
.small-icon {
width: 62px;
height: 62px;
flex-shrink: 0;
border: 1px solid #cde0e0;
border-radius: 8px;
background: #f7f7f7;
padding: 4px;
overflow: hidden;
box-shadow:
inset 1px 1px 0 #ffffff,
inset -1px -1px 0 #e7f0f0;}

.small-icon img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
border-radius: 5px;
opacity:0.85;
filter:grayscale(40%);}  
  

.header {
position: relative;
overflow: hidden;
background: #fcffff;
border: 1px solid #c9dfe0;
border-left:5px solid #aaa;
border-radius: 10px 90px 90px 4px;
padding: 14px;
box-shadow:inset 1px 1px 0 #ffffff,
inset 2px 2px 0 #f5f7f8,
inset -1px -1px 0 #e4f0f0,
0 2px 6px #dce9e9;}
  

.header-inner {
display: flex;
align-items: center;
gap: 15px;
padding-right: 48px;}
  
.header-content {flex: 1;}
  

 
.site-name {
margin-bottom: 2px;
font-family: Georgia, arial, tahoma;
font-size: 25px;
line-height: 1;
color: #ccc;
letter-spacing: -1px;}

.slogan {
margin-bottom: 7px;
color: #aaa;}

.news {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
background: #fafafa;
border: 1px solid #e4f0f0;
border-left: 3px solid #b7dde0;
color: #888;
margin-right: 10px;
border-radius: 0 10px 10px 0;
box-shadow:inset 1px 1px 0 #ffffff,
inset -1px -1px 0 #eef1f2;}

.news img {
flex-shrink: 0;}

.news marquee { /* use <marquee direction="right" scrollamount="3">text</marquee> to add this. */
 min-width: 0;
flex: 1;}



/* Music player- */

.cd-player {
position: absolute;
top: 50%;
right:-55px;
width: 110px;
height: 110px;
transform: translateY(-50%);
cursor: pointer;
z-index: 3;}

.cover {
width: 110px;
height: 110px;
display: block;
object-fit: contain;
opacity: 0.78;
filter: grayscale(35%);
animation: cd-spin 7s linear infinite;
transition: opacity 0.2s ease;}

.cd-player:hover .cover,
.cd-player:focus .cover {
opacity: 0.62;
animation-play-state: paused;}

.music-info {
position: absolute;
top: 10px;
right: 70px;
width: 145px;
padding: 6px 9px;
background: #fbfcfd;
border: 1px solid #c9dfe1;
border-radius: 7px;
box-shadow:
inset 1px 1px 0 #ffffff,
inset -1px -1px 0 #e9f2f2,
0 1px 3px #e7f0f0;
opacity: 0.88;
z-index: 2;
pointer-events: none;
text-align: right;}

.song {
overflow: hidden;
color: #81939c;
font-size: 10px;
font-weight: bold;
white-space: nowrap;
text-overflow: ellipsis;}

.artist {
margin-top: 2px;
overflow: hidden;
color: #999;
font-size: 10px;
white-space: nowrap;
text-overflow: ellipsis;}

@keyframes cd-spin {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}




/* Navi */

.nav {
position: relative;
z-index: 20;
margin-top: 7px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2px;
padding: 6px 10px;
background: #fff;
border: 1px solid #c9dede;
border-radius: 4px;
box-shadow:
inset 1px 1px 0px #ffffff,
inset -1px -1px 0px #e6efef,
0 2px 4px #dfeaea;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 1px;}

.nav-link,
.nav details {
flex: 1;
min-width: 0;
text-align: center;}

.nav-link {
display: block;
padding: 4px 5px;}

.nav details {
position: relative;}

.nav summary {
padding: 4px 5px;
color: #6eaabb;
cursor: pointer;
list-style: none;}

.nav summary::-webkit-details-marker {
display: none;}

.nav summary:hover {
color: #555;}

.nav summary:after {
content: " +";
color: #bbb;
font-size: 10px;}

.nav details[open] summary {
color: #555;}

.nav details[open] summary:after {
    content: " −";}

.dropdown {
position: absolute;
top: 23px;
left: 50%;
width: 120px;
transform: translateX(-50%);
padding: 5px 7px;
background: #fff;
border: 1px solid #e5e5e5;
border-top: 2px solid #9dc9d3;
box-shadow: 0px 2px 4px #e1e1e1;
text-align: left;
text-transform:none;
letter-spacing: 0px;
z-index: 30;}

.dropdown-image, .arrow {
filter:grayscale(100%);
margin-right:5px;}

.dropdown a {
display: block;
padding: 3px 2px;
border-bottom: 1px dotted #ddd;}

.dropdown a:last-child {
    border-bottom: 0;}

.dropdown a:hover {
color: #555;
background: #f8f8f8;}




/* Boxes + titles */

.box {
margin-bottom: 8px;
background: #fff;
border: 1px solid #cde0e0;
border-radius: 7px;
box-shadow:
inset 1px 1px 0 #ffffff,
inset -1px -1px 0 #e8f0f0,
0 2px 4px #dfe9e9;
overflow: hidden;}
  
.content {
padding: 8px;
box-shadow: inset 0 1px 2px #eef5f5;}

.title {
display: flex;
align-items: center;
gap: 5px;
padding: 5px 8px;
background: #f9f9f9;
border-bottom: 1px solid #cde0e0;
box-shadow:
inset 0 1px 0 #ffffff,
inset 0 -1px 0 #e8f1f1;
color: #999;
letter-spacing:1px;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;}

.title-controls {
margin-left: auto;
display: flex;
align-items: center;
gap: 4px;}

.title-controls img {
height: 9px;
display: block;
filter: grayscale(100%);
opacity:0.8;}



/* Calendar */

.calendar-content {
padding: 6px;
box-shadow: inset 0 1px 2px #eef5f5;}

.calendar-month {
margin-bottom: 5px;
text-align: center;
color: #888;
font-size: 10px;
font-weight: bold;}

.calendar {
width: 100%;
table-layout: fixed;
border-spacing: 2px;}

.calendar th {
height: 15px;
padding: 0;
background: #f1f1f1;
border: 1px solid #ddd;
border-radius: 3px;
color: #888;
font-size: 8px;
line-height: 13px;
text-align: center;}

.calendar td {
height: 16px;
padding: 0;
background: #fafafa;
border: 1px solid #e0e0e0;
border-radius: 3px;
color: #999;
font-size: 8px;
line-height: 14px;
text-align: center;}

.calendar td.empty {
background: #f7f7f7;
color: #ccc;}

.calendar td.today {
background: #dceef2;
border-color: #a9cfd8;
color: #508fa0;
font-weight: bold;}

  
  
/* Profile */

.profile {
text-align: center;}

.avatar {
width: 72px;
height: 72px;
margin: 0px auto 10px;
display: block;
object-fit: cover;
background: #fff;}

  
  
/* Offsite  */

.links a {
display: block;
padding: 3px 5px;
border-bottom: 1px dotted #ddd;}

.links a:last-child {
border-bottom: 0;}


/* Currently and credits  */

.currently, .info {
padding: 3px 0;
border-bottom: 1px dotted #ddd;}

.currently:last-child, .info:last-child {
border-bottom: 0;}

.label {
color: #666;
font-weight:bold;}
  
  

/* Site stats  */

.stats {
background: #fbfbfb;
border: 1px solid #eee;}

.stat {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
padding: 5px 6px;
border-bottom: 1px dotted #d9d9d9;}

.stat:last-child {
border-bottom: 0;}

.stat-label {
color: #aaa;
font-size: 9px;
letter-spacing: 0.5px;
text-transform: uppercase;}

.stat-info {
color: #777;
text-align: right;}







/* Main / welcome */

.welcome {
padding: 10px 12px 8px;}

.welcome-title {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 1px;
font-family: Georgia, "Times New Roman", serif;
font-size: 22px;
color: #6eaabb;
line-height: 1;}

.welcome-subtitle {
padding-bottom: 5px;
margin-bottom: 7px;
border-bottom: 1px dotted #ddd;
color: #aaa;
font-size: 9px;
letter-spacing: 1px;
text-transform: uppercase;}

  
 

/* Small columns */

.columns {
display: flex;
gap: 8px;
margin-bottom: 8px;}

.small-box {
flex: 1;
min-width: 0;
background: #fff;
border: 1px solid #cde0e0;
border-radius: 7px;
box-shadow:
inset 1px 1px 0px #ffffff,
inset -1px -1px 0px #e8f0f0,
0 2px 4px #dfe9e9;
overflow: hidden;}

.small-content {
padding: 7px 8px;
box-shadow: inset 0px 1px 2px #eef5f5;}

.small-content p {
margin: 3px 0px;}
  
  
  

/* Updates */

.update {
padding: 7px 0px;
border-bottom: 1px dotted #ddd;}

.update:first-child {
padding-top: 0px;}

.update:last-child {
padding-bottom: 0px;
border-bottom: 0px;}

.date {
margin-bottom: 2px;
color: #6eaabb;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;}
  
  
  

/* Miniblog */

.miniblog {
padding: 8px;}

.blog-entry {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 7px 0px;
border-bottom: 1px dotted #ddd;}

.blog-entry:first-child {
padding-top: 0px;}

.blog-entry:last-child {
padding-bottom: 0px;
border-bottom: 0px;}

.blog-thumb {
width: 48px;
height: 48px;
flex-shrink: 0;
object-fit: cover;
padding: 2px;
background: #fff;
border: 1px solid #ddd;
opacity:0.8;
filter:grayscale(30%);}

.blog-text {
min-width: 0;
flex: 1;}

.blog-date {
margin-bottom: 1px;
color: #aaa;
font-size: 10px;
letter-spacing: 0.5px;
text-transform: uppercase;}

.blog-title {
margin-bottom: 2px;
color: #666;
font-weight: bold;}

.blog-entry p {
margin: 0px;}
  
  
  

/* Gallery */

.gallery {
display: flex;
flex-wrap: wrap;
gap: 6px;}

.gallery a {
flex: 1 1 0;
min-width: 0;}

.gallery img {
width: 100%;
height: 76px;
display: block;
object-fit: cover;
padding: 4px;
opacity:0.5;
background: #fff;
border: 1px solid #ddd;}

.gallery img:hover {
border-color: #9dc9d3;}
  
  
  


/* Footer */

.footer {
margin-top: 8px;
padding: 3px;
text-align: center;
color: #aaa;
background: #fff;
font-weight: bold;
border: 1px solid #cde0e0;
border-radius: 7px;
box-shadow:
inset 1px 1px 0px #ffffff,
inset -1px -1px 0px #e8f0f0,
0px 2px 4px #dfe9e9;}

  
  
  
/* Responsiveness */

@media (max-width: 600px) {

body {
padding: 25px 12px;}

.header {
padding: 12px;
border-radius: 10px 90px 90px 4px;}

.header-inner {
align-items: center;
gap: 10px;
padding-right: 42px;}

.small-icon {
width: 58px;
height: 58px;}

.header-content {
min-width: 0;}

.site-name {
font-size: 20px;
line-height: 1;}

.slogan {
margin-bottom: 0px;
font-size: 9px;
line-height: 1.35;}

.news {
display: none;}

.cd-player {
right: -47px;
width: 94px;
height: 94px;}

.cover {
width: 94px;
height: 94px;}

.music-info {
display: none;}

.layout {
flex-direction: column;}

.main {
width: 100%;
order: 1;}

.sidebar {
width: 100%;
order: 2;}

.nav {
flex-wrap: wrap;}

.nav-link,
.nav details {
flex: 1 1 30%;}

.dropdown {
width: 110px;}

.columns {
flex-direction: column;}

.gallery a {
flex: 1 1 calc(50% - 6px);}

.gallery img {
height: 100px;}
}



/* ===== Dark mode overrides (original light styles above are unchanged; remove this block to revert) ===== */

:root {color-scheme: dark;}

body {
color: #b5b5bd;
background: #e6edf6 url("/images/background.png") center / cover fixed;}

/* slight dim so the (light) old background sits comfortably behind dark panels */
body:before {
content: '';
position: fixed;
inset: 0;
background: rgba(8, 10, 16, 0.45);
pointer-events: none;
z-index: 0;}
.container {position: relative; z-index: 1;}

a {color: #7fc0d1;}
a:hover {color: #e4e4ea;}
b {color: #d0d0d8;}
i {color: #8c8c98;}

::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {background: #12141a;}
::-webkit-scrollbar-thumb {background: #3a3f4b; border: 2px solid #12141a;}

.bg-animation {display: none;} /* animated scanline overlay removed: it flickered over the background (restore: delete this line) */
.bg-animation:before {animation: none;}

.header, .nav, .box, .small-box, .footer {
background: rgba(22, 24, 31, 0.92);
border-color: #343945;
box-shadow:
inset 1px 1px 0 #2a2e38,
inset -1px -1px 0 #0d0e12,
0 2px 8px rgba(0, 0, 0, 0.55);}
.header {border-left-color: #555a66;}

.small-icon {
background: #1c1f27;
border-color: #343945;
box-shadow: inset 1px 1px 0 #2a2e38, inset -1px -1px 0 #0d0e12;}

.site-name {color: #d8d8e0;}
.slogan {color: #8c8c98;}

.news {
background: #1b1e26;
border-color: #343945;
border-left-color: #3f7f8c;
color: #a0a0ab;
box-shadow: inset 1px 1px 0 #2a2e38, inset -1px -1px 0 #0d0e12;}

.music-info {
background: #1b1e26;
border-color: #343945;
box-shadow: inset 1px 1px 0 #2a2e38, inset -1px -1px 0 #0d0e12, 0 1px 3px rgba(0,0,0,.5);}
.song {color: #9fb7c0;}
.artist {color: #8c8c98;}

.nav summary {color: #7fc0d1;}
.nav summary:hover, .nav details[open] summary {color: #e4e4ea;}
.nav summary:after {color: #777;}
.dropdown {
background: #1b1e26;
border-color: #343945;
border-top-color: #3f7f8c;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);}
.dropdown a {border-bottom-color: #343945;}
.dropdown a:hover {color: #e4e4ea; background: #262a34;}

.content, .calendar-content, .small-content {box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);}
.title {
background: #1b1e26;
border-bottom-color: #343945;
box-shadow: inset 0 1px 0 #2a2e38, inset 0 -1px 0 #0d0e12;
color: #8c8c98;}
.title-controls img {filter: grayscale(100%) invert(1);}

.calendar-month {color: #a0a0ab;}
.calendar th {background: #232730; border-color: #343945; color: #a0a0ab;}
.calendar td {background: #1b1e26; border-color: #2e323d; color: #8c8c98;}
.calendar td.empty {background: #15171d; color: #4a4e59;}
.calendar td.today {background: #1d3a42; border-color: #3f7f8c; color: #8fd3e3;}

.avatar {background: #1c1f27;}

.links a, .currently, .info, .update, .blog-entry, .welcome-subtitle {border-bottom-color: #343945;}
.links a:last-child, .currently:last-child, .info:last-child {border-bottom: 0;}
.update:last-child, .blog-entry:last-child {border-bottom: 0;}
.label {color: #c8c8d0;}

.stats {background: #1b1e26; border-color: #343945;}
.stat {border-bottom-color: #343945;}
.stat-label {color: #8c8c98;}
.stat-info {color: #b5b5bd;}

.welcome-title {color: #7fc0d1;}
.welcome-subtitle {color: #8c8c98;}
.date {color: #7fc0d1;}

.blog-thumb {background: #1c1f27; border-color: #343945; opacity: 0.85;}
.blog-date {color: #8c8c98;}
.blog-title {color: #d0d0d8;}

.gallery img {background: #1c1f27; border-color: #343945; opacity: 0.7;}
.gallery img:hover {border-color: #3f7f8c; opacity: 1;}

.footer {color: #8c8c98;}

#local-clock {color: #9a9aa6 !important; text-shadow: 0 0 4px rgba(0,0,0,.8);}
img[src$="tama-poop.webp"] {border-color: #343945 !important;}

/* ===== Sub-page additions (guestbook, forum, status): same dark look as the home page ===== */
.nav-link.current {color: #e4e4ea;}
.content-title {display: block; margin: 0 0 8px; padding: 5px 8px; background: #1b1e26; border: 1px solid #343945; border-left: 3px solid #3f7f8c; color: #8c8c98; letter-spacing: 1px; font-size: 10px; font-weight: bold; text-transform: uppercase;}
.sub .box {padding: 10px;}
.sub label {display: block; margin: 6px 0 2px; color: #c8c8d0; font-weight: bold;}
.sub form {display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px;}
.sub input[type=text], .sub textarea, .sub select {font: 12px Arial, Tahoma, sans-serif; color: #d0d0d8; background: #12141a; border: 1px solid #343945; border-radius: 4px; padding: 5px 7px; width: 100%; box-shadow: inset 0 1px 2px rgba(0,0,0,.5);}
.sub select {width: auto;}
.sub input:focus, .sub textarea:focus, .sub select:focus {outline: none; border-color: #3f7f8c;}
.sub textarea {min-height: 80px; resize: vertical;}
.sub button {align-self: flex-start; margin-top: 6px; font: bold 10px Arial, Tahoma, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #7fc0d1; background: #1b1e26; border: 1px solid #343945; border-radius: 4px; padding: 6px 12px; cursor: pointer; box-shadow: inset 1px 1px 0 #2a2e38, inset -1px -1px 0 #0d0e12;}
.sub button:hover {color: #e4e4ea; background: #262a34; border-color: #3f7f8c;}
.hp {position: absolute; left: -9999px; height: 0; overflow: hidden;}
#gb-status, #fm-status {min-height: 1.2em; color: #7fc0d1;}
.gb-entry {border-top: 1px dashed #343945; padding: 7px 0;}
.gb-meta, .fm-meta {color: #8c8c98; font-size: 10px;}
.gb-msg, .fm-msg {white-space: pre-wrap; overflow-wrap: anywhere; color: #b5b5bd;}
/* forum */
#forum .fm-stats {background: #1b1e26; border: 1px solid #343945; padding: 5px 10px; margin-bottom: 8px; color: #a0a0ab;}
#forum .fm-crumbs {margin-bottom: 8px; color: #8c8c98;}
#forum .fm-layout {display: flex; gap: 12px; align-items: flex-start;}
#forum .fm-side {width: 160px; flex: none;}
#forum .fm-mainpane {flex: 1; min-width: 0;}
#forum .fm-sidetitle {background: #1b1e26; border: 1px solid #343945; border-left: 3px solid #3f7f8c; color: #8c8c98; padding: 4px 8px; margin-bottom: 4px; font-size: 10px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase;}
#forum .fm-cats {list-style: none; margin: 0 0 10px; padding: 0;}
#forum .fm-cats li a {display: flex; justify-content: space-between; padding: 3px 8px; border-left: 3px solid transparent;}
#forum .fm-cats li a:hover {background: #262a34;}
#forum .fm-cats li a.on {border-left-color: #3f7f8c; background: #1b1e26; color: #e4e4ea;}
#forum .fm-cats .n {color: #8c8c98;}
#forum .fm-primary {width: 100%; text-align: center; align-self: stretch;}
#forum .fm-search {flex-direction: row; margin-bottom: 8px; gap: 6px;}
#forum .fm-search input {flex: 1;}
#forum .fm-search button {margin-top: 0;}
#forum .fm-tabs {display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px;}
#forum .fm-tabs a {padding: 2px 10px; border: 1px solid #343945; border-radius: 4px; background: #1b1e26;}
#forum .fm-tabs a.on {background: #1d3a42; border-color: #3f7f8c; color: #8fd3e3;}
#forum .fm-tabs a:hover {background: #262a34; color: #e4e4ea;}
#forum .fm-tabs a.on:hover {background: #1d3a42;}
#forum .fm-head, #forum .fm-row {display: grid; grid-template-columns: 1fr 62px 52px 150px; gap: 6px; align-items: center;}
#forum .fm-head {background: #1b1e26; border: 1px solid #343945; color: #8c8c98; padding: 4px 6px; font-size: 10px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase;}
#forum .fm-row {border-bottom: 1px dashed #343945; padding: 7px 6px;}
#forum .fm-row:hover {background: #1b1e26;}
#forum .fm-row .num {text-align: center; color: #d0d0d8; font-size: 14px;}
#forum .fm-row .num small {display: none; color: #8c8c98; font-size: 10px;}
#forum .fm-row .num.hot {color: #e8c76a;}
#forum .fm-row .num.none {color: #8c8c98;}
#forum .fm-row .fm-title {display: block;}
#forum .fm-row .fm-last {font-size: 10px; color: #8c8c98;}
#forum .fm-title {font-size: 13px; cursor: pointer;}
#forum .tagpill {display: inline-block; border: 1px solid #3f7f8c; border-radius: 3px; color: #7fc0d1; padding: 0 5px; font-size: 9px; margin-right: 6px; text-transform: uppercase;}
#forum .fm-pager {display: flex; gap: 4px; flex-wrap: wrap; margin: 8px 0; align-items: center;}
#forum .fm-pager a, #forum .fm-pager span {padding: 1px 8px; border: 1px solid #343945; border-radius: 3px;}
#forum .fm-pager span.on {background: #1d3a42; border-color: #3f7f8c; color: #8fd3e3;}
#forum .fm-best {color: #e8c76a;}
#forum .vote {display: inline-block; margin-top: 0; padding: 2px 8px;}
#forum .vote.done {background: #1d3a42; border-color: #3f7f8c; color: #8fd3e3;}
#forum .fm-post {display: flex; border: 1px solid #343945; border-radius: 4px; margin-bottom: 8px; background: #1b1e26; overflow: hidden;}
#forum .fm-author {width: 110px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border-right: 1px solid #343945; background: #15171d; text-align: center; word-break: break-word;}
#forum .fm-avatar {width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: bold; color: #0b0610; flex: none; border-radius: 6px; opacity: .85;}
#forum .fm-aname {color: #d0d0d8; font-weight: bold;}
#forum .fm-pbody {flex: 1; min-width: 0; display: flex; flex-direction: column;}
#forum .fm-phead {background: #232730; border-bottom: 1px solid #343945; color: #8c8c98; padding: 4px 8px; font-size: 10px; display: flex; justify-content: space-between;}
#forum .fm-pbody .fm-msg {padding: 8px 10px; flex: 1;}
#forum .fm-pfoot {display: flex; justify-content: space-between; align-items: center; padding: 4px 10px; border-top: 1px dashed #343945;}
#forum .fm-qtitle {font: 20px Georgia, Arial, serif; color: #d8d8e0; margin-bottom: 6px;}
/* status tables */
.sub table.kv {border-collapse: collapse; width: 100%;}
.sub table.kv th, .sub table.kv td {text-align: left; padding: 4px 8px; border-bottom: 1px solid #343945;}
.sub table.kv th {color: #8c8c98; width: 12em; font-weight: normal;}
.sub table.kv td.num {width: 5em; text-align: right; color: #b5b5bd;}
.ok {color: #7fd08a;} .bad {color: #e06c6c;}
@media (max-width: 600px) {
  #forum .fm-layout {flex-direction: column;}
  #forum .fm-side {width: 100%;}
  #forum .fm-head {display: none;}
  #forum .fm-row {grid-template-columns: 1fr 1fr;}
  #forum .fm-row .c-topic, #forum .fm-row .fm-last {grid-column: 1 / -1;}
  #forum .fm-post {flex-direction: column;}
  #forum .fm-author {width: auto; flex-direction: row; border-right: 0; border-bottom: 1px solid #343945;}
  #forum .fm-row .num small {display: block;}
  .sub table.kv th {width: 8em;}
}