@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::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%); }
}
        ::-webkit-scrollbar{
        width:2px;
        background: #000;
        }
        ::-webkit-scrollbar-thumb {
        background-color: #690000;
        }
        .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;
        
        }
        .centerbox{
        width:100%; 
        border: 1px solid #690000;
        background-color: black;
        margin-top: 0px;
        height:700px;
        padding: 10px;
        box-sizing: border-box;
}
        }
        .left{
        height: 700px;
        max-width:200px;
        grid-column: 1;
        grid-row:1;
        overflow-y: auto;
        overflow-x:hidden;
        }

.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;
}
        @media only screen and (max-width: 900px) {
        .left {grid-area: 2 / span 3; min-height: 300px; max-height:none;min-width:100%;}
        .center {grid-area: 1 / span 3;}
        .right {grid-area: 3/ span 3;min-height: 300px;min-width:100%}
        }