@font-face {
    font-family: "Saitamaar";
    src: url("../../../assets/fonts/Saitamaar/Saitamaar.woff2") format("woff2"),
         url("../../../assets/fonts/Saitamaar/Saitamaar.woff") format("woff"),
         url("../../../assets/fonts/Saitamaar/Saitamaar.ttf") format("ttf");
    font-display: swap;
}

@font-face {
    font-family: "Misaki Gothic 2nd";
    src: url("../../../assets/fonts/misaki_gothic_2nd.woff") format("woff");
    font-display: swap;
}

@font-face {
    font-family: "Press Start 2P";
    src: url("../../../assets/fonts/PressStart2P.woff") format("woff");
    font-display: swap;
}


:root {
    --wn-pink: #ff9900;
    --wn-pink-rgb: 255,153, 00;
    --scrollbar-width: 10px;
}


:root[theme="light"] {
    --wn-blue: #db6975;
    --bg-color: #feed;
    --bg-color-rgb: 254,239,241;
    --bg-color2: #e89a;
    --bg-sidebar: #fff5f5;
    --wallpaper: url(../../../assets/img/grid730clear256.png);
    --text-color-rgb: 45, 45, 45;
    --onelogbox-border-color: indianred;
    --link-color: palevioletred;
    --link-color-rgb: 219, 112, 147;
    --link-article-color: red;
    --quote-color: whitesmoke;
    --mode-color: #ff6666;
}

:root[theme="dark"] {
    --wn-blue: #1d91a2;
    --bg-color: #023d;
    --bg-color-rgb: 0, 32, 48;
    --bg-color2: #001020;
    --wallpaper: url(../../../assets/img/gridBV0clear256.png);
    --onelogbox-border-color: #1d91a2;
    --link-color: navajowhite;
    --link-color-rgb: 255, 222, 173;
    --link-article-color: #db6975;
    --quote-color: #004040;
}

::-webkit-scrollbar-button {
    background-color: #fff3;
}

body::-webkit-scrollbar-track {
    background-color: var(--bg-color2);
}

body::-webkit-scrollbar-thumb {
    background-color: #fff9;
}



body {
    height: 100vh;
}

q::before {
    content: "";
}

.container {
    background-color: var(--bg-color2);
    background-image: var(--wallpaper);
    background-attachment: fixed;
    min-height: 100%;
}

.lh-content a:hover { text-decoration-line: underline; }
.categories a:hover { color: var(--link-article-color); }
.onelogbody .comment a:link { color: #6666FF; }
.onelogbody .comment a:visited { color: #9999FF; }
.onelogbody .comment a:active { color: lime; }

.section,
.footer {
    background: var(--bg-color);
}

.tab,
.onelogbox,
.onelogfoot a,
button.newiine_btn {
    background-color: transparent;
}

.loading {
    background: rgba(var(--bg-color-rgb), 1);
}

body:not(.onelog) .onelogside .postdate::before,
body:not(.onelog) .onelogside .editlink::before {
    content: "｜";
}



.lh-content {
    line-height: 18px;
}

.decoBtns {
    margin-right: 0.5em;
}

.decorationE {
    font-style: normal;
    font-weight: bolder;
    color: var(--wn-blue);
}

.decorationU {
    text-decoration-line: underline;
    text-decoration-style: double;
    text-decoration-color: var(--wn-blue);
}

.decorationQ {
    margin: 1em 1.5em;
    margin-bottom: 0;
    padding: 1em 1.5em;
    border-left: 5px double var(--wn-blue);
    background: var(--quote-color);
}

.decorationD {
    color: #888;
    text-decoration-line: line-through;
    text-decoration-color: var(--wn-blue);
}

.decorationT {
    font-family: "Saitamaar";
    font-size: 16px;
}

.decorationL {
    margin: 0;
}

.decorationM {
    display: inline-block;
    border-radius: 1.1rem;
    padding: 0px 3px;
}

.deco-large {
    font-size: x-large;
}

.deco-code {
    display: inline-block;
    font-family: "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    background-color: #ed143d78;
    color: var(--text-color);
    border: 1px solid #eee;
    border-radius: 0.5rem;
    padding: 0px 3px;
}

.deco-blur:not(:hover) {
    filter: blur(3px);
}

.deco-separator {
    padding-bottom: 36px;
    display: block;
    border-bottom: 1px dashed var(--bg-color2);
}

.deco-Misaki {
    font-family: "Misaki Gothic 2nd";
}

.deco-2P {
    font-family: "Press Start 2P";
    vertical-align: top;
}






img {vertical-align: text-bottom;}

.decorationE img {
    border: 4px solid var(--wn-blue);
}

.decorationB img {
    border-radius: 15rem;
    vertical-align: middle;
}

.decorationI img {
    transform-origin: 100% 0%;
    transform: rotate(350deg);
}

.decorationU img {
    transform: scale(-1, 1);
}

.decorationD img {
    filter: contrast(0);
}

.decorationS img {
    max-width: 25%;
    height: auto;
}

.decorationT img {
    max-width: 16px;
    height: auto;
    border-radius: unset;
    vertical-align: text-top;
}

.decorationC img {
    filter: drop-shadow(6px 5px 2px);
}

.decorationM img {
    mix-blend-mode: luminosity;
}

.deco-large img {
    opacity: 0.5;
}

.deco-code img {
    filter: sepia(100%) hue-rotate(310deg);
    mix-blend-mode: luminosity;
}

.deco-blur img {
    filter: blur(5px);
}

.deco-Misaki img {
    filter: sepia(90%) blur(0.6px);
}

.deco-2P img {
    filter: invert(100%)
}