@font-face {
    font-family:'synkopy';
    src: url("/fonts/Hybrid_o.ttf");
}

@font-face {
    font-family:'funky';
    src: url("/fonts/basiic.ttf");
}

:root {
    --bg:            #ffffff;
    --panel:         #ffffff;
    --text:          #26547d;
    --text-strong:   #000000;
    --accent:        #ff729f;
    --border:        #709bff;
    --link:          #26547d;
    --link-hover:    #000000;
    --muted:         #6d92b5;
    --rule:          rgba(0, 0, 0, 0.75);

    --sub-1:         #e2f3ff;
    --sub-2:         #a5d5ff;
    --sub-3:         #85b4ff;
    --sub-4:         #ebf0f4;

    --sub-text:      #ffffff;
    --sub-shadow:    rgba(22, 52, 77, 0.75);

    --chrome:        #cccccc;
    --chrome-light:  #ffffff;
    --chrome-dark:   #868a8e;
    --chrome-edge:   #000000;
    --chrome-invert: 0%;

    --counter-invert: 0%;

    --digit-bg:      #26547d;
    --digit-fg:      #ff729f;
    --digit-dark:    #16344d;
    --digit-light:   #5a86ad;
}

.theme-dark {
    --bg:            #12141c;
    --panel:         #1b1f2b;
    --text:          #a8c4e0;
    --text-strong:   #e8f0f8;
    --accent:        #ff8fb5;
    --border:        #3d5a8a;
    --link:          #a8c4e0;
    --link-hover:    #ffffff;
    --muted:         #7089a8;
    --rule:          rgba(255, 255, 255, 0.35);

    --sub-1:         #2a3550;
    --sub-2:         #35426a;
    --sub-3:         #2c3757;
    --sub-4:         #222a40;
    --sub-text:      #dce7f5;

    --sub-shadow:    rgba(0, 0, 0, 0.5);

    --chrome:        #2a3040;
    --chrome-light:  #3d4658;
    --chrome-dark:   #12151d;
    --chrome-edge:   #060a12;

    --chrome-invert: 100%;
    --counter-invert: 100%;

    --digit-bg:      #0e1626;
    --digit-fg:      #ff8fb5;
    --digit-dark:    #060a12;
    --digit-light:   #2c3f5a;
}

