body {
    background-image: url('gm_assets/vt_bg.png');
    cursor: url('gm_assets/vt_px_crsr.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'); 
}    

@font-face { 
    font-family: 'rijusan'; 
    src: url('../fonts/RijusansItalic-XGy2d.ttf');
} 

::selection {
    background-color: #7e4b0a; 
    color: #d3deeb;  
}  

.index-div {
    position: absolute;   
}
 
/* header text */
.page_header_text {
   position: absolute; 
   font-family: 'queensides';
   top: -430px; 
   left: -620px; 
   font-size: 56px; 
   font-weight: 900; 
    width: 600px; 
    color: #69340d; 
    text-shadow:
        -2px -2px 0 #fff, 2px -2px 0 #e6e6cf,
        -2px 2px 0 #fff, 2px 2px 0 #d1c5ae,
        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: #f5f4d1;  
    text-shadow: 1px 1px #412d1f;
    font-size: 22px; 
    background: #8f5c1a99;
    padding: 60px;
    left: -890px; 
    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: #6b3a11 #f5f4d1;     
    border: 3px double #8f5c1a99; 
    box-shadow: 0 0 0 5px #a3540a33;
} 

.op_title {top: -60px; position: relative; }
.op_title {top: -60px; position: relative; }

 .title_subheader {
    position: relative; 
    top: -40px; 
    font-family: 'rijusan';
    font-size: 26px; 
    color: #f5f4d1;   
}

  /* 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: #f5f4d1; 
    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: #522903; 
}  

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

.dvd {
    position: relative; 
    width: 600px; 
    left: -20px; 
    top: -20px;
}