*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

#preloader {
    background: #000000 url("/graphics/decor/clockit.gif") no-repeat center;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    display: flex;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999999;
    opacity: 1;
}

html {
    scroll-behavior: smooth;
    animation: cursor 2s steps(12) infinite;
    -webkit-animation: cursor 4s steps(12) infinite;
    background-color: #000;
}
body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    color: #acacac;
    font-family: "Crimson Text", "Franklin Gothic", sans-serif;
    font-size: 0.9rem;
    line-height: 1.14;
    font-optical-sizing: none;
    text-rendering: optimizeLegibility !important;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    animation:
        fadein 2s,
        cursor 2s steps(12) infinite;
    -webkit-animation:
        fadein 2s,
        cursor 4s steps(12) infinite;
}
img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;

    background-image: radial-gradient(ellipse at center, transparent 20%, rgba(0, 0, 0, 0.85) 75%, #000 100%),
        url(/graphics/bg/cloudy-night.jpg);
    background-repeat: repeat;
    background-position: center center;
    pointer-events: none;
}

@font-face {
    font-family: "cardo";
    src: url("/items/fonts/Cardo-Regular.ttf");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Crimson Text";
    src: url("/items/fonts/CrimsonText-Regular.ttf");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.2;
    margin-top: 0.5em;
    margin-bottom: 0.25em;
}

p {
    margin: 0;
}

a {
    color: #7b829e;
    text-decoration: 1px dotted underline #515568;
    text-shadow:
        0 0 5px #4b1cd9,
        0 0 20px #2c2d6d,
        0 0 20px #3437ff;
}

a:visited {
    color: #a98484;
    text-decoration: 1px dotted underline rgb(92, 71, 71);
    text-shadow:
        0 0 5px #b11cd9,
        0 0 20px #4e2c6d,
        0 0 20px #3437ff;
}

a:not([href]) {
    text-decoration: 1px dotted rgba(255, 255, 255, 0.39) line-through !important;
    filter: brightness(0.6);
}

::selection {
    background: rgb(28, 27, 56);
    color: #b0b0b0;
    text-shadow: 0 0 2px #adb5ff;
}

a::selection {
    color: #9a88a9;
    text-shadow: 0 0 6px #ddbaf9;
}
a,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"],
input[type="file"],
select,
option,
details,
summary,
label[for],
[role="button"],
[role="link"],
[onclick],
.clickable,
.button {
    cursor:
        url("/cursor/fairy/point.gif") 0 0,
        pointer !important;
    cursor:
        image-set(url("/cursor/fairy/point.gif") 1.3x) 0 0,
        pointer !important;
}

@keyframes cursor {
    0%,
    100% {
        cursor: url("/cursor/fairy/1.gif"), auto;
    }
    6.25% {
        cursor: url("/cursor/fairy/2.gif"), auto;
    }
    12.5% {
        cursor: url("/cursor/fairy/3.gif"), auto;
    }
    18.75% {
        cursor: url("/cursor/fairy/4.gif"), auto;
    }
    25% {
        cursor: url("/cursor/fairy/5.gif"), auto;
    }
    31.25% {
        cursor: url("/cursor/fairy/6.gif"), auto;
    }
    37.5% {
        cursor: url("/cursor/fairy/7.gif"), auto;
    }
    43.75% {
        cursor: url("/cursor/fairy/8.gif"), auto;
    }
    50% {
        cursor: url("/cursor/fairy/9.gif"), auto;
    }
    56.25% {
        cursor: url("/cursor/fairy/10.gif"), auto;
    }
    62.5% {
        cursor: url("/cursor/fairy/11.gif"), auto;
    }
    68.75% {
        cursor: url("/cursor/fairy/12.gif"), auto;
    }
    75% {
        cursor: url("/cursor/fairy/13.gif"), auto;
    }
    81.25% {
        cursor: url("/cursor/fairy/14.gif"), auto;
    }
    87.5% {
        cursor: url("/cursor/fairy/15.gif"), auto;
    }
    93.75% {
        cursor: url("/cursor/fairy/16.gif"), auto;
    }
}