.page-home         { --accent: #ff729f; }
.page-sitemap      { --accent: #7f9fd4; }
.page-about        { --accent: #ff9f5a; }
.page-blog         { --accent: #5fb98a; }
.page-media        { --accent: #b07fd4; }
.page-games        { --accent: #4fb0c4; }
.page-art          { --accent: #e06c8b; }
.page-music        { --accent: #d4a24f; }
.page-webring      { --accent: #6fa8d4; }
.page-guestbook    { --accent: #d46f9a; }
.page-findme       { --accent: #8fb85f; }
.page-diary        { --accent: #5fa8b0; }

body {
    font-family: 'Ms Ui Gothic', sans-serif;
    margin: 0;
    background-color: var(--bg);
    background-size: 180px;
    font-size: 18px;
}

p {
    margin: 10px 15px;
    text-align: center;
    font-family:'funky';
}

a {
    font-family:'funky';
    color: var(--text);
    text-decoration: none;
}

a:hover {
    color: var(--link-hover);
}

td {
    font-family:'funky';
}

ul {
    padding-top:10px;
    padding-left: inherit;
}

hr {
    border: 0;
    height: 0;
    border-bottom: 1px dotted var(--border);
    margin: 14px 0px;
}

h1 {
  font-size: 32px;
  color: var(--text);
}

h2 {
  font-size: 24px;
  color: var(--text);
}

h3 {
  font-weight: normal;
  letter-spacing: 0.5px;
  font-size: 16px;
  font-family:'funky';
}

#textlol h1 {
    font-size: 50px;

    color: inherit;
    font-weight: normal;
    font-family:'synkopy';
    margin: 10px 15px;
    text-align: center;
}

.subheader h2 {
    font-weight: normal;
    letter-spacing: 0.5px;
    font-size: 16px;
    font-family:'funky';
    margin: 0px;
    color: inherit;
}

.subheader h3 {
    margin: 0px;
}

#container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 855px;
    margin: 0 auto;
}

#headercontainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 855px;
    margin: 0 auto;
    padding: 50px 0px 0px 0px;
    height: 45px;
}

#box {
    width: 855px;
    color: var(--text);
    display: grid;

    grid-template-columns: 179px 485px 179px;

    grid-template-areas: "side main rightside";
    column-gap: 6px;
    align-items: start;
}

#main {
    grid-area: main;
    width: 485px;
    min-height: 660px;
    overflow: hidden;

    padding: 0px;
}

#side {
    grid-area: side;
    width: 166px;
    min-height: 660px;
    padding: 0px 0px 0px 13px;
    overflow: hidden;
}

#rightside {
    grid-area: rightside;
    width: 166px;
    min-height: 660px;
    padding: 0px 13px 0px 0px;
    overflow: hidden;
}

.mainboxes {
    border: 1px solid var(--border);
    background-color: var(--panel);
    min-height: 650px;
    padding: 0px;
    margin: 0px 0px 0px 0px;
}

.sidebox {
    border: 1px solid var(--border);
    background-color: var(--panel);
    margin: 0px 0px 5px 0px;
    min-height: 650px;
}

.subheader {
    background: linear-gradient(to bottom, var(--sub-1) 1%, var(--sub-2) 49%, var(--sub-3) 51%, var(--sub-4) 100%);
    border-bottom: 1px solid var(--border);
    padding: 3px;
    letter-spacing: 0px;
    color: var(--sub-text);
    font-weight: 1000;

    text-shadow: 1px 1px 0 var(--sub-shadow);
}

.sidecontent {
    color: var(--text);
    font-size: 16px;
    letter-spacing: 0px;
    justify-content: top;
    align-items: top;
}

.sidecontent ul, li {
    margin: 0px;
    list-style-type: none;
    padding-left: 0px;
}

li {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.tall {
    padding: 0px 0px 0px 5px;
}

.listText {
    margin: 2px 5px;
    position: absolute;
}

.sidebox.fit {
    min-height: 0;
}

.counter {
    display: flex;
    justify-content: center;
    gap: 2px;
    padding: 10px 0px 4px 0px;
}

.counter-digit {
    display: inline-block;
    width: 14px;
    padding: 2px 0px;
    font-family: 'Ms Ui Gothic', monospace;
    font-size: 15px;
    line-height: 1;
    text-align: center;
    color: var(--accent);
    background: #26547d;
    border-top: 1px solid var(--digit-dark);
    border-left: 1px solid var(--digit-dark);
    border-right: 1px solid var(--digit-light);
    border-bottom: 1px solid var(--digit-light);
}

.counter-note {
    margin: 0px 6px 10px 6px;
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
}

.counter-sub {
    color: var(--muted);
    font-size: 11px;
}

#textlol {
    font-size:50px;
    text-decoration: none;
    margin:0 auto;
    transition: 0.4s;
    color: var(--text-strong);
    font-family:'synkopy';
    padding: 0px 10px 0px;
}

#textlol:hover {
    letter-spacing:5px;
}

#toplinks{
    border: 1px solid var(--border);
    text-align:center;
    padding:5px;
    width: 400px;
    margin: -15px auto;
    background: var(--panel);
}

.links{
    border: 1px solid var(--border);
    text-align:center;
    padding:5px;
    width: 474px;
    margin: -15px auto;
    background: var(--panel);
}

.links ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content: space-evenly;
}

.mediaimg{
    display:block;
    width: 95px;
    margin: 2px auto;
    border-style:solid;
    border-width:1px;
}

.poster-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    column-gap: 2px;
    row-gap: 4px;
    padding: 3px 2px;
    width: 90%;

    box-sizing: border-box;
    margin: auto;
    color: var(--text);
}

.poster-grid > p {
    grid-column: 1 / -1;
}

.friendlink{
    text-align:center;
}

.mt{
	margin-top:20px;
}

.marquee {

    display: inline-block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;

    font-size: 24px;
}

.marquee > span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee-scroll 10.2s linear infinite;
}

