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

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

    #bookshelf {
        background-color: var(--midLitePurple-color);
        width: 67vw;
        height: 78vh;
        z-index: 0;
        position: fixed;
        display: flex;
        flex-direction: column;
        overflow-y: scroll;
        overflow-x: hidden;
        bottom: 0;
    }

    .cloudbg {
        z-index: -9;
    }

    .shelf { 
        background-image: url('Bookshelf/imgs/shelfbg1.svg');
        background-size: cover;         
        background-repeat: no-repeat;    
        background-position: center;
        height: 25vh;
        border: 2vh solid var(--midLitePurple-color);
        margin-bottom: -3vh;
        
    }

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

    .shelfContent {
        display: flex;
        flex-direction: row;  
        justify-content: center;
        align-items: end;
        gap: 1vw;
        height: inherit;
        width: 95%;
        justify-self: center;   
    }

    .shelfCubby {
        gap: 1vw;
        width: 22vh;
        height: 22vh;
        display: flex;
        align-self: center;
        justify-content: center;
        align-items: center;
    }

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

    .shelfItem:hover {
        scale: 1.4;
        transition-duration: .5s;
        cursor: pointer;
    }

    .clownGirl {
        position: fixed;
        height: 25vh;
        z-index: 12;
        top: 5vh;
        right: 21.5vw;
        pointer-events: none;
    }

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

    .bookpile {
        position: fixed;
        height: 25vh;
        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: 2%; 
        left: -193%;
    }
    

    .tooltip-text-left { 
        bottom: 2%; 
        left: 155%;
    }

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