body {
    background-image: url('anm_assets/at_bg.png');
    cursor: url('anm_assets/at_cursor.gif'), auto; 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 95vh;  
}

@font-face {
    font-family: 'queensides'; 
    src: url('../gen_assets/queensides.ttf');
}

@font-face {
    font-family: 'bethany';
    src: url('../gen_assets/bethany.otf');
}     

::selection {
    background-color: #1f2341; 
    color: #d3deeb;  
}  

.index-div {
    position: absolute;   
}
 
/* header text */
.page_header_text {
   position: absolute; 
   font-family: 'queensides';
   top: -430px; 
   left: -280px; 
   font-size: 56px; 
   font-weight: 900; 
    width: 600px; 
    color: #550c0c; 
    text-shadow:
        -2px -2px 0 #fff, 2px -2px 0 #e6cfd6,
        -2px 2px 0 #fff, 2px 2px 0 #aeb2d1,
        0px 2px 0 #fff, 2px 0px 0 #fff,
        0px -2px 0 #fff, -2px 0px 0 #6b1111
}
 
/* overview column */ 
.theme_song_container {
    position: absolute;  
    text-align: center; 
    color: white; 
    text-shadow: 1px 1px #1f2341;
    font-size: 22px; 
    background: #14284699;
    padding: 60px;
    left: -350px; 
    top: -350px; 
    width: 570px; 
    height: 670px; 
    z-index: 999; 
    font-family: 'overview_text';
    border-radius: 35px;
    overflow-y: auto; 
    overflow-x: hidden; 
    scrollbar-width: thin;
    scrollbar-color: #6b1111 #1f2341;   
    border: 3px double #0b1a2ee6;
    box-shadow: 0 0 0 5px #2f476633;
} 

.op_title {top: -60px; position: relative; }
.op_title {top: -60px; position: relative; }
 
  /* grid */
  
.grid-container {
    position: relative; 
    display: grid;
    grid-template-columns: repeat(3, 2fr);
    gap: 10px;
    max-width: 400px;
    margin: 5px auto;
    left: -20%;   
    top: -70px; 
}  

.top_row {height: 120px; }
.mentions {font-size: 20px; top: -65px; position: relative; }

.grid_item {
    display: flex;
    justify-content: center;  
    align-items: center;     
    background-color: #fcfae2;
    border: 1px solid #550c0c;
    padding: 7px;
    border-radius: 8px;
    font-family: ktegaki;
    font-size: 16px;
    text-align: center;
}

.grid_item img {
    width: 180px;  
    border-radius: 20px; 
}

.grid_item a, .mentions a, .exit a {     
    text-decoration: none;
    transition: all 0.3s ease-in-out; 
    color: #1f2341; 
}  

.grid_item a:hover, .mentions a:hover, .exit a:hover {
    background-color: #550c0c; 
    color: #efe7d2; 
    text-decoration: underline wavy; 
}