@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
    .marquee > span {
        animation: none;
        padding-left: 0;
    }
}

.scrollbox {
    overflow-y: scroll;
    height: 627px;
}

.scrollbox.auto {
    overflow-y: auto;
}

@media (max-width: 899px) {

    #headercontainer,
    #container,
    #box {
        width: auto;
        max-width: 100%;
    }

    #headercontainer {
        flex-direction: column;
        height: auto;
        padding: 20px 8px 0px 8px;
    }

    #textlol {
        font-size: 34px;
        padding: 0px;
    }

    #textlol h1 {
        font-size: 34px;
        margin: 0px;
    }

    #box {
        grid-template-columns: 1fr;
        grid-template-areas:
            "main"
            "side"
            "rightside";
        row-gap: 8px;
    }

    #main,
    #side,
    #rightside {
        width: auto;
        min-height: 0;
        overflow: visible;
        padding: 0px 8px;
    }

    .mainboxes,
    .sidebox {
        min-height: 0;
    }

    .scrollbox,
    .scrollbox.auto {
        height: auto;
        overflow-y: visible;
    }

    .links,
    #toplinks {
        width: 100%;
        max-width: 100%;
        margin: 8px auto;
        box-sizing: border-box;
    }

    .poster-grid {
        grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
        width: 100%;
    }

    img,
    audio {
        max-width: 100%;
    }
}

::-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,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAEElEQVQIW2No6+pjgAAgCwAWogM9VKrgGQAAAABJRU5ErkJggg==");
-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 var(--chrome);
border-left: 1px solid var(--chrome);
border-right: 1px solid var(--chrome-edge);
border-bottom: 1px solid var(--chrome-edge);
box-shadow: inset 1px 1px 0 0 var(--chrome-light), inset -1px -1px 0 0 var(--chrome-dark);
width: 16px;
height: 16px;
background-color: var(--chrome);
z-index: 1;
}

::-webkit-scrollbar-corner {
background-color: var(--chrome);
}

::-webkit-resizer {
width: 16px;
height: 16px;
background-color: var(--chrome);
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 var(--chrome);
border-left: 1px solid var(--chrome);
border-right: 1px solid var(--chrome-edge);
border-bottom: 1px solid var(--chrome-edge);
box-shadow: inset 1px 1px 0 0 var(--chrome-light), inset -1px -1px 0 0 var(--chrome-dark);
display: block;
width: 16px;
height: 16px;
background-color: var(--chrome);
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 var(--chrome-dark);
border-left: 1px solid var(--chrome-dark);
border-bottom: 1px solid var(--chrome-dark);
border-right: 1px solid var(--chrome-dark);
box-shadow: none;
}

.panel-table {
    width: 100%;
    color: var(--text);
}

.panel-table > tbody > tr > td {
    padding: 10px;
    vertical-align: middle;
}

.list-table {
    width: 90%;
    color: var(--text);
    table-layout: fixed;
    margin: auto;
}

.lead {
    color: var(--accent);
    letter-spacing: 0.5px;
    text-align: center;
    font-size: 20px;
    margin: 10px 15px;
}

.lead-left {
    text-align: left;
    margin: 5px 10px;
}

.divider {
    height: 0;
    margin: 16px 18px;
    border: 0;
    border-bottom: 1px dotted var(--border);
}

.panel-table > tbody > tr > td > p:last-child {
    margin-bottom: 0;
}

.panel-table + .divider {
    margin-top: 2px;
}

.panel-table > tbody > tr > td > .divider {
    margin-top: 0;
    margin-bottom: 0;
}

.panel-table > tbody > tr > td:has(> .divider) {
    padding-top: 0;
    padding-bottom: 4px;
}