@-webkit-keyframes cursor {
    0%,
    100% {
        cursor: url("/cursor/fairy/1.gif"), auto;
    }
    6.25% {
        cursor: url("/cursor/fairy/2.gif"), auto;
    }
    12.5% {
        cursor: url("/cursor/fairy/3.gif"), auto;
    }
    18.75% {
        cursor: url("/cursor/fairy/4.gif"), auto;
    }
    25% {
        cursor: url("/cursor/fairy/5.gif"), auto;
    }
    31.25% {
        cursor: url("/cursor/fairy/6.gif"), auto;
    }
    37.5% {
        cursor: url("/cursor/fairy/7.gif"), auto;
    }
    43.75% {
        cursor: url("/cursor/fairy/8.gif"), auto;
    }
    50% {
        cursor: url("/cursor/fairy/9.gif"), auto;
    }
    56.25% {
        cursor: url("/cursor/fairy/10.gif"), auto;
    }
    62.5% {
        cursor: url("/cursor/fairy/11.gif"), auto;
    }
    68.75% {
        cursor: url("/cursor/fairy/12.gif"), auto;
    }
    75% {
        cursor: url("/cursor/fairy/13.gif"), auto;
    }
    81.25% {
        cursor: url("/cursor/fairy/14.gif"), auto;
    }
    87.5% {
        cursor: url("/cursor/fairy/15.gif"), auto;
    }
    93.75% {
        cursor: url("/cursor/fairy/16.gif"), auto;
    }
}
button,
.button,
.buttonB {
    padding: 8px;
    border: 1px dotted #252525;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: linear-gradient(180deg, #2f2f2f 0%, #000000 15%, #181818 100%);
    transition: all 0.3s ease-in-out;
    color: #ccc;
}
button,
.button:hover,
.buttonB:hover {
    filter: brightness(2);
}
.buttonB {
    display: block;
    width: 100%;
    text-align: center;
    border: 1px dotted #5c5c5c;
}

.imageria {
    background-color: #ccc;
    border-radius: 5px;
    border: 1px solid black;
    display: flex;
    align-items: flex-end;
}

