@font-face {
            font-family: body;
            src: url('https://files.catbox.moe/bwxohl.ttf');
        }
        @font-face {
            font-family: bold;
            src: url('https://files.catbox.moe/riw0ls.ttf');
        }
        a{
        color:#690000;;
        }
        a:hover{
        color:#a80000;
            cursor:url(https://cur.cursors-4u.net/others/oth-9/oth827.ani),
          url(https://cur.cursors-4u.net/others/oth-9/oth827.png),
          pointer;
        }

        body{
        background-color: black;
        background-repeat: repeat;
        overflow-x: hidden;
        font-family: body;
        font-size: 15px;
        text-align: center;
        }
body :not(.left)::-webkit-scrollbar {
    width: 16px;
}


body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background: url('https://neckdoll.zombie.jp/material/jou/kabe/kabe-mandara02.gif') repeat;
    z-index: -1;
    animation: bg-slide 30s linear infinite;
    will-change: transform;
}


@keyframes bg-slide {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-50%, -50%); }
}

* {
    cursor:  url(https://cur.cursors-4u.net/others/oth-9/oth829.ani),
          url(https://cur.cursors-4u.net/others/oth-9/oth829.png),
      auto;}
.p-1 p {
    font-size: 20px;
    margin: 0;
    line-height: 1.2;
}
#play-icon {
    width:20px;
    height: 18px;
    vertical-align: middle;
}
#play-icon:hover {
  fill: #a80000;
}

    .music-player {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: white;
    font-size: 15px;
    width: 100%;
    overflow: hidden;
    margin-top:5px;
    }

      .marquee {
      overflow: hidden;
      white-space: nowrap;
      flex: 1;
      }
      .marquee span {
       display: inline-block;
       padding-left: 100%;
       animation: scroll-text 10s linear infinite;
       }

@keyframes scroll-text {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* SCROLL BAR */

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

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-button {
  background: #8b0000; 
  box-shadow:
    inset 1px 1px #d06060,
    inset -1px -1px #3a0000;
  border: 1px solid;
  border-color: #b03030 #000 #000 #b03030;
}

::-webkit-scrollbar-track {
  image-rendering: pixelated;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAyIDIiIHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyI+CjxwYXRoIHN0cm9rZT0iIzQwMDAwMCIgZD0iTTAgMGgxTTAgMWgxIiAvPgo8L3N2Zz4=");
  background-repeat: repeat;
  background-size: 2px;
}

::-webkit-scrollbar-button {
  background-repeat: no-repeat;
  background-size: 16px;
}

::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIC0wLjUgMTYgMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPHBhdGggc3Ryb2tlPSIjZmZjY2NjIiBkPSJNNyA1aDEgTTYgNmgzTTUgN2g1TTQgOGg3Ii8+Cjwvc3ZnPg==");
}

::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIC0wLjUgMTYgMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPHBhdGggc3Ryb2tlPSIjZmZjY2NjIiBkPSJNNCA1aDcgTTUgNmg1TTYgN2gzTTcgOGgxIi8+Cjwvc3ZnPg==");
}

::-webkit-scrollbar-corner {
  background: #8b0000;
}
::-webkit-scrollbar-button {
  background-color: #8b0000 !important;
  box-shadow:
    inset 1px 1px #d06060,
    inset -1px -1px #3a0000 !important;
  border-color: #b03030 #000 #000 #b03030 !important;
}

/* end of scroll bar */

        .title{
        background-image: url('https://files.catbox.moe/s3suqv.gif');
        height:fit-content;
        width:100%;
        margin-top:0;
        padding:5px;
        font-size: 19px;
        box-sizing: border-box;
        font-family: bold;
        color:white;            
        text-shadow: 0.05em 0 black, 0 0.05em black, -0.05em 0 black, 0 -0.05em black, -0.05em -0.05em black, -0.05em 0.05em black, 0.05em -0.05em black, 0.05em 0.05em black;
        }

        .content{
        background-color: #000;
        width: 100%;
        height: 100%;
        }
        .main{
        max-width: 1000px;
        height: fit-content;
        margin:auto;
        position:relative;
        background-color: #000;
        background-image:
        url('https://neckdoll.zombie.jp/material/flame/goth-s-alice/images/frame-s-center_01.gif'),
        url('https://neckdoll.zombie.jp/material/flame/goth-s-alice/images/frame-s-center_01.gif');
        background-repeat: repeat-y;
        background-position: left top, right top;
        padding-left: 20px;
        padding-right: 20px;
        }
        .grid{
        display: grid;
        grid-template-columns: 188px 1fr;
        grid-template-rows: 1fr;
        width: 100%;
        gap:10px;
        background-color: #000;
        }
        .header{
        width:100%;
        border: 1px solid #690000;
        height: 27%;
        background-image: url('https://files.catbox.moe/183kkw.png');
        background-size: cover;
        background-position: center; 
        font-family: bold;
        font-size: 50px;
        text-shadow: 0.05em 0 black, 0 0.05em black, -0.05em 0 black, 0 -0.05em black, -0.05em -0.05em black, -0.05em 0.05em black, 0.05em -0.05em black, 0.05em 0.05em black;
        color:#690000;
        padding:10px;
        box-sizing: border-box;
        overflow-wrap: break-word;
        }
.header p{
  margin: 50;
  
}
.header span {
    display: block;
    margin-top: -60px;
}
        .center{
        min-height:700px;
        width:100%;
        min-width: 0;
        
        }
        .center .marquee span {
        animation: scroll-text 20s linear infinite;
        }
        .centerbox{
        width:100%; 
        border: 1px solid #690000;
        background-color: black;
        margin-top: 0px;
        height:700px;
        box-sizing: border-box;
}
        
.left {
    height: 700px;
    max-width: 200px;
    grid-column: 1;
    grid-row: 1;

    overflow-y: auto;
    overflow-x: hidden;
}

.left,
.left * {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.left::-webkit-scrollbar,
.left *::-webkit-scrollbar,
.left::-webkit-scrollbar-thumb,
.left *::-webkit-scrollbar-thumb,
.left::-webkit-scrollbar-track,
.left *::-webkit-scrollbar-track,
.left::-webkit-scrollbar-button,
.left *::-webkit-scrollbar-button,
.left::-webkit-scrollbar-corner,
.left *::-webkit-scrollbar-corner {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.first-row {
    display: flex;
    gap: 5px;
    align-items: flex-start; 
    margin-top: 15px;
    
}

.first-row img {
    width: 100px;
    height: auto;
}

.first-box {
    flex: 1;
    border: 2px solid #690000;
    color: white;
    height: 250px;
    box-sizing: border-box;
}

.image-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
    margin-top:-5px;
}

.image-block img {
    width: 115px;
    display: block;
}

.image-caption {
    margin-top: 5px;
    line-height:10px;
    padding: 6px 6px;
    font-size: 12px;
    color: #dbdbdb;
    border: 2px solid #690000;
    width: 100%;
    height: 135px;
    box-sizing: border-box;
}

iframe {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  display: block;
}