@font-face {
    font-family:touhoufont;
    src: url(fonts/DFPPOPCorn-W12.ttf);
}
body {
    background-image: url(images/remilia-bg.png), url(images/red-bg.jpg);
    background-size: 100vw, 100px;
    font-family:touhoufont;
}
.all {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox, Safari 18.2+, Chromium 121+ */
}
.all::-webkit-scrollbar { 
    display: none;  /* Older Safari and Chromium */
}


.shrines-new {
width:700px;
height:700px;
  position: absolute;
  right: 0;
    padding:20px;
    text-align:center;
    margin-top:50px;
}
.shrine-content img {
width:150px;
height:150px;   
object-fit: cover;
-webkit-filter: grayscale(70%);
  filter: grayscale(70%);
  opacity: 0.5;
width:100%;
transition:0.5s ease all;
}
.all {
    display:grid;
    grid-template-rows: 230px 230px 230px;
    overflow-y:scroll;
    height:100%;
    align-items: center;
  justify-content: center;
}
 .shrine-content:last-child:nth-child(odd) {
    grid-column-start: 1;
  grid-column-end: 3;
 }

.shrine-content img:hover {
    opacity:1;
    filter:grayscale(0%);
    -webkit-backdrop-filter: grayscale(0%);
    backdrop-filter:grayscale(0%);
}

.shrine-content img:hover{
  cursor:pointer;
}   
.image-filter {
    background: #6e2a31;
    width:150px;
    height:150px;
    transition:0.5s ease all;
    border:5px double black;
}  
.image-filter:hover {
    background:none;
}
figcaption {
    padding:10px;
    color:white;
}
.header {
    width:200px;
    margin-bottom:10px;
}