styles.css

body, html {
    height: 100%;
    margin: 0;
    font-family: 'Tinos', serif;
    background-color: rgb(229, 222, 201);
    color: #333;
    overflow: hidden; /* Prevents any potential scrollbar from affecting alignment */
}

.github-link {
    position: fixed;
    right: 20px;
    top: 20px;
    transition: opacity 1s ease-in-out;
    opacity: 1;
    z-index: 1000; /* Ensure it's above other elements */
}

.github-link img {
    width: 80px; /* Adjust width as needed */
    height: auto; /* Maintain aspect ratio */
}

.github-link:hover {
    opacity: 1 !important;
}

#quoteContainer {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px; /* Add padding to ensure content doesn't touch the edges */
    box-sizing: border-box; /* Ensures padding does not add to the set width */
}

#quote {
    font-size: clamp(1.5rem, 3vw + 3vh, 3.5rem); /* Adjust as needed */
    text-align: left;
    opacity: 0; /* Start with quote invisible for fade-in effect */
    transition: opacity 2s; /* Fade in/out duration */
    margin: 0 20px;
    overflow-wrap: break-word; /* Ensures long words don't overflow */
    max-height: 70vh; /* Adjust based on your design needs */
    overflow-y: auto; /* Adds scrolling to the quote if it overflows */
}


#author {
    font-size: calc(1.5vw + 1.5vh + 1.5vmin); /* Increased font size */
    position: absolute;
    right: 3%; /* Ensures it's at the very right */
    bottom: 0px; /* Maintains a consistent distance from the bottom */
    text-align: right;
    opacity: 0; /* Start with author/book title invisible for fade-in effect */
    transition: opacity 2s; /* Fade in/out duration */
}