body {
    margin: 0 0 0 0;
    background-image: url(BG3.webp) ;background-size: 50px 250px;
    width: auto;
    height: auto;
    text-align: -webkit-center;
}
#playArea {
  width: 200px;
  height: 200px;
  border: 0px solid #e600ff;
  margin:  -5.2cm 16.5cm;
  position: absolute;
  cursor: pointer;
}
.grid {
    width: 28cm;
    border: 10px double #3a3ad56d;border-radius: 20px;
    background: #1a1921;
    box-shadow: #000000 0 0 20px,#4e7dc086 0 0 150px;
    display: inline-grid;
    justify-items: start; align-items: start; 
    padding: 20px;
    column-gap: 15px;
    row-gap: 15px;
    grid-template-columns: minmax(auto) 1fr 4fr 1fr;
    grid-template-rows: minmax (100px 100px 100px 100px);
    grid-template-areas:
    'main'
    'h2'
    'tag'
    'art';
}
.page-main {
    grid-area: main;
    background-image: url(BG1.webp);background-size: 100% 220px;
    border: 10px double #000000cf; border-radius: 10px;
    text-align: left;
    padding: 10px;
    margin: 0 2cm;
    width: 23cm;
    height: 5cm;
    grid-template-columns: minmax(auto) 1fr 2fr 1fr;
    grid-template-rows: minmax (100px 100px 100px 100px);
    grid-template-areas:
    'main1 main2';
}
.page-tag {
    grid-area: tag;
    border: 0px solid #e600ff;
    margin: 15px 20px;
    width: 28cm;
    height: 2.8cm;
    display: inline-flex;
}
.page-art {
    grid-area: art;
    border: 10px double #5d5d9297;
    border-radius: 10px;
    background-image: url(BG2.webp) ;background-size: 50px 50px;
    width: 27.5cm;
    max-width: 27.5cm;
    height: auto;
}
.allart {
    width: 300px;
    height: 300px;
    margin: 20px;
    border: 0px solid #00e1ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.allart img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.tt {
    border: 0px dashed #ffffff;
    color: #ffffff;
    width: 190px;
    height: 100px;
    margin: 5px 5px;
}
.tt img:hover{
    filter: drop-shadow(0 0 5px #ca00a5 );
}
.artnpage {
  display: none;
}
.pagination {
    border: 0px solid #ff006a;
    width: 22cm;
    height: auto;
    margin: 50px 0;
}
.pagination a{
    border: 0px solid #00e1ff;
    color: #1f0fff;
    font-size: 25px;
    padding: 8px;
    line-height: 2;
    text-decoration: none;
}
.pagination a.active {
   color: #cc88ff;
}
.main1 h1 {
    border: 0px solid #ff0000;
    color: #ffffff;
    font-size: 20px; font-family: "Yuji Syuku", serif;
    line-height: 1.5;
    width: 12cm;
    height: auto;
    margin: -5px 0;
    text-align: left;
}
.main1 p{
    border: 0px solid #00eaff;
    color: #ffffff;
    font-size: 13px; font-family: "Yuji Syuku", serif;
    width: 15cm;
    height: 110px;
    line-height: 1;
    text-align: left;
}
.main2 {
    grid-area: main2;
}
.main2 img:hover{
    filter: drop-shadow(0 0 5px #fd88da );
}
h2 {
    grid-area: h2;
    padding: 3px;
    height: 50px;
    color: #46014a;
    font-size: 20px; font-family: "Yuji Syuku", serif;
    text-align: center;
}
/*----- custom scrollbar ----- */
::-webkit-scrollbar{
    width: 20px;
}
::-webkit-scrollbar-track{
    background: #000000;
    border: double 8px #202058;
}
::-webkit-scrollbar-thumb{
    border: double 8px #45447b;
    box-shadow: #666fd8 0 0 50px,#666fd8 0 0 50px;
    background: linear-gradient(0deg,#000000 0%, #000000 83%);
}
::-webkit-scrollbar-corner {
    background: #000000;
}