#mainContent {
        display: flex;
        flex-direction: column;
        height: 100vh;
        align-items: center;
  
        position: relative;      
    }
    
    #heading {
        margin-top: 1vh;
        overflow: hidden;
        position: fixed;
        width: 60vw;
        
    }

    /* scrollbar */
    /* width */
    ::-webkit-scrollbar {
        width: 0px;
    }
    ::-webkit-scrollbar-track {
        opacity: 0;
    }

    .cloudbg {
        z-index: -9;
    }

    #halfshelf {
        height: 10vh;
        background-image: url('Bookshelf/imgs/shelfbg2.svg');
        border-bottom: none;
    }


    .shelfItem {
        align-self: center;
        width: auto;
        height: 95%; 
        transition-duration: .5s;    
    }

    .clownGirl {
        position: fixed;
        height: 22vh;
        z-index: 12;
        top: 3vh;
        right: 18vw;
        pointer-events: none;
    }

    .bookGirl {
        position: fixed;
        height: 18vh;
        z-index: 12;
        bottom: 0;
        left: 0;
        pointer-events: none;   
    }

    .bookpile {
        position: fixed;
        height: 19vh;
        z-index: 12;
        bottom: 0;
        right: 0;
        pointer-events: none;  
              
    }

    .mediaTitle {
        font-size: large;
    }

    .tooltip-container {
        position: relative; /* Needed for positioning the tooltip text */
        /* display: inline-block;  */
    }

    .tooltip-text {
        visibility: hidden; /* Hidden by default */
        width: 300px; /* Adjust width as needed */
        background-color: var(--darkerPurple-color);
        color: #e8d2ff;
        text-align: center;
        border-radius: 6px;
        border: 1px #d2a9ff solid;
        padding: 6px ;
        position: absolute; /* Positioned relative to its container */
        bottom: 95%; /* Adjust position (e.g., top, left, right) */
        left: 60%;
        margin-left: -60px; /* Half of the width to center it */
        opacity: 0; /* Hidden by default for a fade effect */
        transition: opacity 0.3s; /* Smooth transition for fade-in */
        overflow: visible;
        z-index: 20;
        pointer-events: none;
    }

    .tooltip-text-right {
        bottom: -10%; 
        left: -168%;
    }
    

    .tooltip-text-left { 
        bottom: -10%; 
        left: 140%;
    }

    .tooltip-container:hover .tooltip-text {
        visibility: visible; /* Show on hover */
        opacity: 1; /* Fade in on hover */
    }


    /* NEW BOOKSHELF */

#shelfNav {
    display: flex;
    gap: 1vw;
    margin-top: 12vh;
    z-index: 10;
    position: fixed;
    left: 20vw;
    
}

#filmBtn h3{
    color: #ff61da;
     -webkit-text-stroke: 4px #b7004b; /* Change the outline colour of the machine title text*/
    paint-order: stroke fill;
    text-shadow: 5px 5px 0px #b7004b;
}
#tvBtn h3{
    color: #98d941;
     -webkit-text-stroke: 4px #0b6adb; /* Change the outline colour of the machine title text*/
    paint-order: stroke fill;
    text-shadow: 5px 5px 0px #0b6adb;
}
#gamesBtn h3{
    color: #3ec9ff;
     -webkit-text-stroke: 4px #4200c1; /* Change the outline colour of the machine title text*/
    paint-order: stroke fill;
    text-shadow: 5px 5px 0px #4200c1;
}
#booksBtn h3{
    color: #fae384;
     -webkit-text-stroke: 4px #d945b0; /* Change the outline colour of the machine title text*/
    paint-order: stroke fill;
    text-shadow: 5px 5px 0px #d945b0;
}
#tarotBtn h3{
    color: #ff80f3;
     -webkit-text-stroke: 4px #4600ce; /* Change the outline colour of the machine title text*/
    paint-order: stroke fill;
    text-shadow: 5px 5px 0px #4600ce;
}
#favesBtn h3{
    color: #c7f769;
     -webkit-text-stroke: 4px #ea3d00; /* Change the outline colour of the machine title text*/
    paint-order: stroke fill;
    text-shadow: 5px 5px 0px #ea3d00;
}
#allBtn h3{
    color: #400093;
     -webkit-text-stroke: 4px #1aff2d; /* Change the outline colour of the machine title text*/
    paint-order: stroke fill;
    text-shadow: 5px 5px 0px #1aff2d;
}


#shelfNav button {
    z-index: 10;

    font-weight: 900;
    border-radius: 15px;
    padding: 0;
    padding-bottom: 2vh;

    background: transparent;
    border: none;
    padding: 0;
    margin: 0;


    cursor: pointer;
    text-decoration: none;

    transition-duration: .5s;
   
}

#shelfNav button:hover {
    scale: 1.2;
    transition-duration: .5s;
}


#shelves {
    width: 71vw;
    height: 79vh;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: auto;

    background-color: var(--midLitePurple-color);

    background-size: auto 28vh;
    background-repeat: repeat-y;

    border: 2vh solid var(--midLitePurple-color);
    z-index: 0;
    position: fixed;
    overflow-y: scroll;
    overflow-x: hidden;
    bottom: 0;

}


#halfshelf {
    height: 12vh;
    background-image: url('imgs/shelfbg2.svg');
    background-size: cover;         
    background-repeat: no-repeat;  
} 

#halfshelf .grid-item {
   height: 11vh; 
   padding-bottom: 1vh;
}

.grid-item {
  
    padding-top: 1vh;
    padding-bottom: 3vh;
    height: 22vh;
    
    
    display: flex;

    justify-content: center;
    align-items: center;
}

.grid-item img {
    align-self: flex-end;
    width: auto;
    height: 20vh;
    z-index: 10;
    
    transition-duration: .5s;   

}

.grid-item img:hover {
        scale: 1.4;
        transition-duration: .5s;
        cursor: pointer; }

.Cubby1{
        background-image: url('imgs/shelf1.svg');
        background-size: contain;        
        background-repeat: no-repeat;    
        background-position: center;
        
} 
.Cubby2{
        background-image: url('imgs/shelf2.svg');
        background-size: contain;         
        background-repeat: no-repeat;    
        background-position: center;
}  
.Cubby3{
        background-image: url('imgs/shelf3.svg');
        background-size: contain;         
        background-repeat: no-repeat;    
        background-position: center;
} 
.Cubby4{
        background-image: url('imgs/shelf4.svg');
        background-size: contain;         
        background-repeat: no-repeat;    
        background-position: center;
}  
.Cubby5{
        background-image: url('imgs/shelf5.svg');
        background-size: contain;         
        background-repeat: no-repeat;    
        background-position: center;
}  
.Cubby6{
        background-image: url('imgs/shelf6.svg');
        background-size: contain;         
        background-repeat: no-repeat;    
        background-position: center;
} 
.Cubby7{
        background-image: url('imgs/shelf7.svg');
        background-size: contain;         
        background-repeat: no-repeat;    
        background-position: center;
}