.linklist {
    padding-top: 0px;
    margin: 0px;
    padding-left: 2px;
}

.linklist li {
    display: block;
    text-align: left;
    padding: 0px 0px 0px 5px;
}

.linklist.centered li {
    text-align: center;
}

.linklist a {
    color: var(--text-strong);
}

.linklist a:hover {
    color: var(--accent);
}

.pending {
    color: var(--muted);
    font-style: italic;
}

.subheader {
    border-left: 4px solid var(--accent);
}

.theme-switch {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 10px 6px;
}

.theme-switch a {
    flex: 1;
    text-align: center;
    padding: 4px 2px;
    font-size: 12px;
    color: var(--text);
    border: 1px solid var(--border);
    background: var(--bg);
}

.theme-switch a:hover {
    color: var(--accent);
}

.theme-switch a.on {
    color: var(--sub-text);
    background: linear-gradient(to bottom, var(--sub-2), var(--sub-3));
    box-shadow: inset 1px 1px 0 0 rgba(0, 0, 0, 0.25);

    text-shadow: 1px 1px 0 var(--sub-shadow);
}

.panel-note {
    margin: 8px 8px 10px 8px;
    text-align: center;
    font-size: 13px;
    line-height: 1.1;
    color: var(--text);
}

.panel-note b {
    color: var(--accent);
}

.panel-sub {
    color: var(--muted);
    font-size: 11px;
}

.stack-list {
    margin: 8px;
    font-size: 11px;
    line-height: 1.7;
    color: var(--muted);
    text-align: center;
}

.project-head {
    padding: 12px 14px 4px 14px;
    text-align: center;
}

.project-title {
    font-family: 'synkopy';
    font-size: 26px;
    color: var(--accent);
    margin: 0px 0px 4px 0px;
    line-height: 1.2;
}

.project-meta {
    font-family: 'funky';
    font-size: 13px;
    color: var(--muted);
    margin: 0px;
}

.project-cover {
    display: block;
    width: 80%;
    margin: 12px auto;
    border: 1px solid var(--border);
}

.project-body {
    padding: 0px 16px 12px 16px;
}

.project-body p {
    text-align: left;
    margin: 10px 0px;
    line-height: 1.6;
}

.project-facts {
    width: 90%;
    margin: 12px auto;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--text);
}

.project-facts th {
    text-align: left;
    padding: 4px 8px;
    width: 34%;
    font-weight: normal;
    color: var(--accent);
    vertical-align: top;
}

.project-facts td {
    text-align: left;
    padding: 4px 8px;
    vertical-align: top;
}

.project-links {
    text-align: center;
    padding: 6px 0px 14px 0px;
}

.project-links a {
    display: inline-block;
    margin: 3px 4px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    font-size: 13px;
}

.project-links a:hover {
    color: var(--accent);
}

.todo {
    margin: 10px 0px;
    padding: 8px 10px;
    border: 1px dashed var(--accent);
    color: var(--muted);
    font-size: 12px;
    text-align: left;
    line-height: 1.6;
}

.fav-section {
    margin: 4px 0px 18px 0px;
}

.fav-heading {
    color: var(--accent);
    text-align: left;
    font-family: 'funky';
    font-size: 17px;
    letter-spacing: 0.5px;
    margin: 14px 0px 2px 18px;
}

.fav-blurb {
    text-align: left;
    font-size: 12px;
    color: var(--muted);
    margin: 0px 0px 8px 18px;
}

details.fav-section > summary.fav-heading {
    display: block;
    cursor: pointer;
    list-style: none;
    -webkit-user-select: none;
    user-select: none;
}

details.fav-section > summary.fav-heading::-webkit-details-marker {
    display: none;
}

details.fav-section > summary.fav-heading::before {
    content: "[+] ";
}

details.fav-section[open] > summary.fav-heading::before {
    content: "[-] ";
}

details.fav-section > summary.fav-heading:hover,
details.fav-section > summary.fav-heading:focus-visible {
    text-decoration: underline;
}