.imageria p {
    width: 100%;
    margin: 5px;
    border: 5px solid white;
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes blink {
    from {
        color: auto;
    }
    to {
        color: #2d2dff;
    }
}

@keyframes marquee-vertical {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}

@keyframes marquee-horizontal {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}
::-webkit-scrollbar {
    width: 7px;
    background-color: #000000;
}

::-webkit-scrollbar-track {
    background-color: #000000;
    background-image: radial-gradient(#140092, #000747);
    border: 2px solid #000933;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: radial-gradient(#000000, #383838);
    border: 1px solid #000000;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: radial-gradient(#000000, #535353);
}

::-webkit-scrollbar-corner {
    background: red;
}

.pagemask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-image: url(/graphics/imagemasks/cloudy-mask.webp);
    background-size: cover;
    background-position: top center;
    background-repeat: repeat-y;
    opacity: 0.28;
    filter: brightness(1.5);
    mix-blend-mode: exclusion;
}

/* Tooltip btw */
#s-m-t-tooltip {
    padding: 4px 8px;
    color: #eeeeee;
    font-style: italic;
    letter-spacing: 0.02rem;
    white-space: nowrap;
    background-color: #181818;
    background-image: linear-gradient(#000000, transparent);
    border: 1px solid #545454;
    border-radius: 10px 3px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
}

.container {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    min-height: fit-content;
    max-width: 950px;
    margin: 3% auto;
    background: url("/graphics/bg/cloudy-night.jpg");
    box-shadow:
        0 0 10px 10px rgba(9, 9, 9, 0.77),
        0 0 60px rgba(69, 69, 69, 0.95),
        inset 0 0 15px rgba(179, 179, 179, 0.8);
    border: 8px double #060606;
    outline: 1px solid #111111;
    position: relative;
    border: 15px solid transparent;
    border-image-source: url(/graphics/decor/laceborder-trans.png);
    border-image-slice: 46 fill;
    border-image-repeat: repeat;
    border-radius: 20px;
    padding: 1px;
}

.container::before,
.container::after {
    content: "";
    position: absolute;
    width: 235px;
    height: 100%;
    background-size: 108% auto;
    background-position: center;
    z-index: -1;
    pointer-events: none;
    top: 0;
    background-repeat: repeat-y;
    filter: drop-shadow(-20px 0 15px rgb(255, 255, 255)) brightness(0.34);
}

.container::before {
    right: 840px;
    background-image: url(/graphics/decor/cross-biv.png);
}

.container::after {
    left: 840px;
    background-image: url(/graphics/decor/cross-biv.png);
    transform: scaleX(-1);
}

.row {
    display: flex;
    flex-direction: row;
    gap: 4px;
}

.row.loadbearing {
    flex: 1;
    align-items: flex-start;
}

.col,
.coldom > * {
    display: flex;
    flex-direction: column;
}

.thegap {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.theactualgap {
    gap: 5px;
}

.flexor {
    flex: 1;
}

.content .flexor.thegap {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.center {
    text-align: center;
    margin: auto;
}

.content {
    flex: 1;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 0px;
    position: relative;
    z-index: 1;
    min-width: 0 !important;
    max-width: 100% !important;
}

.sidebar {
    width: 170px;
    padding: 15px 5px;
    flex-shrink: 0;
    background-color: #000000;
    background: linear-gradient(to right, #000000, rgba(27, 27, 27, 0.25) 20%, rgba(27, 27, 27, 0.25) 80%, #000000);
    text-align: center;
}

.sidebar-inner {
    position: sticky;
    top: 0;
}

.sidejail {
    max-width: 200px;
    margin-top: -10px;
}
.content > .row,
.cobiebox,
.cobiebox2,
.sidejail {
    position: relative;
}

.malelopunny {
    background: url(/graphics/decor/spiky-divider-vert.png);
    width: 48px;
    height: auto;
    margin-left: -48px;
    margin-right: -5px;
    image-rendering: pixelated;
    background-size: 72px;
    user-select: none;
    transition: all 0.5s steps(7);
    z-index: 10;
    filter: brightness(0.6);
}

.malelopunny:hover {
    opacity: 0.3;
}

.byte {
    position: absolute;
    top: 0;
    right: 0;
    height: 375px;
    width: 643px;
    z-index: -9;
    background: url(/graphics/artwork/bytedoll2.png);
    background-position: 138px -39px;
    background-repeat: no-repeat;
    filter: grayscale() opacity(0.38) brightness(0.7) drop-shadow(0 0 26px);
    pointer-events: none;
    margin: -308px -77px 0 0;
}

.doll {
    position: absolute;
    top: 0;
    right: 0;
    height: 550px;
    width: 541px;
    z-index: -6;
    background: url(/graphics/images/madoka/madohomu.webp);
    background-position: 303px 233px;
    background-repeat: no-repeat;
    filter: grayscale() opacity(0.7) brightness(0.7) drop-shadow(0 0 26px);
    pointer-events: none;
    margin: -394px -13px 0 0;
    background-size: 300px;
}

header.overlord {
    background: linear-gradient(#000000, transparent, #000000), url("/graphics/bg/header2.png");
    background-position: -114px;
    background-size: cover;
    border-radius: 5px 5px 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 280px;
    padding: 20px 0 10px 0;
    box-sizing: border-box;
    filter: opacity(0.8) brightness(1.3);
}

h1.squire {
    display: block;
    font-family: cardo, "Times New Roman", Times, serif;
    font-size: clamp(3rem, 9cqw, 5.5rem);
    font-weight: 100;
    color: rgba(0, 0, 0, 0.88);
    background-image: linear-gradient(#000000, rgb(255, 255, 255));
    -webkit-background-clip: text;
    background-clip: text;
    text-decoration: none;
    text-shadow:
        0 0 73px #e7e7e7,
        0px 0px 5px rgba(113, 113, 113, 0.46);
    filter: drop-shadow(2px 2px 0px rgb(14, 14, 14)) brightness(1.2);
    padding: 0 6px;
    transition: all 0.8s;
    line-height: 0.85;
    margin: 0;
}

h1.squire:hover {
    filter: drop-shadow(2px 2px 0px rgb(14, 14, 14)) brightness(1.5);
}

h1.squire:first-of-type::first-letter,
h1.squire .single {
    line-height: 0.8;
    font-size: 1.6em;
    letter-spacing: -0.3em;
}

.underlady {
    padding: 5px 20px;
    margin-top: auto;
}

#somebody {
    background-color: #000000;
    background: linear-gradient(#000000, rgba(136, 136, 136, 0.2));
    padding: 1px 278px 1px 1px;
    border: 1px dotted #424242;
    border-radius: 5px;
    letter-spacing: 0.6px;
    box-shadow:
        0 0 10px 3px #000000,
        0 0 4px #ffffff;
    font-style: italic;
    user-select: none;
}

#somebody::before,
#somebody::after {
    content: ' " ';
    font-size: 15px;
}

.mystats {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: 20px;
}

.mystats span {
    background: linear-gradient(to right, black, transparent);
    animation: statanim 0.6s ease-out forwards;
    opacity: 0;
    transform: translateX(-10px);
    text-transform: lowercase;
    max-width: 200px;
    text-shadow: 0 0 16px white;
    transition: all 0.2s;
    border-left: 4px double #3a3a3a;
    padding-left: 5px;
    border-radius: 5px;
}

.mystats span:nth-child(1) {
    margin-left: 0;
    animation-delay: 0.4s;
}
.mystats span:nth-child(2) {
    margin-left: 6px;
    animation-delay: 0.6s;
}
.mystats span:nth-child(3) {
    margin-left: 12px;
    animation-delay: 0.8s;
}
.mystats span:nth-child(4) {
    margin-left: 18px;
    animation-delay: 1.4s;
}

.mystats span:hover {
    filter: brightness(1.5);
}

@keyframes statanim {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.cobiebar {
    margin: -9px 0 5px 0;
    display: flex;
    align-items: center;
    gap: 5px;
    position: relative;
}

.cobiebar span,
.cobiebar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to top, #212121, black 60%, #606060);
    padding: 7px;
    border-radius: 11px;
    border: 1px #262626 solid;
    box-shadow:
        0 0 10px 3px black,
        0 0 5px black;
    line-height: 1;
    text-decoration: none;
    height: 20px;
    box-sizing: border-box;
}

.cobiebar a {
    background: linear-gradient(to top, #696969, #454545 60%, #878787);
    color: #a4a4a4;
    text-shadow:
        0 0 5px black,
        0 0 3px black,
        0 0 10px blue,
        0 0 7px blue;
}

#imood {
    display: block;
    vertical-align: middle;
}

.sitebutton {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-top: -8px;
}

.sitebutton a {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
}

.sitebutton img {
    width: 88px;
    height: 31px;
    display: block;
}

.sitebutton::after {
    content: "click me for more linking options!!";
    position: absolute;
    z-index: 9999;
    bottom: 100%;
    right: 0;
    display: block;
    width: 200px;
    background: black;
    color: #ccc;
    opacity: 0;
    padding: 4px;
    pointer-events: none;
    user-select: none;
    transition: opacity 0.3s ease;
    text-shadow:
        0 0 20px white,
        0 0 5px white,
        0 3px black;
    font-family: sans-serif;
    font-size: 11px;
    text-align: right;
    border: 1px solid #333;
}

.sitebutton:hover::after {
    opacity: 1;
}

.snav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.snav a,
.ls-limg::after {
    padding: 2px;
    color: #8b8994;
    font-family: cardo, "Times New Roman", serif;
    font-style: italic;
    text-align: center;
    text-decoration: none;
    text-shadow:
        0 0 5px #000000,
        0 0 20px #000000,
        0 1px 3px #000000;
    background: linear-gradient(#191919, #000000, #212121);
    border: 1px dotted #212121;
    box-shadow:
        0 0 5px #000000,
        0 0 10px #000000;
    transition: all 1s ease;
    user-select: none;
    border-radius: 10px / 5px;
}

.snav a:hover {
    filter: brightness(1.8) sepia(0.6) hue-rotate(220deg);
    transform: scale(1.14);
    transition: transform 0.2s;
}

.snav a:active {
    filter: brightness(0.7);
    transition: all 0.1s;
}

.ls-limg {
    position: relative;
    width: 100%;
    height: 300px;
    margin-top: 5px;
    background: url("/graphics/decor/clow-cards.webp");
    background-position: center;
    background-size: 138px;
    border: 1px dotted #333333;
    border-radius: 5px;
    filter: grayscale() brightness(0.7);
}

.ls-limg::after {
    content: "clow cards (ccs)";
    display: block;
    position: absolute;
    bottom: 3px;
    right: 3px;
    color: #efefef;
    font-family: "helvetica", sans-serif;
    border-radius: 3px;
    filter: none;
}

.cobiebox,
.cobiebox2 {
    padding: 4px;
    border: 1px dotted #252525;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: linear-gradient(180deg, #2f2f2f 0%, #000000 15%, #181818 100%);
}

.cobiebox2 {
    background: linear-gradient(180deg, #191919 0%, #000000 15%, #141414 100%);
}

.cobiebox p {
    padding: 2px 4px;
    background: #000000;
    border: 1px solid #1d1d1d;
    border-radius: 5px;
}

.cobiebox2 p {
    padding: 1px 4px;
    background: #000000;
    border: 1px solid #191919;
}

.cobiebox h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 100;
    font-style: italic;
    background: linear-gradient(
        135deg,
        rgb(0, 0, 0) 0%,
        rgb(33, 33, 33) 25%,
        rgb(10, 10, 13) 50%,
        #262626 75%,
        #636363 100%
    );
    border: 1px dotted #3f3f4e;
    border-radius: 5px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.9),
        0 2px 5px rgba(0, 0, 0, 0.8);
    color: #9a9a9a;
    text-shadow: 0 1px 2px #000000;
    padding: 0 3px;
    position: relative;
    margin-bottom: 17px;
}

.cobiebox h2::first-letter {
    opacity: 0.9;
    color: #5f55ff;
    font-weight: bold;
}

.cobiebox h2::after {
    content: "";
    height: 18px;
    width: 100%;
    display: block;
    position: absolute;
    background: url(/graphics/decor/blackmirror.gif);
    background-position: center 31px;
    filter: grayscale() brightness(0.5);
    z-index: 1;
    background-size: 230px;
    border: 3px double #ff5c5c;
    left: 0;
}

.alerta {
    position: relative;
    z-index: 1;
    padding: 5px 10px 10px 10px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.32) 20%),
        linear-gradient(to right, #000000, transparent 80%),
        #000000 url("/graphics/bg/dark-inverted-clouds-bg.jpg");
    border-radius: 5px;
    display: none;
}

.alerta h3,
.alerta p {
    margin: 0;
    padding: 0;
}

.alerta h3 {
    margin-bottom: 5px;
    font-size: 1.3rem;
    font-weight: 100;
    font-style: italic;
    background: linear-gradient(to right, transparent, #000000);
    border-bottom: 1px dotted;
    border-radius: 5px 5px 0 0;
}

.alerta h3::before {
    content: " ※ ";
    font-size: 15px;
    animation: blink 1s infinite steps(2);
}

.enabled {
    display: block;
}

#feed-reader {
    max-height: 150px;
    overflow-x: hidden;
    overflow-y: auto;
}

.reader-item {
    margin-bottom: 5px;
    padding: 5px;
    background-color: #000000;
    background: linear-gradient(#000000, transparent), url("/graphics/bg/dark-inverted-clouds-bg.jpg");
    border: 1px solid #000000;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

h2.sc-datestring {
    margin: 0 0 -5px 0;
    padding: 2px 5px !important;
    color: #6b7280;
    font-size: 1rem;
    font-weight: 100;
    text-align: end;
    letter-spacing: 0.05em;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.sc-content {
    padding: 5px;
    color: #9e9e9e;
    text-align: justify;
    white-space: pre-line;
    background: rgba(0, 0, 0, 0.41);
    border-radius: 10px;
    z-index: 5;
}

.bulletin ol {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0;
    margin: 0;
}

.bulletin ol:not(.coldom) {
    counter-reset: bulletin-counter;
}
.bulletin li {
    background: #000000;
    border: 1px dotted #2d2d2d;
    padding: 4px 6px;
    border-radius: 5px;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 6px;
    row-gap: 4px;
    align-items: baseline;
}

.bulletin ol:not(.coldom) > li:not(.coldom) {
    counter-increment: bulletin-counter;
}

.bulletin ol:not(.coldom) > li:not(.coldom)::before {
    content: counter(bulletin-counter, decimal-leading-zero) ".";
    color: #7e7e9e;
    font-family: cardo, serif;
    font-style: italic;
    font-weight: bold;
    font-size: 12px;
}
.bulletin ol ol {
    grid-column: 1 / -1;
    margin-top: 3px;
    padding-left: 12px;
}
.bulletin ol ol li {
    border: none;
    border-left: 1px dotted #2d2d2d;
}
.bulletin ol ol:not(.coldom) > li:not(.coldom)::before {
    content: counter(bulletin-counter, lower-roman) ".";
}
.bulletin li p {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
}

.bulletin h2 {
    border-radius: 5px 5px 0 0;
}

.quicklinks {
    max-width: 85px;
    background: linear-gradient(black, rgba(0, 0, 0, 0)), url(/graphics/bg/header.jpg);
    background-position: center right;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background-size: cover;
}

.quicklinks a {
    border: none;
    background: rgba(0, 0, 0, 0.49);
    padding: 2px;
    display: block;
    border-radius: 5px;
}

.musicalchairs .row {
    gap: 10px;
}

.mv-video {
    max-width: 213px;
    flex: 1;
    border-radius: 5px;
    border: 1px solid black;
    box-shadow:
        0 0 5px black,
        0 0 10px #5b5b5b;
}

.mv-title {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mv-title p {
    box-shadow:
        0 0 5px black,
        0 0 1px #5b5b5b;
    margin-top: 6px;
}

.coollist p {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 80px;
    overflow-y: auto;
}

.coollist a {
    display: block;
    font-size: 13px;
}

/* Last.fm Widget */
.lastfm-widget {
    position: relative;
    padding: 9px 5px;
    background: linear-gradient(rgba(0, 0, 0, 0.46), #1b1b1b 10%, black, rgba(40, 40, 40, 0.57) 120%);
    border-radius: 10px;
    margin: 3px 0;
    border: 1px dotted #212121;
    text-align: end;
}

#trackInfo {
    position: relative;
    z-index: 5;
}

#trackDate {
    font-size: 13px;
    margin-top: 3px;
}

.lastfm-widget img {
    filter: grayscale(0.6) brightness(0.7);
    -webkit-box-reflect: right 2px linear-gradient(to right, rgba(0, 0, 0, 0.02) 70%, rgba(255, 0, 0, 0.4));
    border-radius: 10px 0px 0 10px;
    user-select: none;
    transition: all 0.2s;
    border: 1px solid #323232;
    max-height: 150px;
    max-width: 150px;
}

.lastfm-widget img:hover {
    filter: none;
}

#trackName a {
    font-style: italic;
    text-decoration: none;
}

.lastfm-widget p {
    margin: 0;
    padding: 0 5px;
    text-shadow:
        0 0 5px black,
        0 0 5px black,
        0 0 20px black;
}
.marquee-container {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.marquee-scroller {
    display: flex;
    flex-direction: column;
    gap: 6px;
    will-change: transform;
}

.marquee-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.marquee-scroller a {
    display: block;
    line-height: 0;
}

.marquee-scroller img {
    width: 100%;
    display: block;
}

.marquee-container:hover .marquee-scroller {
    animation-play-state: paused !important;
}

.topclamp {
    max-height: 340px;
}

.fanlistings {
    max-width: min-content;
    padding: 3px 4px;
    border-radius: 5px;
    text-align: center;
}

.fanlistings .marquee-container {
    max-height: 100%;
}

.fanlistings a {
    color: #ccc;
}

.fanlistings img {
    min-width: 50px;
    height: 50px;
    filter: grayscale(0.7) brightness(0.8);
    transition: all 0.3s;
}

.fanlistings img:hover {
    filter: none;
}

/* Horizontal Marquee (Webrings) */
.webrings {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    text-align: center;
}

.webrings .titulara {
    color: #ccc;
    display: block;
    text-align: end;
}

.webrings .marquee-content2 {
    gap: 15px;
}

.marquee-container2 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    position: relative;
    box-sizing: border-box;
}

.marquee-container2:hover .marquee-scroller2 {
    animation-play-state: paused !important;
}

.marquee-scroller2 {
    display: flex !important;
    width: max-content !important;
    min-width: 0 !important;
    will-change: transform;
}

.marquee-content2 {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    margin-left: 6px;
}

.marquee-item {
    flex-shrink: 0 !important;
    max-width: 100% !important;
    filter: brightness(0.7) grayscale();
    transition: all 0.4s;
}

.marquee-item a {
    color: #ccc;
}

.marquee-item:hover {
    filter: none;
}

.marquee-item *,
.marquee-item table,
.marquee-item img,
.marquee-item iframe,
.marquee-item div {
    max-width: 100% !important;
    box-sizing: border-box;
}

.dollshelf {
    position: absolute;
    z-index: 99;
    top: 0;
    right: 50px;
    display: flex;
    align-items: baseline;
    margin-top: -20px;
}
.dollshelf img {
    margin-left: -11px;
}
.np {
    padding: 0;
}
@keyframes prun {
    0% {
        transform: translateX(0px) rotateY(180deg);
    }
    45% {
        transform: translateX(50px) rotateY(180deg);
    }
    50% {
        transform: translateX(50px) rotateY(0deg);
    }
    95% {
        transform: translateX(0px) rotateY(0deg);
    }
    100% {
        transform: translateX(0px) rotateY(180deg);
    }
}
.peachyqueen {
    position: absolute;
    z-index: 9;
    width: 100%;
    filter: grayscale(0.5);
    transition: all 0.5s;
    bottom: 0;
    text-align: end;
    padding-right: 20px;
}
.peachyqueen img {
    display: inline-block;
    margin: -30px 55px 0 -41px;
    animation: prun 6s infinite steps(24);
}

footer {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background-color: black;
    background: linear-gradient(to right, rgba(35, 35, 35, 0) 70%, black);
    text-align: end;
    padding: 4px 8px;
    border-radius: 5px;
    z-index: 999999999;
    color: #b0b0b0;
}

footer a {
    filter: brightness(1.3);
}

@media (max-width: 1200px) {
    .container::before,
    .container::after {
        display: none;
    }
}
@media (max-width: 700px) {
    .content,
    .sidebar,
    .cobiebox,
    .cobiebox2,
    .bulletin li {
        padding: 14px !important;
    }
    .snav {
        gap: 8px;
    }
    .snav a {
        padding: 5px;
    }
    .row.loadbearing {
        align-items: flex-start !important;
    }
    .row > *,
    .col > * {
        align-self: flex-start;
    }
    .content,
    .flexor {
        min-width: auto !important;
    }
    html {
        padding: 20px;
    }
    body::before {
        position: absolute;
        background-attachment: scroll;
    }
    .container {
        margin: 0;
        border-width: 4px;
    }
    .row,
    .row.loadbearing {
        display: flex;
        flex-direction: column;
    }
    .sidebar {
        width: 100%;
        max-width: 100%;
        padding: 10px;
        box-sizing: border-box;
    }
    .sidebar-inner {
        position: static;
    }
    .sidejail {
        max-width: 100%;
        margin-top: 0;
    }
    .container::before,
    .container::after,
    .byte,
    .doll,
    .malelopunny {
        display: none;
    }
    header.overlord {
        min-height: auto;
        padding: 15px 10px;
        border-radius: 0;
    }
    h1.squire {
        font-size: 3.2rem;
    }
    .mystats span {
        max-width: 100%;
    }
    #somebody {
        padding: 2px 8px;
        text-align: center;
    }
    .cobiebar {
        flex-wrap: wrap;
        justify-content: center;
    }
    .musicalchairs .row {
        flex-direction: column;
    }
    .mv-video {
        max-width: 100%;
        width: 100%;
    }
    .fanlistings {
        max-width: 100%;
    }
    .webrings .marquee-content2 {
        gap: 8px;
    }
    .fanlistings .marquee-scroller {
        animation: none !important;
        transform: none !important;
    }
    .fanlistings .marquee-container {
        max-height: none;
        overflow: visible;
    }
    .fanlistings .marquee-content {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 9px;
        justify-content: center;
    }
    .fanlistings .marquee-scroller > :nth-child(n + 2) {
        display: none !important;
    }
    .topclamp {
        max-height: 100%;
        padding: 0 0 10px 0;
        gap: 20px;
    }
    .cobiebox p,
    .cobiebox2 p {
        padding: 4px 8px;
    }

    .cobiebox h2 {
        margin: 10px 0 0 0;
        font-size: 27px;
        padding: 3px 8px;
        margin-bottom: 20px;
    }
    .cobiebox h2::after {
        content: "";
        height: 12px;
        width: 100%;
        display: block;
        position: absolute;
        background: url(/graphics/decor/blackmirror.gif);
        background-position: center 31px;
        filter: grayscale() brightness(0.5);
        z-index: 1;
        background-size: 230px;
        border: 1px double #ff5c5c;
        left: 0;
    }
    .row,
    .snav,
    .thegap,
    .content {
        gap: 12px !important;
    }
}