details.fav-section:not([open]) {
    margin-bottom: 4px;
}

::-webkit-scrollbar-track {
    filter: grayscale(100%) invert(var(--chrome-invert));
}

::-webkit-scrollbar-button {
    filter: invert(var(--chrome-invert));
}

.np-art {
    display: block;
    width: 80%;
    margin: 10px auto 6px auto;
    border: 1px solid var(--border);
    image-rendering: auto;
}

.np-track {
    margin: 4px 8px 0px 8px;
    text-align: center;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text);
}

.np-artist {
    margin: 2px 8px;
    text-align: center;
    font-size: 12px;
    color: var(--accent);
}

.np-when {
    margin: 2px 8px 8px 8px;
    text-align: center;
    font-size: 11px;
    color: var(--muted);
}

.fc2-counter {
    text-align: center;

    padding: 12px 4px 8px 4px;
    line-height: 0;
}

.fc2-counter img {
    max-width: 100%;
    image-rendering: pixelated;

    filter: invert(var(--counter-invert));
}

.guestbook-frame {

    --gb-crop: 130px;

    --gb-visible: 390px;

    --gb-frame: 900px;

    width: 92%;
    margin: 12px auto 4px auto;
    border: 1px solid var(--border);
    background: var(--panel);
    height: var(--gb-visible);
    overflow-y: auto;
    overflow-x: hidden;
}

.guestbook-frame iframe {
    display: block;
    width: 100%;
    height: var(--gb-frame);
    border: 0;
    margin-top: calc(var(--gb-crop) * -1);
}

.guestbook-fallback {
    text-align: center;
    font-size: 12px;
    color: var(--muted);
    margin: 4px 0px 10px 0px;
}

.guestbook-note {
    text-align: center;
    font-size: 11px;
    color: var(--muted);
    margin: 6px 0px 10px 0px;
}

@media (max-width: 899px) {

    .guestbook-frame {
        --gb-visible: 480px;
    }
}

.post-item {
    margin: 0px 16px 18px 16px;
    padding-bottom: 14px;
    border-bottom: 1px dotted var(--border);
}

.post-item:last-child {
    border-bottom: 0;
}

.post-item-title {
    margin: 0px;
    font-size: 18px;
    font-family: 'funky';
    font-weight: normal;
}

.post-item-title a {
    color: var(--accent);
}

.post-item-title a:hover {
    color: var(--link-hover);
}

.post-head {
    padding: 12px 16px 0px 16px;
}

.post-title {
    margin: 0px;
    font-size: 22px;
    font-family: 'funky';
    font-weight: normal;
    color: var(--accent);
}

.post-meta {
    margin: 2px 0px 8px 0px;
    text-align: left;
    font-size: 12px;
    color: var(--muted);
}

.post-tag {
    display: inline-block;
    margin-left: 3px;
    padding: 1px 6px;
    border: 1px solid var(--border);
    font-size: 11px;
}

.post-summary {
    margin: 4px 0px;
    text-align: left;
    font-size: 14px;
    line-height: 1.1;
}

.post-more,
.post-nav {
    margin: 6px 0px;
    text-align: left;
    font-size: 13px;
}

.post-nav {
    text-align: center;
}

.post-body {
    padding: 0px 16px 12px 16px;
}

.post-body p,
.post-body li {
    text-align: left;
    line-height: 1.1;
    font-size: 15px;
}

.post-body h1,
.post-body h2,
.post-body h3,
.post-body h4 {
    font-family: 'funky';
    font-weight: normal;
    color: var(--accent);
    margin: 18px 0px 6px 0px;
    line-height: 1.3;
}

.post-body h1 { font-size: 20px; }
.post-body h2 { font-size: 18px; }
.post-body h3 { font-size: 16px; }
.post-body h4 { font-size: 15px; }

.post-body a {
    color: var(--accent);
    text-decoration: underline;
}

.post-body a:hover {
    color: var(--link-hover);
}

.md-list {
    margin: 8px 0px;
    padding-left: 22px;
}

.md-list li {
    display: list-item;
    list-style-type: square;
    margin: 3px 0px;
}

.md-img {
    display: block;
    max-width: 100%;
    margin: 10px auto;
    border: 1px solid var(--border);
}

.md-quote {
    margin: 10px 0px;
    padding: 6px 12px;
    border-left: 3px solid var(--accent);
    color: var(--muted);
    font-size: 14px;
    line-height: 1.1;
}

.md-code {
    margin: 10px 0px;
    padding: 10px 12px;
    background: var(--sub-4);
    border: 1px solid var(--border);
    overflow-x: auto;
    font-size: 13px;
    line-height: 1.5;
}

.md-code code {
    font-family: 'Ms Ui Gothic', monospace;
    white-space: pre;
}

.md-inline {
    padding: 1px 4px;
    background: var(--sub-4);
    border: 1px solid var(--border);
    font-family: 'Ms Ui Gothic', monospace;
    font-size: 13px;
}

.diary-entry {
    margin: 0px 18px 4px 18px;
    padding: 10px 0px 12px 0px;
    border-bottom: 1px dotted var(--border);
}

.diary-entry:last-child {
    border-bottom: 0;
}

.diary-body p,
.diary-body li {
    text-align: left;
    font-size: 14px;
    line-height: 1.1;
    margin: 8px 0px;
}

.diary-body a {
    color: var(--accent);
    text-decoration: underline;
}

.diary-body a:hover {
    color: var(--link-hover);
}

.diary-body h1,
.diary-body h2,
.diary-body h3 {
    font-family: 'funky';
    font-weight: normal;
    color: var(--accent);
    font-size: 16px;
    margin: 10px 0px 4px 0px;
}

.diary-date {
    display: block;
    margin: 0px 0px 2px 0px;
    text-align: left;
    color: var(--accent);
    font-size: 13px;
    font-weight: bold;
}

.sidecontent .diary-mini {
    margin: 8px 8px 6px 8px;
    padding: 0px;
    list-style: none;
}

.diary-mini li {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.1;
    text-align: center;
    color: var(--text);
}

.diary-mini .diary-date {
    min-width: 0;
    font-size: 11px;
    color: var(--muted);
}

.diary-more {
    margin: 4px 0px 12px 0px;
    text-align: center;
    font-size: 12px;
}

.sidecontent .nav-list {
    margin: 0px 8px;
    padding-top: 14px;
    padding-bottom: 12px;
    list-style: none;
}

.cube-stage {
    perspective: 700px;
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 48px 0px 18px 0px;
}

.cube {
    position: relative;
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    animation: cube-spin 16s linear infinite;
}

.cube-face {
    position: absolute;
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    border: 2px solid var(--accent);
    background: var(--sub-1);

    opacity: 0.55;
}

.cube-front  { transform: rotateY(  0deg) translateZ(50px); }
.cube-back   { transform: rotateY(180deg) translateZ(50px); }
.cube-right  { transform: rotateY( 90deg) translateZ(50px); }
.cube-left   { transform: rotateY(-90deg) translateZ(50px); }
.cube-top    { transform: rotateX( 90deg) translateZ(50px); }
.cube-bottom { transform: rotateX(-90deg) translateZ(50px); }

@keyframes cube-spin {
    from { transform: rotateX(0deg)   rotateY(0deg);   }
    to   { transform: rotateX(360deg) rotateY(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .cube {
        animation: none;
        transform: rotateX(-20deg) rotateY(-30deg);
    }
}

.project-section {
    margin: 16px 0px 4px 0px;
    text-align: left;
    font-size: 16px;
    color: var(--text);
    font-weight: bold;
    letter-spacing: 0.5px;
}

.project-block {
    margin: 6px 0px 4px 0px;
    padding: 8px 12px;
    border-left: 3px solid var(--accent);
    color: var(--text);
    font-size: 14px;
    font-weight: bold;
    line-height: 1.35;
    text-align: left;
}

.project-body p {
    font-size: 14px;
}